ZXCSS

Columns for style, Layouts for layout

Rizzle: Rock-solid CSS layouts

A functional, not beautiful, test page

Definitions:
Col is the basic layout devise
Row is only needed to wrap two or more cols Gutter row is horizontal bottom or top column is vertical left or right

before:
layout
    float left, width 100%
layout-centered
    float none, width auto
    margin auto
column
    cleafix
    custom styling
column-gutter
    margin-left
    
    
    
    
now:

lay
-del- row - name works but only in certain situations
-del- clearfix - name works but not particularly elegant
-del- contain - name not working for me
    clearfix to contain floats
    
lay-left (=lay) lay-right lay-centered
    margins with auto
    
clear
clear-none

gut (=gut-1x)
gut-2x gut-1o3
gut-small (=gut-3x) gut-medium (=gut-5x) gut-large (=gut-11x)
gut-none
    margin lefts
gut-right (=gut-right-1x)
gut-right-small gut-right-medium gut-right-large
gut-right-none
    margin rights
gut-row (=gut-row-1x)
gut-row-none
    margins bottoms
gut-row-top (=gut-row-top-1x)
    margin tops
    
gut-hide (=gut-hide-1x) gut-hide-none 
    negative margin applied to lay

col
    float width 100%
    
pos
pos-1o4 pos-2o3
    margin lefts and negative margin rights only be used on col
    
pull
    float left
pull-right
    float right
    
pull-gut (=pull-gut-medium =pull-gut-5x)
pull-gut-small pull-gut-medium pull-gut-large
    float left set width and pull beyond left edge into gutter
    
pull-gut-right (=push-gut-medium =push-gut-5x)
pull-gut-right-small pull-gut-right-medium pull-gut-right-large
    float right set width and pull beyond right edge into gutter
    
width width-NoN
width-max width-max-N
    width and max-width
asdkjhas
asdkjhas
asdkjhas

Heading

Potential blah tune adjust offset
1
2
3

asdlkasdlkj

asdkjasd

asd

asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj
asdkjhas
asdkjhas
asdkjhas

Heading

Potential blah tune adjust offset
1
2
3

asdlkasdlkj

asdkjasd

asd

asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj asdlkasdlkj

Base

Layout > Layouts > Columns
1
2
3
Layout > Positional Layouts > Columns
1
2
3

Gutters

Gutter Layout > Layouts > Columns
1
2
3
Gutter Layout > Positional Layouts > Columns
1
2
3
Gutter Layout > Column > Layouts > Columns
1
2
3
Gutter Layout > Column > Positional Layouts > Columns
1
2
3

Centered

Centered Layout > Layouts > Columns
1
2
3
Centered Layout > Positional Layouts > Columns
1
2
3
Centered Layout > Gutter Layout > Layouts > Columns
1
2
3
Centered Layout > Gutter Layout > Positional Layouts > Columns
1
2
3
Centered Layout > Column > Layouts > Columns
1
2
3
Centered Layout > Column > Gutter Layout > Layouts > Columns
1
2
3
Centered Layout > Column > Gutter Layout > Layouts > Columns
1
2
3
Centered Layout > Column > Gutter Layout > Positional Layouts > Columns
1
2
3

Cleared

Layouts > Columns, Clear Layouts
1
2
3
4
5
6
Positional Layouts > Columns, Clear Layouts
1
11
111
1111
2
3
4
5
6
6

Nested

Layout > Layouts > Columns > Layout > Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Layout > Layouts > Columns > Layout > Positional Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Layout > Positional Layouts > Columns > Layout > Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Layout > Layouts > Columns > Layout > Positional Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3

Nested Gutters

Layout > Layouts > Columns > Gutter Layout > Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Layout > Layouts > Columns > Gutter Layout > Positional Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Layout > Positional Layouts > Columns > Gutter Layout > Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Layout > Layouts > Columns > Gutter Layout > Positional Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3

Gutters Nested Gutters

Gutter Layout > Layouts > Columns > Gutter Layout > Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Layout > Layouts > Columns > Gutter Layout > Positional Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Layout > Positional Layouts > Columns > Gutter Layout > Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Layout > Layouts > Columns > Gutter Layout > Positional Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3

Gutters Nested

Gutter Layout > Layouts > Columns > Layout > Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Gutter Layout > Layouts > Columns > Layout > Positional Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Gutter Layout > Positional Layouts > Columns > Layout > Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3
Gutter Layout > Layouts > Columns > Layout > Positional Layouts > Columns
1
1
2
3
2
1
2
3
3
1
2
3

Complex

1
2
3
a
4
5
6
1
2
3
a
4
5
6
1
2
3
4
5
6

Dynamically Added