Font-sizes
File: ./scss/base/typography
The following font-sizes are the ones we should be using. If you find a size that isn't in the list, simply refer to the list and choose the closest one. The font-sizes are specified as px, but will compile to rem.
$font-sizes: (
'stockholm': (default: 35, large: 42),
'madrid': (default: 21, large: 28),
'berlin': (default: 18, large: 21),
'london': (default: 16, large: 16),
'amsterdam': (default: 14, large: 16),
'paris': (default: 14, large: 14),
'dublin': (default: 12, large: 14),
'oslo': (default: 12, large: 12)
);Usage
size-CITY (eg. size-berlin)
Sets the responsive size for mobile and desktop, no other styling.
<p class="size-stockholm">Handles font-size for mobile AND desktop</p>.element {
@include size-stockholm; // Handles font-size for mobile AND desktop
}Mixin which only handles specified size, not responsive - same size for both mobile and desktop.
(Do you really want this? Responsive sizes are always better!)
.example {
@include set-size(
'berlin'
); // Sets the font-size to 16px only, for both mobile and desktop.
}
.example--large {
@include set-size(
'berlin',
'large'
); // Sets the font-size to 21px only, for both mobile and desktop.
}