First, include it on your page
Add the CSS on your page:
Optionally, you can load it through the YUI().use():
YUI().use(gallerycss-cssform', function(Y) {
Y.log('gallerycss-cssform has been added to the as a CSS file');
});
The latest (unstable) is on Github, and available for forking.
Default Form
A default inline form can be created by adding the yui3-form to any form element.
Multi-Column Form (with YUI Grids)
Multi-column forms such as the one below can be created by pulling down YUI Grids.
Stacked Form
Apply stacked label styling to any form by applying the yui3-form-stacked classname.
Aligned Form
Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls. Add the yui3-form-aligned classname to get this style.
Grouped Inputs
Grouped inputs are great for grouping small sets of text-based input elements. They work well for sign-up forms, and look natural on mobile devices.
Input Sizing
You can take advantage of YUI Grids and the yui3-input-* class to create fluid width inputs in practically any size that you want.
You can also use input elements within grid elements to lay them out across the page. In this example, the inputs are all full width with a class of yui3-input-1, inside a wrapper with a specific fluid width set by YUI Grids.
Invalid Inputs
Add the required attribute to any form control.
Disabled Inputs
Add the disabled attribute to any form control.
Rounded Form
Add the yui3-input-rounded classname to any form control.