--- 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 %} Class {% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint = breakpoint_hash[1] %} {{ breakpoint.name }}
{% 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 %} {% endfor %} {% endcapture %} {% capture size1 %}

{{ initial_vars.size-1.value }}

{% endcapture %} {% capture unchanged %}

unchanged

{% endcapture %} {% capture left %}

left-aligned

{% endcapture %} {% include anchor.html name="Size" %}

There are {{ sizes | size }} sizes to choose from:

{% for size in sizes %} {% assign key = 'size-' | append: forloop.index %} {% endfor %}
Class Font-size
is-size-{{ forloop.index }} {{ initial_vars[key].value }}
{% include anchor.html name="Responsive size" %}

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:

{% include layout/main-close.html %}
{{ thead }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }}
is-size-1-mobile
is-size-1-tablet
is-size-1-touch
is-size-1-desktop
is-size-1-widescreen
is-size-1-fullhd
{% include layout/main-open.html %}

You can use the same logic for each of the 7 sizes.

{% include anchor.html name="Colors" %}

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 %}
{% include anchor.html name="Alignment" %}

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
{% include anchor.html name="Responsive Alignment" %}

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:

{% include layout/main-close.html %}
{{ thead }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ left }} {{ left }} {{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ left }} {{ unchanged }} {{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }}
has-text-left-mobile
has-text-left-tablet
has-text-left-tablet-only
has-text-left-touch
has-text-left-desktop
has-text-left-desktop-only
has-text-left-widescreen
has-text-left-widescreen-only
has-text-left-fullhd
{% include layout/main-open.html %} {% include anchor.html name="Text transformation" %}

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
{% include anchor.html name="Text weight" %}

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