Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Andy Clarke

June 06, 2018
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

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

    View full-size slide

  2. Art Directing
    for the Web

    View full-size slide

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

    View full-size slide









  4. View full-size slide

  5. [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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide