CCM Web Design Standards

Grid System

Quick Links

  1. Large
  2. Medium
  3. Small
  4. Fluid 12-Column
  5. Multi-Column Demo #1
  6. Multi-Column Demo #2
  7. Form Grid(s)

Grid Rules

  1. Large Breakpoint is ≥ 800 pixels.
  2. Medium Breakpoint is ≥ 400 pixels and < 800 pixels.
  3. Small Breakpoint is < 400 pixels.
  4. Large columns have 12 sizes.
  5. Medium columns have 6 sizes.
  6. Small columns have 3 sizes.
  7. All rows require the clearfix class to manage the floated columns.
  8. If you don't specify a desired column size at a given breakpoint, the column becomes full width.
  9. Columns are seperated by margins. If you apply multiple column sizes to the same element, use the appropriate margin classes to space the columns properly at the desired breakpoint.

Large

Large

.col-lg-1-12
.col-lg-1-12
.col-lg-1-12
.col-lg-1-12
.col-lg-1-12
.col-lg-1-12
.col-lg-1-12
.col-lg-1-12
.col-lg-1-12
.col-lg-1-12
.col-lg-1-12
.col-lg-1-12
.col-lg-1-6
.col-lg-1-6
.col-lg-1-6
.col-lg-1-6
.col-lg-1-6
.col-lg-1-6
.col-lg-1-4
.col-lg-1-4
.col-lg-1-4
.col-lg-1-4
.col-lg-1-3
.col-lg-1-3
.col-lg-1-3
.col-lg-1-2
.col-lg-1-2
.col-lg-full

Large, No Margin

.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-12
.col-nm-lg-1-6
.col-nm-lg-1-6
.col-nm-lg-1-6
.col-nm-lg-1-6
.col-nm-lg-1-6
.col-nm-lg-1-6
.col-nm-lg-1-4
.col-nm-lg-1-4
.col-nm-lg-1-4
.col-nm-lg-1-4
.col-nm-lg-1-3
.col-nm-lg-1-3
.col-nm-lg-1-3
.col-nm-lg-1-2
.col-nm-lg-1-2
.col-lg-full

Medium

Medium

.col-md-1-6
.col-md-1-6
.col-md-1-6
.col-md-1-6
.col-md-1-6
.col-md-1-6
.col-md-1-4
.col-md-1-4
.col-md-1-4
.col-md-1-4
.col-md-1-3
.col-md-1-3
.col-md-1-3
.col-md-1-2
.col-md-1-2
.col-md-full

Medium, No Margin

.col-nm-md-1-6
.col-nm-md-1-6
.col-nm-md-1-6
.col-nm-md-1-6
.col-nm-md-1-6
.col-nm-md-1-6
.col-nm-md-1-4
.col-nm-md-1-4
.col-nm-md-1-4
.col-nm-md-1-4
.col-nm-md-1-3
.col-nm-md-1-3
.col-nm-md-1-3
.col-nm-md-1-2
.col-nm-md-1-2
.col-md-full

Small

Small

.col-sm-1-3
.col-sm-1-3
.col-sm-1-3
.col-sm-1-2
.col-sm-1-2
.col-sm-full

Small, No Margin

.col-nm-sm-1-3
.col-nm-sm-1-3
.col-nm-sm-1-3
.col-nm-sm-1-2
.col-nm-sm-1-2
.col-sm-full

Fluid 12-Column (All Viewports)

With Margins

.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-12
.col-1-6
.col-1-6
.col-1-6
.col-1-6
.col-1-6
.col-1-6
.col-1-4
.col-1-4
.col-1-4
.col-1-4
.col-1-3
.col-1-3
.col-1-3
.col-1-2
.col-1-2
.col-full

No Margin

.col-nm-1-12
.col-nm-1-12
.col-nm-1-12
.col-nm-1-12
.col-nm-1-12
.col-nm-1-12
.col-nm-1-12
.col-nm-1-12
.col-nm-1-12
.col-nm-1-12
.col-nm-1-12
.col-nm-1-12
.col-nm-1-6
.col-nm-1-6
.col-nm-1-6
.col-nm-1-6
.col-nm-1-6
.col-nm-1-6
.col-nm-1-4
.col-nm-1-4
.col-nm-1-4
.col-nm-1-4
.col-nm-1-3
.col-nm-1-3
.col-nm-1-3
.col-nm-1-2
.col-nm-1-2
.col-full

Multi-Breakpoint Demo #1

The following grid will be six columns on large viewports, two rows of three columns on medium viewports, and three rows of two columns on small viewports.

SAMPLE
SAMPLE
SAMPLE
SAMPLE
SAMPLE
SAMPLE

Multi-Breakpoint Demo #2

The following grid will be four columns on large viewports, two rows of two columns on medium viewports, and four rows of one column on small viewports.

SAMPLE
SAMPLE
SAMPLE
SAMPLE

Form Grid(s)

Forms have their own grid system and grid rules, in order to standardize the size, display, and flow of forms consistently.

  1. All forms must be on a near-white (#F7F6F6) background.
  2. The form grid has one breakpoint (800 px).
  3. The max-width of the form is 800 pixels.
  4. Every "line" of the form should be a row.
  5. Form controls have either a two-column width or a one-column width in viewports larger than or equal to the breakpoint.
  6. Form controls will take on fluid, full widths on viewports smaller than the breakpoint.