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:

.com

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.

.com

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>.

Fieldset 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:

http://
Label

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.

Invalid entry
Invalid entry
Invalid entry