diff --git a/examples/layout.html b/examples/layout.html new file mode 100644 index 0000000..6f20bba --- /dev/null +++ b/examples/layout.html @@ -0,0 +1,150 @@ + + + + + + Layout System + + + + + +
+

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

+ + + + + + + + + + + + + + + + + + + + + +
.containerused to layout a page, or provide nice spacing for content
.leftfloat content left
.rightfloat content right
.centertext aligns content center
.clear clear float fix
+
+
+
+ +