The Skeleton Framework comes with a set of simple utility classes for making your frontend life a little easier.

In the examples below we use certain tags, but you can use what you want.

This is a little long. If you don't want to read any further, check out the source!

Cause an element to be the width of it's container

<input type="text" id="name" class="u-full-width">

Cause an element to be the width of the page

<input type="text" id="name" class="u-max-full-width">

Float an element to the left

<div class="u-pull-left"></div>

Float an element to the right

<div class="u-pull-right"></div>

Clear Float

<div class="u-cf"></div>

Center Block

<div class="u-center-block"></div>

Absolute Center

Nest this class inside something with position: relative to have your element centered relative to its containing element.

Use this class without nesting it to have your element centered relative to the viewport.

<div class="u-center-abs"></div>

Center Text

<div class="u-text-center"></div>

Align text to the right

<div class="u-text-right"></div>

Hide Text

<div class="u-text-hide"></div>

Hide somthing

<div class="u-hide"></div>

Show something

<div class="u-show"></div>

Make something invisible

<div class="u-invisible"></div>

Make something visible

<div class="u-visible"></div>

Make image responsive

Make something invisible

<img class="u-img-responsive">