Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Laid Out

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
January 17, 2013

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

January 17, 2013
Tweet

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

  7. None
  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

  12. None
  13. Demo

  14. None
  15. Tables

  16. display:table

  17. None
  18. None
  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

  29. None
  30. Further reading • Getting Boxfresh with Flexbox — Anthony Killeen

    • Flexbox — fast track to layout nirvana? — Chris Mills • Using CSS flexible boxes — MDN
  31. Grids

  32. None
  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