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. col10 and margin1 establishes layout by centering and setting width. Note that a marginN class adjusts the left positioning of an element. The last two, keyline-all and round gives the container a visual appearance by setting a border and rounding each corner to soften the edges.

More markup will go in here
<div class='col10 margin1 keyline-all round'>
  More markup will go in here
</div>

2. Populate the container with listings

For a listing we introduce padding classes pad1y and 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.

Explore the ship
Eat my gross space lunch
Play gravity ball
Send out a space prank to friends
Finsh this todo list
<div class='col10 margin1 keyline-all round'>
  <div class='pad1y pad2x keyline-bottom'>Explore the ship</div>
  <div class='pad1y pad2x keyline-bottom'>Eat my gross space lunch</div>
  <div class='pad1y pad2x keyline-bottom'>Play gravity ball</div>
  <div class='pad1y pad2x keyline-bottom'>Send out a space prank to friends</div>
  <div class='pad1y pad2x'>Finsh this todo list</div>
</div>

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). Lastly, a 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.

Explore the ship
Eat my gross space lunch
Play gravity ball
Send out a space prank to friends
Finsh this todo list
Add item
<div class='col10 margin1 keyline-all round space-bottom'>
  <div class='pad1y pad2x keyline-bottom'>Explore the ship</div>
  <div class='pad1y pad2x keyline-bottom'>Eat my gross space lunch</div>
  <div class='pad1y pad2x keyline-bottom'>Play gravity ball</div>
  <div class='pad1y pad2x keyline-bottom'>Send out a space prank to friends</div>
  <div class='pad1y pad2x'>Finsh this todo list</div>
</div>

<fieldset class='margin3 col6 pill clearfix'>
  <input type='text' class='col8' placeholder='List item name'>
  <a href='#' class='button col4 icon plus submit'>Add item</a>
</fieldset>

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 check icon class we can add this to a span element next to each completed entry,

Explore the ship
Eat my gross space lunch
Play gravity ball
Send out a space prank to friends
Finsh this todo list
Add item
<div class='col10 margin1 keyline-all round space-bottom'>
  <div class='pad1y pad2x keyline-bottom'>
    <span class='icon check'></span> Explore the ship
  </div>
  <div class='pad1y pad2x keyline-bottom'>
    <span class='icon'></span>Eat my gross space lunch
  </div>
  <div class='pad1y pad2x keyline-bottom'>
    <span class='icon check'></span> Play gravity ball
  </div>
  <div class='pad1y pad2x keyline-bottom'>
    <span class='icon'></span>Send out a space prank to friends
  </div>
  <div class='pad1y pad2x'>
    <span class='icon'></span>Finsh this todo list
  </div>
</div>

<fieldset class='margin3 col6 pill clearfix'>
  <input type='text' class='col8' placeholder='List item name'>
  <a href='#' class='button col4 icon plus submit'>Add item</a>
</fieldset>