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.

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
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>
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"; }
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: […]; } }
22. Available September ’18 stuffandnonsense.co.uk/books @malarkey