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.

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

June 06, 2018
Tweet

Transcript

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

    with CSS Template Areas @malarkey
  2. Art Directing for the Web

  3. 2 3 4 5

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. body { display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr);

    }
  11. <body> <picture role="banner">…</picture> <h1 class="title">…</h1> <main>…</main> <aside>…</aside> <img class="fig-1"> <img

    class="fig-2"> </body>
  12. None
  13. [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; }
  14. body { grid-template-rows: repeat(3, auto); }

  15. body { grid-template-areas: “. . . . ." ". .

    . . ." ". . . . ."; }
  16. body { grid-template-areas: “. aside . fig-2 fig-2" "title title

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

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

    64em) { body { grid-template-areas: […]; } }
  21. None
  22. Available September ’18 stuffandnonsense.co.uk/books @malarkey