Art Directing for the Web. Five minutes with CSS Template Areas

Transcript

1. Art Directing
   for the Web
   by Andy Clarke
   Five minutes with CSS Template Areas
   @malarkey
   

   View Slide

2. Art Directing
   for the Web
   

   View Slide

3. 2 3
   4 5
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

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

    View Slide

11. 
    …
    …
    …
    …
    
    
    
    

    View Slide

12. View 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; }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. View Slide

18. View Slide

19. body {
    grid-template-columns: 50px repeat(2, 1fr); }
    @media screen and (min-width : 64em) {
    body {
    grid-template-columns: repeat(5, 1fr); }
    }
    

    View Slide

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

    View Slide

21. View Slide

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

    View Slide