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

CSS Laid Out

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

Phil Nash

January 17, 2013
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. 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.
  2. Issues • Divs that look like tables • Different behaviours

    of table cells • Tables aren't very responsive
  3. Further reading • Getting Boxfresh with Flexbox — Anthony Killeen

    • Flexbox — fast track to layout nirvana? — Chris Mills • Using CSS flexible boxes — MDN
  4. Issues • Support (obvs) • Difficult to apply to variable

    lengths of items (use other techniques instead, like flexbox)
  5. What to do? • Use display:table now! (if you like

    tables) • Try flexbox, try grids, they are real now and they are the future
  6. 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/