Core Framework v1.2.0 – Documentation

Standard Values

Many of the building block classes use relative values (xs through xl, etc.) to imply their values. The following is a representation of the actual values behind the relative naming scheme.

  1. Font Sizes
  2. Font Families
  3. Line Heights
  4. Spacings

Font Sizes

All font sizes are rem-based, meaning that they are multiples of the document's root font size. Since the root size differs across the three device states, the listed rem values will be followed by their approximate pixel values for palm-sized devices (root: 11,666px) and lap-sized/desk-top devices (root: 10px).

xs
1.0rem
(palm: 12px)
(lap/desk: 10px)
s
1.1rem
(palm: 13px)
(lap/desk: 11px)
standard
1.2rem
(palm: 14px)
(lap/desk: 12px)
m
1.4rem
(palm: 14px)
(lap/desk: 16px)
l
1.7rem
(palm: 20px)
(lap/desk: 17px)
xl
2.0rem
(palm: 23px)
(lap/desk: 20px)
xxl
2.4rem
(palm: 28px)
(lap/desk: 24px)

Font Families

These are the predefined font families. A font family is a list of font faces by order of priority. If the first font face is not installed on the user's operating system, the next one will be used instead.

global
Verdana, DejaVu Sans, Arial, Helvetica, sans-serif
headline
Tahoma, Geneva, Arial, sans-serif
opensans
Open Sans, Tahoma, Geneva, Arial, sans-serif

Line Heights

The line height determines the total height of a line. Line heights are calculated as multiples of the font size.

s
1.0
standard
1.333
l
1.5

Spacings

These values apply to margins, paddings, list spacings, and grid gutters.

xs
5px
s
10px
standard
(size omitted)
15px
m
15px
l
20px
xl
30px