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
560
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.7k
Designing Imaginative Layouts (workshop)
malarkey
7
1k
Art directing web design
malarkey
8
3.8k
Designing imaginative 
grid systems (Port 80, Newport)
malarkey
5
3.1k
Designing imaginative grid systems (DXN Nottingham)
malarkey
3
1.3k
CSS3 for Responsive Web Design (full day workshop) 2015
malarkey
13
850

Other Decks in Design

See All in Design
Night Shift (beginning sequence)
cpineda57
0
870
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
460
Yahoo Newsletter Clicker Template
xuechunwu
0
290
デザインシステム構築の進め方　基本から実践まで、具体的な手順を徹底解説
ncdc
1
180
ito aya|Portfolio2409
itoaya116
0
250
Slip N Slime - Character Design Ideation
thebogheart
0
300
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
260
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
440
Haruki_Konaka_Portforio.pdf
haruki556
0
560
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
160
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
1.9k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
330

Featured

See All Featured
Gamification - CAS2011
davidbonilla
80
5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Building Your Own Lightsaber
phodgson
102
6.1k
Unsuck your backbone
ammeep
668
57k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Speed Design
sergeychernyshev
24
580
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k

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