Callout title

Callout tagline!

Grid

columns

Scaffolding allows for an unlimited amount of columns giving you the freedom to create any scale grid. This can be done in two ways:

Add a class directly to an element in the markup: class="column-[n]"

<div class="grid">
  <div class="column-4"> content </div>
</div>

Assign a grid width to an element in Sass with: @include grid(n)

.element { @include grid(4) !important; }

flush

Flush grids are the default and columns should be encapsulated in a containing element with the .grid class.

example without gutter:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At magni vel ducimus est, ipsa eaque voluptate tempore cumque dicta, dolor, quaerat provident accusamus sed laboriosam ab explicabo veritatis, ea non.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At magni vel ducimus est, ipsa eaque voluptate tempore cumque dicta, dolor, quaerat provident accusamus sed laboriosam ab explicabo veritatis, ea non.

with gutters

Gutters are percentage based to maintain visual ratio. Add them by encapsulating columns using the .grid--spaced class.

example with gutter:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At magni vel ducimus est, ipsa eaque voluptate tempore cumque dicta, dolor, quaerat provident accusamus sed laboriosam ab explicabo veritatis, ea non.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At magni vel ducimus est, ipsa eaque voluptate tempore cumque dicta, dolor, quaerat provident accusamus sed laboriosam ab explicabo veritatis, ea non.

will… it… blend scale?!

The grid's width can be altered through one variable—in a % of the viewport—and all columns will automatically scale to match the new grid. Simple.

flush grid

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
7
5
φ 8
φ 4
φ 8
φ 3
φ 1
9
3
10
2
11
1
12

spaced grid

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
7
5
φ 8
φ 4
φ 8
φ 3
φ 1
9
3
10
2
11
1
12

nested grid

These are 12 '1' columns nested inside the '8' column of an flush 8/3/1 grid nested inside the '8' column of a spaced 8/3/1 grid nested inside the 8 column of a flush 8/3/1 grid.

φ 8
φ 3
φ 1
1
1
1
1
1
1
1
1
1
1
1
1
φ 3
φ 1
φ 3
φ 1
φ 3
φ 1

Headings + copy

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 3

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 4

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 5

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 6

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Placeholder Image and Some Alt Text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Placeholder Image and Some Alt Text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.


Text Elements

The a element example

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The em element example

The del element example

The dfn element and dfn element with title examples

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The u element example

The var element example


List Types

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Definition List

Definition List Term 1
This is a definition list description.
Definition List Term 2
This is a definition list description.
Definition List Term 3
This is a definition list description.

Code

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;
for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Monospace Text wrapped in "pre" tags

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Tables

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Media

Placeholder Image and Some Alt Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

The Video Element:

The Audio Element:


Form Elements

Legend

The Form:














HTML5-specific Form Elements











Buttons