Example markup

Shown here is how to create a simple two column layout, the first column occupying one-third (4 columns) of the grid, the second two-thirds (8 columns).

<div class="grid_row">
  <div class="column grid_one_third">
    ...
  </div>
  <div class="column grid_two_thirds">
    ...
  </div>
</div>

Example nested columns markup

<div class="grid_row">
  <div class="column grid_8">
    <p>Level one column</p>
    <div class="grid_row">
      <div class="column grid_4 first">
         <p>Level two column</p>
      </div>
      <div class="column grid_4 last">
         <p>Level two column</p>
      </div>
    </div>
  </div>
</div>

Would produce:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

When to use

Emphasis tags (<strong> and <em>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <strong> for importance and <em> for stress emphasis.

Emphasis in a paragraph

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Note: It's still okay to use <b> and <i> tags in HTML5 and they don't have to be styled bold and italic, respectively (although if there is a more semantic element, use it). <b> is meant to highlight words or phrases without conveying additional importance, while <i> is mostly for voice, technical terms, etc.

Addresses

The <address> element is used for contact information for its nearest ancestor, or the entire body of work. Here are two examples of how it could be used:

Note: Each line in an <address> must end with a line-break (<br />) or be wrapped in a block-level tag (e.g., <p>) to properly structure the content.

Abbreviations

For abbreviations and acronyms, use the <abbr> tag (<acronym> is deprecated in HTML5). Put the shorthand form within the tag and set a title for the complete name.

How to quote

To include a blockquote, wrap <blockquote> around <p> and <small> tags. Use the <small> element to cite your source. The <cite> tag should be used to wrap the title of the work (not the author!) and if possible a link should also be provided to the work.

<blockquote>
  <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
					
  <small>Samuel L. Jackson in <cite><a href="http://www.imdb.com/title/tt0217869/">Unbreakable</a></cite></small>
</blockquote>

Becomes:

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

Samuel L. Jackson in Unbreakable

Form elements

Buttons

<button class="button"> <button class="button button-primary">
<button class="button button-success"> <button class="button button-danger">

<a class="button"> <a class="button button-primary">
<a class="button button-success"> <a class="button button-danger">

Inputs

You can use the same grid_X classes that are used for columns to size <input> elements:




etc...

Textareas

As with <input> you can use grid_X classes to easily change the width of the field.