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

CSS3 Layouts for the Multi-screen World

CSS3 Layouts for the Multi-screen World

FOWD London, 14th May 2013

Peter Gasston

May 14, 2013
Tweet

More Decks by Peter Gasston

Other Decks in Technology

Transcript

  1. @media screen {…} @media screen and (min-width: 800px) {…} @media

    (orientation: portrait) {…} Media Queries
  2. B A C B C A B C A The

    Three Stages of RWD
  3. Flexbox A B .a { flex: 2; } .b {

    flex: 1; } A B .parent { flex-direction: column; } .a { flex: 2; } .b { flex: 1; }
  4. “Media queries can be used to do more than patch

    broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.” http://trentwalton.com/2011/07/14/content-choreography/
  5. Grid Layout .parent { display: grid; grid-definition-columns: 1fr 1fr 2fr;

    } .parent { grid-definition-columns: 1fr 1fr 2fr; grid-definition-rows: 10em auto 40px; }
  6. Grid Layout A B .child { grid-column: 2; grid-row: 2;

    } .a { grid-column: 2 / 4; } .b { grid-row: 1 span 3; }
  7. Some of the CSS properties shown in this talk are

    experimental and subject to change. Check http://caniuse.com and http://html5please.com for latest implementation status. Peter Gasston @stopsatgreen