spaceBase Style Guide

Back   |   View on GitHub

Basic Grid

The grid below shows 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.

Grid 1.1

Grid 1.3

Grid 2.1

Grid 2.2

Grid 2.3

Reverse Grid

Full Grid

Grid 4.1

Grid 4.2

Grid 4.3

Grid 4.4

Push and Pull

Grid 5.1

Grid 5.2

Responsive Grid

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

Grid 1.1

Grid 1.2

Grid 1.3

Grid 2.1

Grid 2.2

Grid 2.3

Grid 2.4

Grid 2.5

Grid 3.0

Grid 4.0

Colors

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

  1. list item 1
  2. 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
  3. list item 1
  4. 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 Block

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.

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.

Media Object

.media: 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.media.media--nowrap: 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.media.media--flip: 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.media.media--valign: 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Form Buttons

Form Fields

Checkbox
Radio

HTML5 Inputs