BaseUp > Test

Test BaseUp

A functional, not beautiful, test page

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

before:
layout
    float left, width 100%
layout-centered
    float none, width auto
    margin auto
column
    cleafix
    custom styling
gut
    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-left (=gut-1x)
gut-2x gut-1o3
gut-left-small (=gut-3x) gut-left-medium (=gut-5x) gut-left-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
    
hide-gut-left (=hide-gut-left-1x) hide-gut-left-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-left (=pull-gut-left-medium =pull-gut-5x)
pull-gut-left-small pull-gut-left-medium pull-gut-left-large
    float left set width and pull beyond left edge into gutter
    
pull-gut-right (=push-gut-left-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
Lay left
Lay centered
Lay right

asd lka sdlkj

asdkjasd

asdlkasdlkj

asdkjasd

asdlkasdlkj

asdkjasd

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

Here

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 should see 11,111,1111
11
111
1111
2
3
4
5
6 should see 66
66

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