Screen sizes

         768         1024                1216         1408
'     '     '     '     '     '     '     '     '     '     '     '
  mobile      tablet         desktop         widescreen      fullhd



Wrap as many .column’s’ as you like in a .columns wrapper

<div class="columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>


The following CSS classes affect the colour.


The following classes modify the size.


The following classes modify the state.


Typography Helpers

The following classes modify the font-size

Class Font-size
.is-size-1 3rem
.is-size-2 2.5rem
.is-size-3 2rem
.is-size-4 1.5rem
.is-size-5 1.25rem
.is-size-6 1rem
.is-size-7 0.75rem

The following classes align the text

Class Alignment
.has-text-centered Makes the text centered
.has-text-justified Makes the text justified
.has-text-left. Makes the text align to the left
.has-text-right Makes the text align to the right

The following classes transform the text

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


<div class="content">
  <!-- start WYSIWYG contents -->

    <li>Item 1</li>
    <li>Item 2</li>
  <!-- end WYSIWYG contents -->

To provide default stylings for commonly generated WYSIWYG contents, use the .content class.

0 Comments for this cheatsheet. Write yours!