Forms

Each field is wrapped in a <div> with a class of field. If you want the labels to be inline you add another class to the div: <div class="field inline-label">. This sets the label and any input element to display: inline-block.

If you want the input elements to line up vertically then you need to set a width on the labels for that particular form. By default the inline labels will be the size of the label text, plus 5px margin to the right.

Checkboxes

Checkboxes need the inline-label and checkbox classes on the parent <div>. We leave the default styling on the boxes themselves.

Form buttons

If you have the choice of submit buttons you might want to use the <button> element rather than using <input type="submit">. The <button> element gives you more styling options.

Here is <input type="submit" value="Submit" class="blue">:

and here is <button type="submit" class="blue">Submit</button>:

Notice we can use the class to change the colour. Here is the button with a class of orange:

Fieldset

Here is a fieldset with the generic class tinted to give a grey background. It also includes a <legend> ('My fieldset'). The submit button is aligned right because its container <div> has a general class of align-right. I've given all the labels the same width in a document-level style rule.