Assign a grid width to an element in Sass with: @include grid(n)
.element { @include grid(6); }
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.
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."
Quote Author
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.
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.
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
List Item 1
List Item 2
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.