Concepts
Typography
All about typography in Superkube.
Scales #
All typography in Superkube is built on scales with values of font size and line height. Based on these scales, the framework automatically generates typography and modifiers for all texts. These are the default typography groups:
// =Scales
$scales: (
type: (
base: (...),
text: (...),
heading: (...),
input: (...),
button: (...),
form: (...),
badge: (...),
caption: (...),
label: (...),
alert: (...),
list: (...),
nav: (...),
menu: (...),
pagination: (...),
breadcrumb: (...)
)
);
Let's look at some groups in detail.
Base
Base scale forms the font size and line height for framework elements, i.e. for tags without classes.
base: (
h1: 48px 1.2,
h2: 28px 1.3,
h3: 21px 1.4,
h4: 16px 1.5,
quote: 18px 1.5,
quotecite: 12px 1.5,
table: 14px 1.5,
pre: 14px 1.5,
figcaption: 13px 1.5
)
This means that if you specify <h1>...</h1>
in the HTML, the heading will be 48px and with a line-height of 1.2.
Text
Based on the text scale modifiers of the Text module are generated with the text-
prefix.
text: (
giga: 36px 1.5,
mega: 24px 1.5,
huge: 21px 1.5,
large: 18px 1.5,
default: 16px 1.5,
medium: 14px 1.5,
small: 13px 1.5,
tiny: 12px 1.5,
micro: 11px 1.5
)
This means that if you specify <p class="text-large">...</p>
in the HTML, the paragraph will be 18px and with a line-height of 1.5.
Heading
Based on the heading scale modifiers of the Heading module are generated with the heading-
prefix.
heading: (
giga: 80px 1.1,
mega: 64px 1.1,
huge: 48px 1.2,
large: 36px 1.2,
medium: 24px 1.3,
small: 21px 1.4,
micro: 16px 1.5,
eyebrow: 11px 1.5
)
This means that if you specify <h1 class="heading-giga">...</h1>
in the HTML, the heading will be 80px and with a line-height of 1.1.
Menu
On the example of Menu module you can see how Superkube automatically generates font size modifiers for modules. The default values of the type menu scale are as follows:
menu: (
small: 13px 1.3,
medium: 14px 1.3,
default: 15px 1.3
)
This means that without the modifier menu
will have a 15px (default) font size, and two modifiers will be created:
- menu-small
- menu-medium
If you extend the $scales
by adding a new value:
// =Scales
$scales: map-extend($scales, (
type: (
menu: (
large: 18px
)
)
));
Then the final type are as follows:
menu: (
small: 13px,
medium: 14px,
default: 15px,
large: 18px
)
As a result, Superkube will automatically generate two modifiers:
- menu-small
- menu-medium
- menu-large
Note: see below how to extend type scales.
Responsive #
The typographic scale has several groups for different typography depending on the screen size.
- type-sm — for small (mobile) screens less than 768px.
- type-md — for medium screens or for tablets less than 1024px.
- type-lg — for large screens more than 1442px.
// =Scales
$scales: (
type-sm: (...),
type-md: (...),
type-lg: (...)
);
By extending $type and specifying values in these groups, you can set the behavior of text sizes on different devices and screens.
// =Scales
$scales: map-extend($scales, (
type-sm: (
text: (
giga: 28px 1.5
),
heading: (
giga: 60px 1.1,
mega: 56px 1.1
)
),
type-lg: (
heading: (
giga: 120px 1
)
)
));
Note: See the section below on how to extend the typography scale.
Type Space #
In addition to the text size scale, Superkube has a scale of spacing between headings and paragraphs, and between other content elements. Based on this scale Superkube automatically generates type spacing.
// =Scales
$scales: (
type-space: (
h1-to-tag: 3rem,
h2-to-tag: 3rem,
h3-to-tag: 3rem,
h4-to-tag: 2rem,
h5-to-tag: 1rem,
h6-to-tag: 1rem,
tag-to-tag: 5rem,
tag-to-h2: 8rem,
tag-to-h3: 8rem,
tag-to-h4: 8rem,
tag-to-h5: 8rem,
tag-to-h6: 8rem,
form-item-to-item: 5rem,
form-buttons-to-item: 6rem
)
);
Here's how it works:
- h2-to-tag — this means that there will be a default 3rem (or 12px) margin from the
h2
tag to the next paragraph or other tag. - tag-to-h3 — this means that there will be a default 8rem (or 32px) margin from the paragraph tag or other tag to the preceding
h3
.
Extend #
To extend the default values of type scales, you need to create your scales.scss
and then extend $scales
map in it.
// your project
superkube/
vars/
scales.scss
vars.scss
main.scss
Next, import scales.scss
in your custom framework settings in the vars.scss
file.
// vars.scss
@import "vars/scales";
Now you can extend the typo scale in the scales.scss
file with map-extend
function.
// =Scales
$scales: map-extend($scales, (
type: (
text: (
large-z: 18px 1.5
),
heading: (
exa: 100px 1
)
)
));
As a result, Superkube will automatically create new modifiers for Text and Heading modules with specified font sizes.
<p class="text-large-z">...</p>
<h1 class="heading-exa">...</h1>
Change #
Changing the default values works on the same principle.
You extend $type
by specifying a new value and it changes when Superkube is built.
// =Scales
$scales: map-extend($scales, (
type: (
base: (
h1: 64px 1.1
),
heading: (
large: 40px 1.1
)
),
type-space: (
h1-to-tag: 5rem
)
));
Getting #
Getting and generating modifiers and values from typo scales is already built into Superkube.
But if you need to use typo scales to build your modules or styles,
you can get the value from $type
using Functions:
- type-size
- type-line
- type-line-alt
- type-space
.item {
font-size: type-size(text, medium);
line-height: type-line(text, medium);
margin-bottom: type-space(tag-to-tag);
}