Skip to content

arronhunt/simple-columns

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

9 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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>