Layout System

I have always used tiny CSS layout systems. They always seemed to be the missing ingredient to web design. Initially I used tables (I know) then percent-based (%) systems, you may mock these design choices today, but they worked EVERYWHERE!

Bullet-Proof.

As the web developed, so to did CSS and we got flex box. This layout utility has been a staple of my designs going back to the percent-based designs 20+ years ago, but updated to use flex box - same classes, just a flex implementation

I use grid styles more today, like the utility class provided in Stylelite CSS

Get Layout CSS

Currently this resides in the Stylelite CSS extras folder here: Layout CSS

Usage

The flex-based system dynamically divides content on the number of child elements under row, be that a plain div(auto) or col-*. Column sizes range from col-1 to col-5 a col-5

These are relative sizes, so a col-5 is 5 times larger than a col-1

if col-* is not defined on a div, it is considered a col-1
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
2
auto
auto
auto
auto
3
auto
auto
auto
auto
4
auto
auto
auto
auto
5
auto
auto
auto
auto

To complement the layout system, there are a few utility classes that I commonly reach for that are included

Layout Utilities

.container used to layout a page, or provide nice spacing for content
.left float content left
.right float content right
.center text aligns content center
.clear clear float fix