simple-columns's Introduction

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

<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>

Recommend Projects