Art Direction for the Web

A presentation at SydCSS in June 2018 in Sydney NSW, Australia by Andy Clarke

Slide 1

Slide 1

Art Direction for the Web by Andy Clarke Five minutes with CSS Template Areas @malarkey

Slide 2

Slide 2

Art Direction for the Web by Andy Clarke

Slide 3

Slide 3

2 3 4 5

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

body {
display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr); }

Slide 11

Slide 11

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

Slide 12

Slide 12

Slide 13

Slide 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 ; }

Slide 14

Slide 14

body {
grid-template-rows: repeat(3, auto); }

Slide 15

Slide 15

body { grid-template-areas: “ . . . . . " " . . . . . " " . . . . . ";
}

Slide 16

Slide 16

body { grid-template-areas: “. aside . fig-2
fi g-2" "title title banner banner banner" "fig-1 main banner banner banner";
}

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

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

body { grid-template-areas: […];
} @media screen and (min-width : 64em) { body {
grid-template-areas: […]; } }

Slide 21

Slide 21

Slide 22

Slide 22

Art Direction for the Web by Andy Clarke

Available September ’18 stuffandnonsense.co.uk/books @malarkey