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
570
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
860

Other Decks in Design

See All in Design
Commune_Brand_Guideline_JA
commune
1
160
TUNAG BOOK 2024
stmn
0
330
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
650
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
420
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
520
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
260
202409_会社概要資料_Englishver.pdf
zakkerooni
0
210
Первая беседа о Карте реализации историй
ashapiro
0
290
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.5k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
160

Featured

See All Featured
Scaling GitHub
holman
458
140k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Rails Girls Zürich Keynote
gr2m
94
13k
KATA
mclloyd
29
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
GraphQLとの向き合い方2022年版
quramy
43
13k
We Have a Design System, Now What?
morganepeng
50
7.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Fireside Chat
paigeccino
34
3k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Testing 201, or: Great Expectations
jmmastey
38
7.1k

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