Basic Grid

The grid structure is built on a flexbox-powered 12-column grid. It uses percentage-width flex items with human-readable classnames (i.e. one-half, two-thirds, three-quarters, etc). Each set of "grid" items must be wrapped in a "grid-wrapper". Grid items can be reversed by adding "grid-wrapper--rev", and gutters can be removed by adding "grid-wrapper--full". Alignment and distribution of grid items can be altered with classes as well.

The grids below show a combination of nested, reversed, and gutterless grids. Each integer represents the high-level grid item you are looking at, and each decimal represents the grid item’s level of nesting (if any), e.g. 2.3 represents the third nested grid inside of the second major grid.

1.1

1.2

1.3

2.1

2.2

2.3

Reverse Grid

3.1

3.2

3.3

Full Grid

4.1

4.2

4.3

4.4

Auto Sizing

5.1

5.2

5.3

Push

6.1

6.2

Responsive Grid

	Small	Medium	Large	Extra Large
Min-Width	480px	768px	1024px	1200px
Class Prefix	.hand-	.lap-	.desk-	.wall-

The grid below shows a combination of nested, fully-responsive grids using breakpoint-specific classes.

1.1

1.2

1.3

2.1

2.2

2.3

2.4

2.5

3.0

4.0

Colors

$black
$gray-dark
$gray
$gray-light
$white
$primary
$secondary
$tertiary
$quaternary

Typography

h1.Heading 1

h2.Heading 2

h3.Heading 3

h4.Heading 4

h5.Heading 5

h6.Heading 6

Unordered List

list item 1
list item 1
- list item 2
- list item 2
  - list item 3
  - list item 3
- list item 2
- list item 2
list item 1
list item 1

Ordered List

list item 1
list item 1
1. list item 2
2. list item 2
  1. list item 3
  2. list item 3
3. list item 2
4. list item 2
list item 1
list item 1

Definition List

Description name: Description value
Description name: Description value; Description value
Description name
Description name: Description value

Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 3	Table Heading 4
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 3	Table Footer 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

Sample Content

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.

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.

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Superscript item^sup
Subscript item_sub
Small text for fine print.

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.

Buttons

Link type button

spaceBase Style Guide