.flexo-container

Code

Example

.flexo-container

.row-reverse

Code

Example

1
2
3
4

.col

Code

Example

1
2
3
4

.col-reverse

Code

Example

1
2
3
4

.grid-* (number)

Notes

The grid is based on 12 columns. You must not exceed a total of 12.

Code

Example

.grid-2
.grid-6
.grid-4

.grid-auto

Code

Example

.grid-auto (.grid-3)
.grid-6
.grid-auto (.grid-3)

.grid-*-offset

Code

Example

.grid-3
.grid-6 .grid-3-offset

.grid-*-l

Notes

Use this class for width screens, between 640px and 960px.

Code

Example

.grid-4 .grid-6-l
.grid-4 .grid-3-l
.grid-4 .grid-3-l

.grid-*-m

Notes

Use this class for width screens, below 640px.

Code

Example

.grid-4 .grid-6-m
.grid-4 .grid-3-m
.grid-4 .grid-3-m

.grid-*-s

Notes

Use this class for width screens, below 640px.

Code

Example

.grid-4 .grid-6-s
.grid-4 .grid-3-s
.grid-4 .grid-3-s

.flexo-start

Code

Example

.flexo-container .flexo-start
.grid-4

.flexo-center

Code

Example

.flexo-container .flexo-center
.grid-4

.flexo-end

Code

Example

.flexo-container .flexo-end
.grid-4

.flexo-around

Code

Example

.flexo-container .flexo-around
.grid-4
.grid-4

.flexo-between

Code

Example

.flexo-container .flexo-between
.grid-4
.grid-4

.flexo-top

Code

Example

.flexo-container .flexo-top
.grid-6
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.grid-6

.flexo-middle

Code

Example

.flexo-container .flexo-middle
.grid-6
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.grid-6

.flexo-bottom

Code

Example

.flexo-container .flexo-bottom
.grid-6
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.grid-6

.flexo-first

Code

Example

1
2
3 .flexo-first

.flexo-last

Code

Example

1 .flexo-last
2
3