Foundation Flex Grid (continued)
Screencast: Foundation 6 — Responsive Web Designcontinued from Foundation 6 screencast
- use less default styles (not to feel like overwriting stuff all the time)
- still make it prettier
styles are just for the wireframes - look generic but not ugly
Flex Grid
the float grid still IE9 compatible but flex box grid is IE10+
but saves you from the cross-browser inconsistencies
you have to use one or the other (float or flex grid)
it's progressive enchancement in design/framework
syntax is same as float
drawbacks of float based: you have to know wide all the elements are in your page (in px or % to add to 100%), you need clearfixes etc.
flex box have intelligent resizes options
Advanced options:
fill in any horizontal space left by
fill
you can use more of these
shrink behaviour: only as large as it's contents (compared to above columns which will take all the space)
unstack create a horizontal row for example: medium-unstack will unstack them on a target screen size
Alignment
vertical and horizontal (align-right) justify, even padding
same height columns - like the equalizer js plugin : creates equal height columns
Source ordering
no need to use
position: relative no more push pull classes (foundation 5) but
order classesyou can also vertically order
new spec of flexbox is much faster
there's also the CSS-gird spec, but it's far away.
the flex box is not really for layout.
they say time is right now for flexbox (it has even been for two years)