Flex Grid

To apply the flex grid we us the scss in the file @import “grid/flex-grid/flex-grid”;

Documentation for this can be found on http://flexboxgrid.com/

Below are some of the basics and things to note in our implementation

Ideally a site will not normally use grid layout and flex grid, however we have used 2 different sources for these and modified flex grid a little, so both can be applied if nessesary.

.row is replaced with flew-row in our implementation

.flex-row div containing .col-lg-4 cells

.flex-row div containing .col-lg-8 cells


Offsets

col-xs-offset-3 col-xs-9

Autowidth

col-xs
col-xs
col-xs
col-xs
col-xs

mix width and autowidth

col-xs
col-xs-3

Alignment

start: .start-xs

col-xs-3 – in – flex-row start-x

center: .center-xs

col-xs-3 – in – flex-row center-x

end: .end-xs

col-xs-3 – in – flex-row end-x

top: .top-xs

col-xs-6 – in – flex-row top-x
col-xs-6 – in – flex-row top-x

middle: .middle-xs

col-xs-6 – in – flex-row middle-x
col-xs-6 – in – flex-row top-x

bottom: .bottom-xs

col-xs-6 – in – flex-row bottom-x
col-xs-6 – in – flex-row top-x

Distribution

around: .around-xs

col-xs-2 – in – flex-row around-x
col-xs-2 – in – flex-row around-x
col-xs-2 – in – flex-row around-x

between: .between-xs

col-xs-2 – in – flex-row between-x
col-xs-2 – in – flex-row between-x
col-xs-2 – in – flex-row between-x

Reordering

first: .first-xs

(1) col-xs-4 – in – flex-row
(2) col-xs-4 – in – flex-row
(3) col-xs-4 and first-xs – in – flex-row around-x

last: .last-xs

(1) col-xs-4 – in – flex-row
(2) col-xs-4 and last-xs – in – flex-row
(3) col-xs-4 – in – flex-row around-x

Reversing

reverse: .reverse

(1) col-xs-4 – in – flex-row and reverse
(2) col-xs-4 – in – flex-row and reverse
(3) col-xs-4 – in – flex-row and reverse

Equal Height boxes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque neque diam, et feugiat mauris euismod nec. Etiam ultrices suscipit metus, hendrerit dignissim lacus rhoncus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque neque diam, et feugiat mauris euismod nec. Etiam ultrices suscipit metus, hendrerit dignissim lacus rhoncus sed. Quisque mollis molestie nisl sed tempus. Quisque congue velit massa. Pellentesque sed ante consequat, iaculis felis et, feugiat purus. Proin mattis, eros non laoreet congue, justo diam porta ex, id auctor odio sapien non dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque neque diam, et feugiat mauris euismod nec. Etiam ultrices suscipit metus, hendrerit dignissim lacus rhoncus sed. Quisque mollis molestie nisl sed tempus. Quisque congue velit massa. Pellentesque sed ante consequat, iaculis felis et, feugiat purus. Proin mattis, eros non laoreet congue, justo diam porta ex, id auctor odio sapien non dui. Ut vitae auctor lorem. Cras hendrerit diam et porttitor tincidunt. Vivamus ut mauris ultrices, congue nulla in, accumsan nulla. Integer finibus gravida ipsum.