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