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
   

   View Slide

2. Hello
   

   View Slide

3. Who am I?
   Phil Nash
   @philnash
   MINTDIGITAL
   

   View Slide

4. I am not a designer
   

   View Slide

5. CSS Laid Out
   

   View Slide

6. Tables
   

   View Slide

7. View Slide

8. Modern CSS layout methods
   • Floats
   

   View Slide

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.
   

   View Slide

10. Modern CSS layout methods
    • Floats
    • Tables
    • Flexbox
    • Grids
    

    View Slide

11. Floats
    

    View Slide

12. View Slide

13. Demo
    

    View Slide

14. View Slide

15. Tables
    

    View Slide

16. display:table
    

    View Slide

17. View Slide

18. View Slide

19. display:table
    display:table;
    display:table-row;
    display:table-cell;
    

    View Slide

20. Demo
    

    View Slide

21. Issues
    • Divs that look like tables
    • Different behaviours of table cells
    • Tables aren't very responsive
    

    View Slide

22. Further reading
    Everything you know about CSS is wrong — Rachel Andrew
    

    View Slide

23. Flexbox
    

    View Slide

24. Flexbox
    .container{
    display:flex;
    }
    01.
    02.
    03.
    

    View Slide

25. Flexbox
    .container{
    display:flex;
    flex-direction:row / row-reverse /
    column / column-reverse;
    }
    01.
    02.
    03.
    04.
    

    View Slide

26. Flexbox
    .container{
    display:flex;
    justify-content: flex-start / flex-end / center /
    space-around / space-between;
    }
    01.
    02.
    03.
    04.
    

    View Slide

27. Flexbox
    .container{
    display:flex;
    align-items: flex-start / flex-end / center /
    baseline / stretch;
    }
    01.
    02.
    03.
    04.
    

    View Slide

28. Demo
    

    View Slide

29. View Slide

30. Further reading
    • Getting Boxfresh with Flexbox — Anthony Killeen
    • Flexbox — fast track to layout nirvana? — Chris Mills
    • Using CSS flexible boxes — MDN
    

    View Slide

31. Grids
    

    View Slide

32. View Slide

33. Grids
    .container{
    display:grid;
    grid-columns: 3fr 1fr;
    }
    01.
    02.
    03.
    04.
    

    View Slide

34. Grids
    .container{
    display:grid;
    grid-columns: (3fr 1fr)[11] 3fr;
    }
    01.
    02.
    03.
    04.
    

    View Slide

35. Grids
    .grid-element{
    grid-column:1;
    grid-row:1;
    grid-column-span:5;
    grid-row-span: 3;
    }
    01.
    02.
    03.
    04.
    05.
    06.
    

    View Slide

36. Demo
    

    View Slide

37. Issues
    • Support (obvs)
    • Difficult to apply to variable lengths of items (use other techniques
    instead, like flexbox)
    

    View Slide

38. Use it now?
    Of course! Windows 8 apps!
    

    View Slide

39. Further reading
    Giving Content Priority with CSS3 Grid Layout — Rachel Andrew
    

    View Slide

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
    

    View Slide

41. Thank you
    

    View Slide

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/
    

    View Slide

43. Questions?
    Phil Nash
    @philnash
    MINTDIGITAL
    

    View Slide