baseline
Columns
Text LinkText LinkText LinkText LinkText LinkText Link

01 COLOR

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Brand 1
Brand 2
Brand 3
accent 1
accent 2
2.2 UI COLOR
Links
Link Hover
BuTTON BG
BuTTON txt

02 TYPOGRAPHY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading ONE

Heading TWO

Heading THREE

Heading FOUR

Heading FIVE
Heading Six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

03 FLEXBOX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.flex
.flex-ch
.flex-ch
.flex-ch
.flex
center-center
.flex
center-right
.flex
center-left
.flex
v-center
.flex
top-center
.flex
bottom-center
.flex
top-left
.flex
bottom-left
.flex
top-right
.flex
bottom-left
2.2 VERTICAL FLEXBOX
.v-flex
.flex-ch
.flex-ch
.flex-ch
.flex
h-center
.v-flex
h-center
.v-flex
.center-center
.v-flex
v-center

04 COLUMNS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Col 3
.3-col
Col 3
.3-col
Col 3
.3-col
Col 2
.2-col
Col 5
.5-col
Col 2
.2-col
Col 1
Col 1
Col 1
Col 1
Col 1
.1-col
Col 1
Col 1
Col 1
Col 1
Col 4
.4-col
Col 5
.5-col
.5-col
Col 6
.6-col
Col 3
.3-col
Col 7
.7-col
Col 2
Col 8
.8-col
Col 1
Col 9
.9-col
1/2
1/2

05 COLUMN PUSH

Use Column Push to move content not in a flexbox with gutter.

Column width + 1 Gutter + Margin

Col 1 PUSH
.1-col-PUSH
FLEX-CH
Col 2 PUSH
.2-col-PUSH
FLEX-CH
Col 3 PUSH
.3-col-PUSH
FLEX-CH
Col 4 PUSH
FLEX-CH
Col 5 PUSH
FLEX-CH
Col 6 PUSH
FLEX-CH
Col 7 PUSH
FLEX-CH
Col 8 PUSH
FLEX-CH

06 CSS GRID

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
3 Column CSS Grids
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
CSS Grid in Container
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
FLEX-CH
1/2 column width + 1/2 gutter width