Base sizing units
These values defines the spacing and font size of all the framework. Every property or mixin that
involves sizes is affected by these values. That's the reason why most of the elements of
the foundations uses relative units like
These base sizing units are:
base-type-zoom: represents the base zoom of the page. This value is added on the
htmlselector and it allow us to grow the site proportionally. For most of the browsers, 100% font-size is equal to 16px. Browsers that have a different value for 100% are not an issue because the site grows correctly. This framework uses this property to decrease or increase the spacing of the site based on media queries.
base-type-size: defines the base font size of the body text. The current value refers to the
base-type-zoom: 100% (16px) -> 1em -> 16px body text. We use a relative units to be able to change the base font size using
base-type-zoom. It also allow browsers to define their own font size based on user preferences.
scale: this is the ratio of decrease or increase of the spacing unit. Combining the
scale, the framework defines proportional sizes for spacing. You can check the current proportion on TypeScale.
size-unit: this is the base size unit for font sizes and spacing. We use this unit for spacing and font-sizes.
// Sizing values $base-type-zoom: 100%; $base-type-size: 1em; // 16px // Major Third $scale: 1.250; // Basic size unit $size-unit: $base-type-size * $scale; $su: $size-unit;