Saturday, February 18, 2017

Foundation - Typography Helpers

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.

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 & DescriptionTypeDefault 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