Customize!
or make your own!

Text Fields

Default styles

All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.

Just use a class .form to a div or form element

Specify a title attribute for tooltips
use the placeholder attribute placeholder="your placeholder text"
Small snippet of help text
Small snippet of help text
Radio 1 Radio 2 Checkbox 1 Checkbox 2

Stacked forms

Add .stacked to your .form and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.

Also, adding .no-border removes the border from the form

Specify a title attribute for tooltips
use the placeholder attribute placeholder="your placeholder text"

jQuery UI

Autocomplete

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for countries. Start typing al for Albania or Algeria

Datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

Sliders

The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.

88 77 55 33 40 45 70

Progressbar

The progress bar is designed to simply display the current % complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default.


Animate to random number

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae massa justo. Aenean sed diam lorem. Maecenas facilisis rutrum enim, vel egestas elit ornare sed. Duis feugiat rhoncus egestas. Nunc purus risus, tempus id consequat a, placerat id risus. Nam pretium vulputate molestie. Praesent in justo augue. Cras fringilla rhoncus tellus, quis pellentesque augue dignissim ac. Vivamus eget arcu id magna sagittis faucibus. Proin et nibh sed orci volutpat feugiat id id nisl. Fusce pulvinar, sem vitae facilisis pretium, lacus tellus ornare nisl, ac lobortis tellus nulla eu sem.

Donec vel dui et tellus tincidunt suscipit vitae non libero. Proin vitae tellus a eros imperdiet facilisis eget venenatis lacus. Phasellus porta bibendum enim, et volutpat mauris consequat ac. Suspendisse ac augue est, quis auctor nibh. Nunc molestie, est a lacinia malesuada, elit lacus condimentum sapien, sit amet semper odio leo vel metus. Curabitur sit amet lectus in leo ornare facilisis. Sed suscipit nulla enim, ut vulputate est. Nulla in porta nisi. Phasellus ut mattis leo.

Ut quis purus eget nulla cursus ullamcorper. In hac habitasse platea dictumst. Sed vulputate magna vitae enim rutrum egestas. Sed non mauris vel ligula vehicula gravida. Aliquam ligula tellus, lobortis et mollis sed, tempus ut nulla. Fusce ac magna mi. Praesent pellentesque semper porta. Aenean nulla metus, porttitor in posuere ac, interdum eget urna. In faucibus massa sit amet ligula dignissim dictum. Aliquam ultrices, dui in vehicula bibendum, massa tellus porta lorem, non porttitor urna mi quis nulla.

Validation

Required

Just adding a class of validate[required] will force user to fill the field

class="validate[required]"
class="validate[required]"
class="validate[required]"

Custom

The validation engine can be customized with many predefined regex, for example validate[required,custom[url]]

class="validate[custom[phone]]"
class="validate[required,custom[url]]"
class="validate[required,custom[email]]"
class="validate[required,custom[ipv4]]"
class="validate[required,custom[date]]"
class="validate[required,custom[number]]"
class="validate[required,custom[integer]]"
class="validate[required,custom[onlyLetterNumber]]"
class="validate[required,custom[onlyNumberSp]]"
class="validate[required,custom[onlyLetterSp]]"
Need to make custom validations? You can with regex! Detailed documentation on form validator is located here

Equals

Both the fields much be exactly the same