Skip to content
πŸ› A simple 12-column framework utalizing CSS grid
HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
src
.gitignore
README.md
index.html
package.json

README.md

Simple Columns

Simple Columns - 12-column layout framework

MIT License

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>
You can’t perform that action at this time.