Skip to content

Just a base style of form elements + useful classes and JS scripts

Notifications You must be signed in to change notification settings

justinmarsan/Form-Ready-To-Go

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Form-Ready-To-Go

The point of this micro framework is to speed up styling form by providing a reset (which is more a simpler cross browser style than a pure reset), and a few classes handling positioning of label-input pairs.

On top of that some JS (jQuery powered) deals with (or will deal with) some of the elements that are really painful to style (such as selects, radio and checkboxes) to provide ehanced elements if possible (don't forget to style the default one).

That's pretty much it !

See for examples : http://justinmarsan.github.com/Form-Ready-To-Go/

Provided Classes

.top-label

This class makes your labels on top of the inputs. Really simple, effective when you need to save horizontal space. Just apply it to the form or fieldset element.

.left-label and .right-label

Those classes makes your labels on the left of their respective inputs, .left-label aligns them on the left and obviously .right-label aligns them to the right.

The labels have a fixed width of 120px, either change that directly in the classes, or add an id to the wrapping element and override it. If you do so don't forget to change the margin left of submit and button elements as they are marged to align them with the other inputs.

.form-select and .form-select-open

Those classes are applied (in JS) to the ul elements replacing select.

.form-select is the default class, .form-select-open is added when the user clicks to select another one. JS handles the changes of selected value. For it to work properly your select must have a name attribute and each option must have a value attribute (but why wouldn't they you write valid code don't you ?).

.radio-check-label

This class is used for nested label declaration for checkboxes and radio buttons like this :

<label for="radio-button" class="radio-check-label"><input name="radio-button" type="radio" />Option 1</label>

TODO : ehance this with JS to use custom images as radio buttons and checkboxes.

About

Just a base style of form elements + useful classes and JS scripts

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published