{{#markdown}}
<h3 class="h3"> Visibility</h3>
> Resizing your browser window will show the effect of the different show and hide classes.
{{/markdown}}

<table class="table table-text table-hover bx">
    <thead><tr>
      <th></th>
      <th>Large devices</th>
      <th>Medium devices</th>
      <th>Small devices</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>Hide</th>
      <td>
        <span class="hide-l fr"><i class="vicon vicon-check"></i></span>
        <code class=" language-css">.hide-l</code>
        <p class="mbn">Hide on large devices and down</p>
      </td>
      <td>
        <span class="hide-m fr"><i class="vicon vicon-check"></i></span>
        <code class=" language-css">.hide-m</code>
        <p class="mbn">Hide on medium devices and down</p>
      </td>
      <td>
        <span class="hide-s fr"><i class="vicon vicon-check"></i></span>
        <code class=" language-css">.hide-s</code>
        <p class="mbn">Hide on small devices only</p>
      </td>
    </tr>
    <tr>
      <th>Show</th>
      <td>
        <span class="show-l fr"><i class="vicon vicon-check"></i></span>
        <code class=" language-css">.show-l</code>
        <p class="mbn">Show on large devices and down</p>
      </td>
      <td>
        <span class="show-m fr"><i class="vicon vicon-check"></i></span>
        <code class=" language-css">.show-m</code>
        <p class="mbn">Show on medium devices and down</p>
      </td>
      <td>
        <span class="show-s fr"><i class="vicon vicon-check"></i></span>
        <code class=" language-css">.show-s</code>
        <p class="mbn">Show on small devices</p>
      </td>
    </tr>
    <tr>
      <th>Samples</th>
      <td>
        <span class="hide-m fr"><i class="vicon vicon-check"></i></span>
        <code class=" language-css">.hide-m</code>
        <p class="mbn">Show only on large devices</p>
      </td>
      <td>
        <span class="hide-l show-m hide-s fr"><i class="vicon vicon-check"></i></span>
        <code class=" language-css">.hide-l .show-m .hide-s</code>
        <p class="mbn">Show only on medium devices</p>
      </td>
      <td>
        <span class="hide-l show-s fr"><i class="vicon vicon-check"></i></span>
        <code class=" language-css">.hide-l .show-s</code>
        <p class="mbn">Show only on small devices</p>
      </td>
    </tr>
  </tbody></table>

{{#markdown}}
<h3 class="h3"> Responsive</h3>
> Resizing your browser window will show the effect of the different show and hide classes.
{{/markdown}}

      <table class="table table-text table-hover bx">
        <thead><tr>
          <th></th>
          <th>Large devices</th>
          <th>Medium devices</th>
          <th>Small devices</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th>Float</th>
          <td>
            <code class=" language-css">.fl</code>
            <code class=" language-css">.fr</code>
            <code class=" language-css">.fno</code>
            <p class="mbn">Floats left, right or unfloats on large devices and down</p>
          </td>
          <td>
            <code class=" language-css">.fl-m</code>
            <code class=" language-css">.fr-m</code>
            <code class=" language-css">.fno-m</code>
            <p class="mbn">Floats left, right or unfloats on medium devices and down</p>
          </td>
          <td>
            <code class=" language-css">.fl-s</code>
            <code class=" language-css">.fr-s</code>
            <code class=" language-css">.fno-s</code>
            <p class="mbn">Floats left, right or unfloats on small devices only</p>
          </td>
        </tr>
        <tr>
          <th>Text Align</th>
          <td>
            <code class=" language-css">.tal</code>
            <code class=" language-css">.tar</code>
            <code class=" language-css">.tac</code>
            <p class="mbn">Text aligns left, right or center on large devices and down</p>
          </td>
          <td>
            <code class=" language-css">.tal-m</code>
            <code class=" language-css">.tar-m</code>
            <code class=" language-css">.tac-m</code>
            <p class="mbn">Text aligns left, right or center on medium devices and down</p>
          </td>
          <td>
            <code class=" language-css">.tal-s</code>
            <code class=" language-css">.tar-s</code>
            <code class=" language-css">.tac-s</code>
            <p class="mbn">Text aligns left, right or center on small devices only</p>
          </td>
        </tr>
        <tr>
          <th>Block Align</th>
          <td>
            <code class=" language-css">.bac</code>
            <code class=" language-css">.bar</code>
            <code class=" language-css">.bal</code>
            <p class="mbn">Block aligns left, right or center on large devices and down</p>
          </td>
          <td>
            <code class=" language-css">.bac-m</code>
            <code class=" language-css">.bar-m</code>
            <code class=" language-css">.bal-m</code>
            <p class="mbn">Block aligns left, right or center on medium devices and down</p>
          </td>
          <td>
            <code class=" language-css">.bac-s</code>
            <code class=" language-css">.tar-s</code>
            <code class=" language-css">.bal-s</code>
            <p class="mbn">Block aligns left, right or center on small devices only</p>
          </td>
        </tr>
        <tr>
          <th>Padding</th>
          <td>
            <code class=" language-css">.pal</code>
            <p class="mbn">Padding all with L size, on large devices and down</p>
          </td>
          <td>
            <code class=" language-css">.pal-m</code>
            <p class="mbn">Padding all with L size, on medium devices and down</p>
          </td>
          <td>
            <code class=" language-css">.pal-s</code>
            <p class="mbn">Padding all with L size, on small devices and down</p>
          </td>
        </tr>
        <tr>
          <th>Margin</th>
          <td>
            <code class=" language-css">.mbxs</code>
            <p class="mbn">Margin bottom with XS size, on medium devices and down</p>
          </td>
          <td>
            <code class=" language-css">.mbxs-m</code>
            <p class="mbn">Margin bottom with XS size, on large devices and down</p>
          </td>
          <td>
            <code class=" language-css">.mbxs-s</code>
            <p class="mbn">Margin bottom with XS size, on small devices and down</p>
          </td>
        </tr>
      </tbody></table>

      <table class="table table-text table-hover bx">
        <thead><tr>
          <th></th>
          <th>Large devices</th>
          <th>Medium devices</th>
          <th>Small devices</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th>Block</th>
          <td>
            <code class=" language-css">.dispb</code>
            <p class="mbn">Block layout on large devices and down</p>
          </td>
          <td>
            <code class=" language-css">.dispb-m</code>
            <p class="mbn">Block layout on medium devices and down</p>
          </td>
          <td>
            <code class=" language-css">.dispb-s</code>
            <p class="mbn">Block layout on small devices and down</p>
          </td>
        </tr>
        <tr>
          <th>Inline block</th>
          <td>
            <code class=" language-css">.dispib</code>
            <p class="mbn">Inline block layout on large devices and down</p>
          </td>
          <td>
            <code class=" language-css">.dispib-m</code>
            <p class="mbn">Inline block layout on medium devices and down</p>
          </td>
          <td>
            <code class=" language-css">.dispib-s</code>
            <p class="mbn">Inline block layout on small devices and down</p>
          </td>
        </tr>
        <tr>
          <th>Inline</th>
          <td>
            <code class=" language-css">.dispi</code>
            <p class="mbn">Inline layout on large devices and down</p>
          </td>
          <td>
            <code class=" language-css">.dispi-m</code>
            <p class="mbn">Inline layout on medium devices and down</p>
          </td>
          <td>
            <code class=" language-css">.dispi-s</code>
            <p class="mbn">Inline layout on small devices and down</p>
          </td>
        </tr>
      </tbody></table>


{{#markdown}}
<h3 class="h3"> Variables</h3>
{{/markdown}}

      <table class="table table-text table-hover bx">
        <thead>
          <tr>
            <th>Variable</th>
            <th>Value</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>{{#markdown}}
```scss
@pageWidthMax
```
            {{/markdown}}
            </th>
            <td class="vam">1020px</td>
            <td>Maximum width of the page or fluid container</td>
          </tr>
          <tr>
            <th>{{#markdown}}
```scss
@breakpointM
```
            {{/markdown}}
            </th>
            <td>768px</td>
            <td>Breakpoint for medium devices (tablet)</td>
          </tr>
          <tr>
            <th>{{#markdown}}
```scss
@breakpointS
```
            {{/markdown}}
            </th>
            <td>480px</td>
            <td>Breakpoint for small devices (mobile)</td>
          </tr>
        </tbody>
      </table>

      <table class="table table-text table-hover bx">
        <thead>
          <tr>
            <th>Variable</th>
            <th>Value</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>{{#markdown}}
```scss
@pageWidth
```
            {{/markdown}}
            </th>
            <td>85%</td>
            <td>Width of the fluid container in desktop mode</td>
          </tr>
          <tr>
            <th>{{#markdown}}
```scss
@pageWidthM
```
            {{/markdown}}
            </th>
            <td>90%</td>
            <td>Width of the fluid container on medium devices</td>
          </tr>
          <tr>
            <th>{{#markdown}}
```scss
@pageWidthS
```
            {{/markdown}}
            <td>97%</td>
            <td>Width of the fluid container on small devices</td>
          </tr>
        </tbody>
      </table>