Forms
The 12-column form grid
The grid for forms comes from the smart folks at Formee. You can see the full documentation at their website. Simply wrap your label and input in an element(preferably an li) with the intended grid classes and Formee does the rest.
The classes work like this: "grid-(the number of columns you want out of 12)-12" So, "grid-6-12" will always span exactly half of it's parent container. And "grid-4-12" will always span a third of it's container, and so on.
<li class="grid-6-12"> <label for="first_name">First name</label> <input type="text" name="first_name" value="" /> </li>
The form styles used here assume a certain structure and order: Form, fieldset, and groups of elements. In The City we typically use unordered lists and list items to wrap our elements. Additionally, to ensure that submit buttons are placed properly, wrap them in an element with a class of "form_footer" and we'll handle the rest. Here's an example and the markup:
Example form
<form action="" name="" id="">
<fieldset>
<ul>
<li class="grid-5-12">
<label form="first_name">First name</label>
<input type="text" name="first_name" value=""/>
</li>
<li class="grid-5-12">
<label form="last_name">Last name</label>
<input type="text" name="last_name" value=""/>
</li>
<li class="grid-2-12">
<label form="age">Age</label>
<input type="text" name="age" value=""/>
</li>
<li class="grid-12-12">
<label form="mj_song">Favorite Michale Jackson song</label>
<input type="text" name="mj_song" value=""/>
</li>
<li class="grid-12-12">
<h5>It makes you want to:</h5>
<ul class="formee-list">
<li class="grid-12-12">
<input type="checkbox" name="jump" value=""/>
<label form="first_name">Jump</label>
</li>
<li class="grid-12-12">
<input type="checkbox" name="groove" value=""/>
<label form="groove">Groove</label>
</li>
<li class="grid-12-12">
<input type="checkbox" name="cry" value=""/>
<label form="cry">Cry</label>
</li>
<li class="grid-12-12">
<input type="checkbox" name="neverland" value=""/>
<label form="neverland">Wanna go to Neverland</label>
</li>
</ul>
</li>
<li class="form_footer">
<input type="submit" value="Submit" class="right btn btn_go"/>
<a href="#" class="btn btn_cancel right">Cancel</a>
</li>
</ul>
</fieldset>
</form>