In this example let's create a simple single column listing that contains and input and submit handler.
1. Creating a parent container
Start with a parent container that has four class names.
margin1 establishes layout by centering and setting width. Note that a
marginN class adjusts the left positioning of an element. The last two,
round gives the container a visual appearance by setting a border and rounding each corner to soften the edges.
2. Populate the container with listings
For a listing we introduce padding classes
pad2x as well as a
keyline-bottom to frame each listing in its own container. You can learn more about the padding options available here.
3. Add listing control
We want to give a user the ability to add items to the list so let's create an input field with submit action.
For the control feature an input field and anchor element is wrapped in a
parent container with the same
margin1 col8 positioning
as the listing container above. Because the input and anchor element define their
own column class a
clearfix is added to prevent these
elements breaking outside the containing parent (
colN classes contain a float property).
pill class is added to give the first and last elements
in a horizontal order a nice rounded effect. Note that the listing container
now has a
space-bottom class to give some margin bottom spacing
against the control.
4. A completed icon on listings
We want a visual distinction between items that have been completed
so lets give each completed item a checkmark. Using the
class we can add this to a span element next to each completed entry,