Simple Columns - 12-column layout framework

A simple 12-column framework utilizing CSS grid, built with a focus on keeping the syntax simple and readable.

• Simple syntax powered by responsive modifiers
• Pure CSS, no precompiling or other tools needed.
• Fully responsive
• Infinite nesting

Installation

Download simple.css

<link rel="stylesheet" type="text/css" href="css/simple.css" />

Usage

Container

Class | Usage | Accepts modifiers ----|----|---- .col-row | Container for your columns, handles the grid | No .col-fluid | Used in addition to .col-row, this tells the row not to break at breakpoints | No

Columns

Class | Usage | Accepts modifiers ----|----|---- .col-{n} | Spans your column across n number of columns. Max of 12 | Yes .col-top | Aligns the column to the top of the row | Yes .col-center | Aligns the column to the center of the row | Yes .col-bottom | Aligns the column to the bottom of the row | Yes .col-stretch | Stretches a column vertically inside its row | Yes

Column spans

Elements can span multiple columns using the .col-{n} class

<div class='col-row'>
  <div class='col-9'>Nine columns</div>
  <div class='col-3'>Three columns</div>
  <div class='col-3'>Three columns</div>
</div>

Responsive Modifiers

Column sizes and placement can update based on viewport size using size modifiers. The following modifiers can be appended to any .col- class to change based on browser size.

Mobile | Tablet | Desktop | Desktop HD ----|----|----|---- xs= | sm= | md= | lg= 30em | 45em | 60em | 75em

Examples

Adapt column span:

<div class='col-row'>
  <div class='lg=col-6 md=col-4 sm=col-2'></div>
  <div class='lg=col-6 md=col-8 sm=col-10'></div>
</div>

Adapt placement:

<div class='col-row'>
  <div class='col-4 md=col-bottom sm=col-bottom'></div>
  <div class='col-4 md=col-center sm=col-bottom'></div>
  <div class='col-4 md=col-top    sm=col-top'></div>
</div>