In this chapter let's study about Typography Helpers.
Typography helpers are used to format your text in semantically relevant
ways. Helper classes in Foundation let you to scaffold some typographic
styles quicker.
The below table list Typography Helpers which are used in Foundation.
The below table list Typography Helpers which are used in Foundation.
| S.N. | Typography helpers & Description |
|---|---|
| 1 | Text Alignment It helps in changing the element's text alignment like left, right, center and justify. |
| 2 | Subheader Subheaders can be added to any header element by using .subheader class. |
| 3 | Lead Paragraph It is considerably larger block of text compared to normal text, which can be used for advertisement or other descriptive text. |
| 4 | Un-bulleted List By default, the <ul> is bulleted list in Foundation. To remove bullets you can use .no-bullet class. |
| 5 | Statistics Whenever you are dealing with dashboard, you need highlight some important numbers. You can achieve this by using .stat class. |
Sass Reference
Variables
The below table list SASS variables in project's settings file that makes this component's default styles to get customized.| S.N. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 | $lead-font-size Font size for lead paragraphs by default. |
Number | $global-font-size * 1.25 |
| 2 | $lead-lineheight Line height for lead paragraph by default. |
String | 1.6 |
| 3 | $subheader-lineheight Subheader's default line height. |
Number | 1.4 |
| 4 | $subheader-color Subheader's default font color. |
Color | $dark-gray |
| 5 | $subheader-font-weight Subheader's default font weight. |
String | $global-weight-normal |
| 6 | $subheader-margin-top Subheader's default top margin. |
Number | 0.2rem |
| 7 | $subheader-margin-bottom Subheader's default bottom margin. |
Number | 0.5rem |
| 8 | $stat-font-size Static number's default font size | Number | 2.5rem |
No comments:
Post a Comment