Helper classes

A set of classes to help you deal with common styling.

Unlike utilities classes, helpers classes does not follow any specific format and can achieve multiple things. They are global classes.

  • Container, layout your page .container.container-fluid
  • Visibility, hide elements between devices.hidden@screenName.hidden!@screenName
  • List, format ul/ol elements easily.list-unstyle.list-inline.list-center
  • Miscellaneous, set an image responsive .responsive and add your own

Example

<header class="hidden@print">
  <a class="hidden@sm" href="#" title="Collapse">[+]</a>
  <nav class="container">
    <ul class="list-inline">
      <li>Home</li>
      <li>Documentation</li>
      <li>Code samples</li>
    </ul>
  </nav>
</header>

<article class="container">
  <img class="responsive" src="image.jpg">
  <h1>Here is my article title</h1>
  <p>With a excerpt with Lorem, ipsum.</p>
</article>

<footer class="container">
  @copyright
</footer>

Use Form << >> Use Container classes