Default Grid

The site adheres to a 960px grid containing 12 columns. Roll over each column to view the pixel width. The grid is responsive, fluid (uses percentages), and can accommodate nested columns.

IE8 issue: Because the grid structure uses nth-child sudo selectors, it does not work in IE8 and below. We're working on a way to remedy this by possibly using a polyfill.

View demo

Example of grid markup

<div class="row custom-class">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Example of Sass

.custom-class { 
  $sizes: 4, 4, 4;
  @include generate_cell_format(div, $sizes);
}

Misc. elements

Using emphasis, addresses, & abbreviations

<strong> <em> <address> <abbr>

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:

Blockquotes

<blockquote> <p> <cite>

How to quote

To include a blockquote, wrap <blockquote> around <p> and <cite> tags. Use the <cite> element to cite your source and you'll get an em dash — before it.

This is Cash Call. Have you had your shake today?

Mark Uraine, Lover of good things

<blockquote>
  <p>This is Cash Call. Have you had your shake today?</p>
  <cite>Mark Uraine, Lover of good things</cite>
</blockquote>

Building tables

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tables are great for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.

Always wrap your column headers in a <thead> such that hierarchy is <thead> > <tr> > <th>.

Similar to the column headers, all your table’s body content should be wrapped in a <tbody> so your hierarchy is <tbody> > <tr> > <td>.

Customizing tables

You can change the styling of a table by adding a simple class name to the <table> tag to achieve the appearance in the examples to the right.

Example of default table

All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.

<table>
  ...
</table>

Example of a table with borders

Use the .bordered class to achieve the affects below.

<table class="bordered">
  ...
</table>

Example of a table with stripes

Use the .striped class to achieve the affects below.

<table class="striped">
  ...
</table>

Default buttons

Buttons are intended for action and thus should have appropriate weight while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.. The standard button is given that weight with a little bit of depth and a strong hover.

Example buttons

Button styles can be applied to anything with the .btn class applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

There are three different appearances for buttons. The default style is applied simply with the .btn class and can be used on standard elements that do not require immmediate attention. The .btn-primary class is utilized for primary call to action that leads the user forward through the process. The .btn-secondary class is reserved for the secondary call to action and is applied for that purpose. See the examples below:

Button Sizes

Larger or smaller buttons can be utilized as well by using the .btn-large, .btn-small or .full-width classes.

Disabled Buttons

For disabled buttons, use .btn .disabled for links and :disabled for <button> elements.

Default forms

Styles provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.

The form style to the right is considered best by usability standards, however forms are often modified for special purposes such as "search forms", "horizontal layout forms", or even "inline layout forms".

Default Example

Horizontal forms

Horizontal Example

Search forms

Search Example

About Tooltips

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.

Example use of Tooltips

Hover over the links below to see tooltips:

First, I believe that this nation should commit itself to achieving the goal, before this decade is out, of landing a man on the moon and returning him safely to the earth. No single space project in this period will be more impressive to mankind, or more important for the long-range exploration of space; and none will be so difficult or expensive to accomplish.

Using tooltip.js

Trigger the tooltip via javascript:

$('#example').tooltip(options)

Options

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an elements tooltip.
$('#element').tooltip('show')

.tooltip('hide')

Hides an elements tooltip.
$('#element').tooltip('hide')

.tooltip('toggle')

Toggles an elements tooltip.
$('#element').tooltip('toggle')

Customizable modals

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Modals require the _reveal.css and the reveal.js files.

Examples

The size of the modals can be changed by adding a class name to the modal window.

Modal with buttons

An example of how to use buttons within the modal window.

Modal Window with Buttons

The modal markup

<div id="myModal" class="reveal-modal">
  <h4>...</h4>
  <div class="modal-content">...</div>
  <div class="button-row">...</div>
  <a class="close-reveal-modal dismiss"><i class="icon-x"></i></a>
</div>

Firing the modal

Modals can be fired by using a trigger, or programatically.

Fire using a trigger

  <a href="#" data-reveal-id="myModal"></a>

Fire programatically

  <script type="text/javascript">
	$(document).ready(function() {
	  $('#myButton').click(function(e) {
		e.preventDefault();
		$('#myModal').reveal();
	  });
	});
  </script>

Inline Icons

The icons below are pulled from the free font-awesome library. Place the font-icons just about anywhere with the <i> tag.

Example

<i class="icon-gears"></i>

Icon Effects

Any effect that can be applied to text, can be applied to these icons as well, such as font-size, color, text-shadows, etc.

<i class="icon-gears" style="color:#4b9ddc; font-size:44px; text-shadow:0 1px 1px rgba(0,0,0,.2); vertical-align:middle;"></i>