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

Art Directing for the Web. Five minutes with CSS Template Areas

Art Directing for the Web. Five minutes with CSS Template Areas

I’m finding it hard to contain my excitement about CSS Grid. I really do think that it offers us the best chance of making our websites better at communicating to our audiences.

Andy Clarke

June 06, 2018
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

  1. Art Directing for the Web by Andy Clarke Five minutes

    with CSS Template Areas @malarkey
  2. [role="banner"] { grid-area: banner; } .title { grid-area: title; }

    main { grid-area: main; } aside { grid-area: aside; } .fig-1 { grid-area: fig-1; } .fig-2 { grid-area: fig-2; }
  3. body { grid-template-areas: “. aside . fig-2 fig-2" "title title

    banner banner banner" "fig-1 main banner banner banner"; }
  4. body { grid-template-columns: 50px repeat(2, 1fr); } @media screen and

    (min-width : 64em) { body { grid-template-columns: repeat(5, 1fr); } }
  5. body { grid-template-areas: […]; } @media screen and (min-width :

    64em) { body { grid-template-areas: […]; } }