es:CSS - A reduced HTML5, CSS3 framework

Text Inputs

In addition to the default styling, you can also use helper classes to determine the width of the input.

You also have the option to add notices, labels and help text to each input via classes.

This is a little help text.

This is just an info label in blue.
Here we have a yellow warning label.
Oh, something in red means always danger!
Success labels are green.

Elements

All form elements like checkboxes, radios and selects are automatically styled just by adding the CSS file and the JavaScript.

Checkboxes

Checked
Not checked
Disabled
Disabled Checked

Radios

Checked
Not checked
Disabled
Disabled Checked

Select

Standard Dropdown
Standard Dropdown

Cheeky little file input

Textarea

We can add to the default styling of textareas using the same helper class that we used on the input boxes.

Add any relevant classes for sizing or notices and bam! You're done.

Standard buttons

Button	Usage
Default	<a href="#" class="btn"> Default</a>
Red	<a href="#" class="btn red"> Red</a>
Orange	<a href="#" class="btn orange"> Orange</a>
Blue	<a href="#" class="btn blue"> Blue</a>
Aqua	<a href="#" class="btn aqua"> Aqua</a>
Ice	<a href="#" class="btn ice"> Ice</a>
Green	<a href="#" class="btn green"> Green</a>
Purple	<a href="#" class="btn purple"> Purple</a>
Pink	<a href="#" class="btn pink"> Pink</a>
Magenta	<a href="#" class="btn magenta"> Magenta</a>
Yellow	<a href="#" class="btn yellow"> Yellow</a>

Flat buttons

Button	Usage
Default	<a href="#" class="btn flat"> Default</a>
Red	<a href="#" class="btn red flat"> Red</a>
Orange	<a href="#" class="btn orange flat"> Orange</a>
Blue	<a href="#" class="btn blue flat"> Blue</a>
Aqua	<a href="#" class="btn aqua flat"> Aqua</a>
Ice	<a href="#" class="btn ice flat"> Ice</a>
Green	<a href="#" class="btn green flat"> Green</a>
Purple	<a href="#" class="btn purple flat"> Purple</a>
Pink	<a href="#" class="btn pink flat"> Pink</a>
Magenta	<a href="#" class="btn magenta flat"> Magenta</a>
Yellow	<a href="#" class="btn yellow flat"> Yellow</a>

Button Variants

Button	Usage
Small	<a href="#" class="btn small red"> Small</a>
Medium	<a href="#" class="btn medium green"> Medium</a>
Default	<a href="#" class="btn"> Default</a>
Large	<a href="#" class="btn large ice"> Large</a>
Rounded	<a href="#" class="btn rounded yellow"> Rounded</a>
	<a href="#" class="btn circle pink xxl-icons flat"> <i class="icon-heart"></i> </a>