Forms
We set out to create an easy, powerful and versatile form layout system. A combination of form styles and the grid means you can do almost anything.
Building Forms with HTML
Creating a form is designed to be easy but extremely flexible. Forms are built with a combination of standard form elements, as well as the Grid (rows and columns).
Form elements are styled based on their type attribute rather than a class, and can be sized in a couple of ways:
- You can size inputs using column sizes, like
.large-6,.small-6. - You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.
This is an example form we've created that is laid out using the grid:
Transparent Elements
Form elements with the "transparent" class have a particular look and feel. They have no background color and change their appearance based on the class of the parent section.
Inline Labels
Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can put the label inside a different column to the left of the input. Then add a class of .right to the label to have it align to the right.
Adding a class of .inline will have it vertically center against an input. You can use one or both of these classes to accomplish the look you want.
Defining A Fieldset
We don't see them too much, but one of the useful form elements included with Suit is <fieldset>. This is used as a wrapper right inside the form element. Right after you define a fieldset, you can include a legend title by using <legend>.
Pre/Postfix Labels & Actions
Forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use <div class="row collapse"> to create label / action / input combinations. You use the Grid columns to define the size of the pre/postfix <span class="postfix"> or <span class="prefix">. Here are a few examples:
You'll notice that on the last postfix element, we've included the class of radius. This adds the border radius on the appropriate edge depending on whether it's a prefix or a postfix element. You can even include buttons with these styles, just apply the .button as well as the pre/postfix class.
Error States
Forms includes error states for labels, inputs and messaging that you can have your app generate programatically. You can attach a class of .error either to the individual elements (label, input, small) or to a column/div.