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

Art Directing for the Web. Five minutes with CS...

Andy Clarke
June 06, 2018
Design
199
12k

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

See All by Andy Clarke
Creative handover to Ansarada
malarkey
6
580
Developing Inspired Guides with CSS Custom Properties (variables)
malarkey
8
1.3k
Designing Inspired Style Guides (Perth, May 2017)
malarkey
8
1.3k
Designing Inspired Style Guides
malarkey
12
6.8k
Designing Imaginative Layouts (workshop)
malarkey
7
1k
Art directing web design
malarkey
8
3.9k
Designing imaginative 
grid systems (Port 80, Newport)
malarkey
5
3.2k
Designing imaginative grid systems (DXN Nottingham)
malarkey
3
1.3k
CSS3 for Responsive Web Design (full day workshop) 2015
malarkey
13
870

Other Decks in Design

See All in Design
The One
chinweanimation
0
100
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.6k
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
150
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
220
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.2k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
410
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
340
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
200
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
510
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4k
実利の世界で、表現者である
kiyou77
3
160
知を活かせるチームづくりとは？-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
770

Featured

See All Featured
Designing for humans not robots
tammielis
250
25k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Automating Front-end Workflow
addyosmani
1366
200k
A Philosophy of Restraint
colly
203
16k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Gamification - CAS2011
davidbonilla
80
5.1k
Designing for Performance
lara
604
68k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
The Invisible Side of Design
smashingmag
298
50k

Transcript

  1. Art Directing for the Web by Andy Clarke Five minutes

    with CSS Template Areas @malarkey

  2. Art Directing for the Web

  3. 2 3 4 5

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None

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

    }

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

    class="fig-2"> </body>
  12. None

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

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

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

    . . ." ". . . . ."; }

  16. body { grid-template-areas: “. aside . fig-2 fig-2" "title title

    banner banner banner" "fig-1 main banner banner banner"; }
  17. None
  18. None

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

    (min-width : 64em) { body { grid-template-columns: repeat(5, 1fr); } }

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

    64em) { body { grid-template-areas: […]; } }
  21. None

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