There are {{ sizes | size }} sizes to choose from:
---
title: Typography helpers
subtitle: "Change the size and color of the text for one or multiple viewport width"
layout: documentation
doc-tab: modifiers
doc-subtab: typography-helpers
breadcrumb:
- home
- documentation
- modifiers
- modifiers-typography-helpers
---
{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
{% assign sizes = site.data.variables.utilities.derived-variables.vars.sizes.value | split: ' ' %}
{% capture thead %}
{% endcapture %}
{% capture size1 %}
Class
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
{{ breakpoint.name }}
{% endfor %}
{% if breakpoint.id == 'mobile' %}
Up to {{ breakpoint.to }}px
{% elsif breakpoint.id == 'fullhd' %}
{{ breakpoint.from }}px
and above
{% else %}
Between {{ breakpoint.from }}px
and {{ breakpoint.to }}px
{% endif %}
{{ initial_vars.size-1.value }}
unchanged
left-aligned
There are {{ sizes | size }} sizes to choose from:
Class | Font-size |
---|---|
is-size-{{ forloop.index }} |
{{ initial_vars[key].value }} |
You can choose a specific size for each viewport width. You simply needed to append the viewport width to the size modifier.
For example, here are the modifiers for $size-1
:
is-size-1-mobile |
{{ size1 }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
is-size-1-tablet |
{{ unchanged }}
{{ size1 }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
is-size-1-touch |
{{ size1 }}
{{ size1 }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
is-size-1-desktop |
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
{{ size1 }}
{{ size1 }}
is-size-1-widescreen |
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
{{ size1 }}
is-size-1-fullhd |
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
You can use the same logic for each of the 7 sizes.
You can set any element to one of the 9 colors or 9 shades of grey:
Class | Color |
---|---|
has-text-white | {% include color/white.html %} |
has-text-black | {% include color/black.html %} |
has-text-light | {% include color/white-ter.html %} |
has-text-dark | {% include color/grey-darker.html %} |
has-text-primary | {% include color/turquoise.html %} |
has-text-info | {% include color/cyan.html %} |
has-text-link | {% include color/blue.html %} |
has-text-success | {% include color/green.html %} |
has-text-warning | {% include color/yellow.html %} |
has-text-danger | {% include color/red.html %} |
has-text-black-bis | {% include color/black-bis.html %} |
has-text-black-ter | {% include color/black-ter.html %} |
has-text-grey-darker | {% include color/grey-darker.html %} |
has-text-grey-dark | {% include color/grey-dark.html %} |
has-text-grey | {% include color/grey.html %} |
has-text-grey-light | {% include color/grey-light.html %} |
has-text-grey-lighter | {% include color/grey-lighter.html %} |
has-text-white-ter | {% include color/white-ter.html %} |
has-text-white-bis | {% include color/white-bis.html %} |
You can align the text with the use of one of 4 alignment helpers:
Class | Alignment |
---|---|
has-text-centered |
Makes the text centered |
has-text-justified |
Makes the text justified |
has-text-left |
Makes the text aligned to the left |
has-text-right |
Makes the text aligned to the right |
You can now align text for each viewport width. You simply need to append the viewport width to the alignment modifier.
For example, here are the modifiers for has-text-left
:
has-text-left-mobile |
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
has-text-left-tablet |
{{ unchanged }}
{{ left }}
{{ left }}
{{ left }}
{{ left }}
has-text-left-tablet-only |
{{ unchanged }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
has-text-left-touch |
{{ left }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
has-text-left-desktop |
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ left }}
{{ left }}
has-text-left-desktop-only |
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
has-text-left-widescreen |
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ left }}
has-text-left-widescreen-only |
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ unchanged }}
has-text-left-fullhd |
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
You can transform the text with the use of one of 4 text transformation helpers:
Class | Transformation |
---|---|
is-capitalized |
Transforms the first character of each word to uppercase |
is-lowercase |
Transforms all characters to lowercase |
is-uppercase |
Transforms all characters to uppercase |
is-italic |
Transforms all characters to italic |
You can transform the text weight with the use of one of 4 text weight helpers:
Class | Weight |
---|---|
has-text-weight-light |
Transforms text weight to light |
has-text-weight-normal |
Transforms text weight to normal |
has-text-weight-semibold |
Transforms text weight to semi-bold |
has-text-weight-bold |
Transforms text weight to bold |