CSS Laid Out

Laying out websites has traditionally been a pain. In the past lie a hundred thousand discarded HTML table elements and twisted, disfigured floated elements. In the future are the bright lights of flexbox and grid layouts. But where do we stand now? How should we be laying sites out in 2013?

Links from the presentation:
Table layouts:
Everything you know about CSS is wrong — Rachel Andrew — http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

Flex box:
Getting Boxfresh with Flexbox — Anthony Killeen — http://www.12devsofxmas.co.uk/post/2013-01-02-day-8-getting-boxfresh-with-flexbox
Flexbox — fast track to layout nirvana? — Chris Mills — http://dev.opera.com/articles/view/flexbox-basics/
Using CSS flexible boxes — MDN — https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes

Grids:
Giving Content Priority with CSS3 Grid Layout — Rachel Andrew — http://24ways.org/2012/css3-grid-layout/

The presentation and demos can be found at http://philnash.github.com/css-laid-out

Transcript

1. CSS Laid Out
2. Hello
3. Who am I? Phil Nash @philnash MINTDIGITAL
4. I am not a designer
5. CSS Laid Out
6. Tables
8. Modern CSS layout methods • Floats
9. Floats All we really wanted to do with floats was have our text flow around images. Probably images of cats, since we're on the Internet. This cat, for example, is pretty fat. He looks lazy too, but he doesn't care. Being a cat is a good life if you can get it. Purrrrfect.
10. Modern CSS layout methods • Floats • Tables • Flexbox • Grids
11. Floats
13. Demo
15. Tables
16. display:table
19. display:table display:table; display:table-row; display:table-cell;
20. Demo
21. Issues • Divs that look like tables • Different behaviours of table cells • Tables aren't very responsive
22. Further reading Everything you know about CSS is wrong — Rachel Andrew
23. Flexbox
24. Flexbox .container{ display:flex; } 01. 02. 03.
25. Flexbox .container{ display:flex; flex-direction:row / row-reverse / column / column-reverse; } 01. 02. 03. 04.
26. Flexbox .container{ display:flex; justify-content: flex-start / flex-end / center / space-around / space-between; } 01. 02. 03. 04.
27. Flexbox .container{ display:flex; align-items: flex-start / flex-end / center / baseline / stretch; } 01. 02. 03. 04.
28. Demo
30. Further reading • Getting Boxfresh with Flexbox — Anthony Killeen • Flexbox — fast track to layout nirvana? — Chris Mills • Using CSS flexible boxes — MDN
31. Grids
33. Grids .container{ display:grid; grid-columns: 3fr 1fr; } 01. 02. 03. 04.
34. Grids .container{ display:grid; grid-columns: (3fr 1fr)[11] 3fr; } 01. 02. 03. 04.
35. Grids .grid-element{ grid-column:1; grid-row:1; grid-column-span:5; grid-row-span: 3; } 01. 02. 03. 04. 05. 06.
36. Demo
37. Issues • Support (obvs) • Difficult to apply to variable lengths of items (use other techniques instead, like flexbox)
38. Use it now? Of course! Windows 8 apps!
39. Further reading Giving Content Priority with CSS3 Grid Layout — Rachel Andrew
40. What to do? • Use display:table now! (if you like tables) • Try flexbox, try grids, they are real now and they are the future
41. Thank you
42. Image credits • comedy_nose http://www.flickr.com/photos/comedynose/6766568985/ • brokinhrt2 http://www.flickr.com/photos/dq090702/2836742849/ • Ed Yourdon http://www.flickr.com/photos/yourdon/2807527198/ • nikoretro http://www.flickr.com/photos/bellatrix6/1307790239/ • jessica mullen http://www.flickr.com/photos/jessicamullen/3672695368/ • puggles http://www.flickr.com/photos/puggles/2635370660/
43. Questions? Phil Nash @philnash MINTDIGITAL