Typography
The SCSS variables for modifying typography can be found in the _brand.scss file, in the "Fonts" section. Font face associations should also be configured in the _fonts.scss file.
Font sizes
These are the seven font sizes in widest use across the site, and the scss variables for using them. (This does not preclude the use of another size, but use one of these seven variables where possible.)
-
This is xx-small
Font size: rem-calc(10), scss variable: $font-size-xx-small
-
This is x-small
Font size: rem-calc(11), scss variable: $font-size-x-small
-
This is small
Font size: rem-calc(14), scss variable: $font-size-small
-
This is medium
Font size: rem-calc(15), scss variable: $font-size-medium
-
This is large
Font size: rem-calc(16), scss variable: $font-size-large
-
This is x-large
Font size: rem-calc(24), scss variable: $font-size-x-large
-
This is xx-large
Font size: rem-calc(34), scss variable: $font-size-xx-large
Headings
Choose to use h1, h2, h3, etc. based on document information hierarchy, not desired style. For example, a page title should be an h1; if a smaller font size is desired, do not use a lesser heading, apply style to the proper hierarchical heading via a class.
Page header h1
Page header h2
Page header h3
Page header h4
Page header h5
Page header h6
Case
#FitFlopApp
Site content is stored in sentence case. To apply all-caps styling, use the "text-transform" scss variables in the _brand.scss file, and set them to "uppercase" where desired.
-
This text is "Sentance case"
-
This text is "Uppercase"
-
This text is "Lowercase"