### Screen sizes

             768         1024                1216         1408
    '     '     '     '     '     '     '     '     '     '     '     '
    <---------^------------^------------------^-------------^------------->
      mobile      tablet         desktop         widescreen      fullhd

### Columns

    .container

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>
    </div>

### Modifiers

The following CSS classes affect the colour.

    .is-primary
    .is-link
    .is-info
    .is-success
    .is-warning
    .is-danger

The following classes modify the size.

    .is-small
    .is-medium
    .is-large

The following classes modify the state.

    .is-outlined
    .is-loading

### 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

### WYSIWYG Content

    <div class="content">
      <!-- start WYSIWYG contents -->
      <h1>Heading</h1>
      <p>Paragraph</p>

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

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

0 Comments for this cheatsheet. Write yours!