Utilities

The framework comes with a large but manageable set of css utility helpers as shown below

Padding (10px)

  • p = padding all around
  • p-l = padding-left
  • p-r = padding-right
  • p-t = padding-top
  • p-b = padding-bottom



Margin (10px)

  • m = margin all around
  • m-l = margin-left
  • m-r = margin-right
  • m-t = margin-top
  • m-b = margin-bottom



Border

  • b = border all around
  • b-l = border-left
  • b-r = border-right
  • b-t = border-top
  • b-b = border-bottom



Border radius

  • br = border radius all around
  • br-tl = border radius top left
  • br-tr = border radius top right
  • br-bl = border radius bottom left
  • br-br =border radius bottom right


Border fix

  • border-fix - special class to prevent double width borders when floating left



Drop Shadow

  • drop-shadow = apply a drop shadow to a div



Panel

  • panel = create a white panel around the div

Example usage

<div class="panel br-tl br-br drop-shadow">Lorem ...</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, ex dolore voluptatum, rerum accusamus accusantium obcaecati odio eius reiciendis vel nam autem quas tempore pariatur. Temporibus a rerum nobis consequatur?

Background colors

  • bg-light
  • bg-dark
  • bg-primary
  • bg-secondary
hello
hello
hello
hello

Text helpers

  • text-center
  • pull-left
  • pull-right
  • clearfix

As pull-left and pull-right uses floats you must apply a clearfix div immediately afterwards

Cursor helpers

  • hand (changes the hover state to a hand cursor)
  • no-select (prevents text highlighting or selection)
<div class="hand bg-dark"> something goes here </div>
something goes here

Position helpers

  • pos-rel (position relative)
  • pos-abs (position absolute)
  • pos-fixed (position fixed)

z-index helpers

  • z-1
  • z-2
  • z-3
  • z-4
  • z-5
  • z-6

Media queries and sizing utilities

  • full-screen - make element full screen
  • hide-phone - hide elements on a phone
  • hide-tablet - hide elements on a tablet
  • hide-laptop - hide elements on a laptop screen
  • show-phone - show elements on a phone
  • show-tablet - show elements on a tablet
  • show-laptop show elements on a laptop screen

Media query break points can be set in the Sass config file

Image helpers

  • img-responsive - sets the image to be responsive, taking up full width and resizing automatically