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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Andy Clarke 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.

Avatar for Andy Clarke

Andy Clarke

June 06, 2018
Tweet

More Decks by Andy Clarke

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

Other Decks in Design

See All in Design
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
3
660
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
190
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
1
360
プロダクトリニューアルと同時に進める初めてのデザインシステム
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
410
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
0
1.1k
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
210
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
190
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
190
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
6.8k
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5k
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
200
DESIGNEAST 2025 A-3
Avatar for Shigeru Kobayashi _kotobuki_
0
130

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Design in an AI World
Avatar for tapps tapps
0
130
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
45
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
210
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
420
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
750
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1.1k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
72

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