In her Flexbox and CSS Grids talk at RWD Summit in March 2016, Rachel Andrew shares her thoughts on working in new layout technologies for web builders. Here are my notes from her talk:
- Problem with our layout methods:
- Describing layout in markup with “DIV-itis”
- Cost to learning layout methods to tame HTML/CSS to get the layouts we want
- Trying, but “failed promise” of separation of source and display
- Flexbox
- Can I use Flexbox?
- Learn Flexbox using a games:
- Power of Flexbox
- The power of CSS ordering is for visual appearance, not for logical or reordering of the content. I.e., it makes sense to stack things on big screens differently than small screens (shrinking rows from left to right), but it’s still a list of things in the markup (top to bottom)
- Vertical centering is easy
- Flexbox Source order for Accessibility
- When using flexbox, authors are encouraged to use shorthand, rather than long hand individual properties
- Polyfill for IE9
- Recommendation is to enhance a simple layout with flexbox, rather than polyfill.
- CSS Grid Layout
- Pop things into a grid structure, no matter the source order
- Can I use Grid? TLDR: With a flag
- http://gridbyexample.com/
