chota/docs/_includes/utilities.html

<section id="utilities">
  <h4>Utilities</h4>
  <p>
    You can apply these helper classes to almost any element, in order to alter
    its style.
  </p>
  <ul>
    <li>
      <code>text-primary</code> - <span class="text-primary">Primary text</span>
    </li>
    <li>
      <code>text-light</code> - <span class="text-light">Light text</span>
    </li>
    <li>
      <code>text-white</code> -
      <span class="bg-primary text-white">White text</span>
    </li>
    <li><code>text-dark</code> - <span class="text-dark">Dark text</span></li>
    <li><code>text-grey</code> - <span class="text-grey">Grey text</span></li>
    <li>
      <code>text-error</code> - <span class="text-error">Error text</span>
    </li>
    <li>
      <code>text-success</code> - <span class="text-success">Success text</span>
    </li>
    <li>
      <code>bg-primary</code> -
      <span class="bg-primary">primary background</span>
    </li>
    <li>
      <code>bg-light</code> - <span class="bg-light">Light background</span>
    </li>
    <li><code>bg-dark</code> - <span class="bg-dark">Dark background</span></li>
    <li><code>bg-grey</code> - <span class="bg-grey">Grey background</span></li>
    <li>
      <code>bg-error</code> - <span class="bg-error">Error background</span>
    </li>
    <li>
      <code>bg-success</code> -
      <span class="bg-success">Success background</span>
    </li>
    <li>
      <code>bd-primary</code> - <span class="bd-primary">primary border</span>
    </li>
    <li><code>bd-light</code> - <span class="bd-light">Light border</span></li>
    <li><code>bd-dark</code> - <span class="bd-dark">Dark border</span></li>
    <li><code>bd-grey</code> - <span class="bd-grey">Grey border</span></li>
    <li><code>bd-error</code> - <span class="bd-error">Error border</span></li>
    <li>
      <code>bd-success</code> - <span class="bd-success">Success border</span>
    </li>
    <li><code>pull-right</code> - floats an element to the right</li>
    <li><code>pull-left</code> - floats an element to the left</li>
    <li><code>text-center</code> - center aligns text</li>
    <li><code>text-left</code> - left aligns text</li>
    <li><code>text-right</code> - right aligns text</li>
    <li><code>text-uppercase</code> - text to uppercase</li>
    <li><code>text-lowercase</code> - text to lowercase</li>
    <li><code>text-capitalize</code> - capitalizes text</li>
    <li><code>is-full-screen</code> - makes the element 100% view height</li>
    <li><code>is-full-width</code> - make the element 100% width</li>
    <li>
      <code>is-vertical-align</code> - vertically centers element using flex
    </li>
    <li>
      <code>is-horizontal-align</code> - horizontal centers element using flex
    </li>
    <li><code>is-center</code> - centers element using flex</li>
    <li><code>is-right</code> - right aligns element using flex</li>
    <li><code>is-left</code> - left aligns element using flex</li>
    <li><code>is-fixed</code> - fixed positioned element</li>
    <li><code>is-paddingless</code> - removes any padding</li>
    <li><code>is-marginless</code> - removes any margin</li>
    <li><code>is-rounded</code> - make the element round</li>
    <li><code>clearfix</code> - clears the floats</li>
    <li><code>is-hidden</code> - hides the element completely</li>
    <li><code>hide-xs</code> - hides the element for screens &lt;600px</li>
    <li>
      <code>hide-sm</code> - hides the element for screens &gt;=600px and
      &lt;900px
    </li>
    <li>
      <code>hide-md</code> - hides the element for screens &gt;=900px and
      &lt;1200px
    </li>
    <li><code>hide-lg</code> - hides the element for screens &gt;=1200px</li>
    <li><code>hide-pr</code> - hides the element for printing</li>
  </ul>
  <h4>Details</h4>
  <p>You can have a <code>&lt;details&gt;</code> to defines a toggle-able block of content with a summary and additional details.</p>
  <details>
    <summary>Read more</summary>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec
      nulla vitae mollis.
    </p>
  </details>
  <p>This can be coupled to a <code>.dropdown</code> and a couple of <code>.button</code> and <code>.card</code> classes to defines a dropdown button.</p>
  <details class=dropdown>
      <summary class="button outline">My Profile</summary>
      <div class=card>
        <p><a href="#">Edit</a></p>
        <p><a href="#">Alerts&nbsp;<span class=tag>3</span></a></p>
        <hr/>
        <p><a href="#" class=text-error>Logout</a></p>
    </div>
  </details>
  <details class=dropdown>
    <summary class="button outline">Login</summary>
    <form class="card row">
      <input class=col-12 placeholder=username>
      <input class=col-12 placeholder=password type=password>
      <footer class=is-right>
        <a class="button clear">Sign up</a>
        <button type=submit>Sign in</button>
      </footer>
    </form>
  </details>
</section>