kengai

Align

Align items vertically, horizontally. Override default alignment or other alignment classes by adding mobile-text-center, or other mobile-text classes, to the element.

text-left

text-center

text-right

align-center

mobile-text-left

mobile-text-center

mobile-text-right

<div class="{{modifier_class}} bg-grey pad-1-2">{{ modifier_class }}</div>

Backgrounds

Solid Backgrounds

bg-dark

bg-indigo

bg-green

bg-gray

bg-grey

<div class="{{ modifier_class }} pad-2">{{ modifier_class }}</div>

Background Gradients

bg-gradient

<div class="{{ modifier_class }} pad-2">{{ modifier_class }}</div>

Display

Display utilities are used for display and hidden things.

<!-- display: block; -->
<div class="d-block"></div>
<!-- display: inline; -->
<div class="d-inline"></div>
<!-- display: inline-block; -->
<div class="d-inline-block"></div>
<!-- display: flex; -->
<div class="d-flex"></div>
<!-- display: inline-flex; -->
<div class="d-inline-flex"></div>
<!-- display: none; -->
<div class="d-none"></div>
<div class="d-hide"></div>
<!-- visibility: visible; -->
<div class="d-visible"></div>
<!-- visibility: hidden; -->
<div class="d-invisible"></div>
<!-- hide text contents -->
<div class="text-hide"></div>
<!-- assistive text for screen reader -->
<div class="text-assistive"></div>

Divider

The Divider is used for separating elements.

Lorem Ipsum

Lorm Ipsum

<p>
  Lorem Ipsum
</p>

<div class="divider"></div>

<p>
  Lorm Ipsum
</p>


<div class="divider text-center" data-content="OR"></div>

<div class="columns">
  <div class="column">
    <form>
      <div class="form-group">
        <label class="form-label" for="input-example-1">Email</label>
        <input class="form-input" id="input-example-1" type="text" placeholder="Email">
      </div>
      <div class="form-group">
        <label class="form-label" for="input-example-2">Password</label>
        <input class="form-input" id="input-example-2" type="password" placeholder="Password">
      </div>
      <div class="form-group">
        <label class="form-checkbox">
          <input type="checkbox"><i class="form-icon"></i> Remember me
        </label>
      </div>
      <div class="form-group">
        <button class="btn btn-primary">Sign in</button>
      </div>
    </form>
  </div>
  <div class="divider-vert" data-content="OR"></div>
  <div class="column">
    <form>
      <div class="form-group">
        <label class="form-label" for="input-example-3">Email</label>
        <input class="form-input" id="input-example-3" type="text" placeholder="Email">
      </div>
      <div class="form-group">
        <button class="btn btn-primary btn-block">Sign up</button>
        <button class="btn btn-link btn-block">Learn more</button>
      </div>
    </form>
  </div>
</div>

Loading

Loading indicator is used for loading or updating. You can add the loading class to a container for loading status. Add the loading-lg class for large size.

Add the loading class to buttons to replace content inside with the loading animation.

<div class="loading"></div>
<div class="loading loading-lg"></div>
<button class="btn loading">Submit</button>

Position

Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.

<div class="clearfix"></div>

<div class="float-left"></div>
<div class="float-right"></div>

<div class="relative"></div>
<div class="absolute"></div>
<div class="fixed"></div>
<div class="sticky"></div>

<div class="centered"></div>

Spacing

Vertical and horizontal rhythm helper classes.

<!-- padding -->

<div class="pad-1-2"></div>
<div class="pad-1"></div>
<div class="pad-2"></div>

<!-- padding-left -->
<div class="pl-1"></div>

<!-- margin -->
<div class="m-0"></div>
<div class="m-1"></div>
<div class="m-0"></div>

<!-- margin-right -->
<div class="mr-1"></div>

...etc...