Art Directing for the Web. Five minutes with CSS Template Areas
by
Andy Clarke
×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Slide 1
Slide 1 text
Art Directing for the Web by Andy Clarke Five minutes with CSS Template Areas @malarkey
Slide 2
Slide 2 text
Art Directing for the Web
Slide 3
Slide 3 text
2 3 4 5
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
body { display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr); }
Slide 11
Slide 11 text
…
…
… …
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
[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; }
Slide 14
Slide 14 text
body { grid-template-rows: repeat(3, auto); }
Slide 15
Slide 15 text
body { grid-template-areas: “. . . . ." ". . . . ." ". . . . ."; }
Slide 16
Slide 16 text
body { grid-template-areas: “. aside . fig-2 fig-2" "title title banner banner banner" "fig-1 main banner banner banner"; }
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
body { grid-template-columns: 50px repeat(2, 1fr); } @media screen and (min-width : 64em) { body { grid-template-columns: repeat(5, 1fr); } }
Slide 20
Slide 20 text
body { grid-template-areas: […]; } @media screen and (min-width : 64em) { body { grid-template-areas: […]; } }
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Available September ’18 stuffandnonsense.co.uk/books @malarkey
