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
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
majimasachi
0
290
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
370
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
710
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
160
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4k
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
330
Night Shift (beginning sequence)
cpineda57
0
930
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
33k
Dive Deep into Communication
yomtsu
0
110
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
530
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
300

Featured

See All Featured
Optimising Largest Contentful Paint
csswizardry
33
3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Code Review Best Practice
trishagee
65
17k
The Pragmatic Product Professional
lauravandoore
32
6.3k
Why Our Code Smells
bkeepers
PRO
335
57k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Automating Front-end Workflow
addyosmani
1366
200k
Done Done
chrislema
181
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k

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