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
Первая беседа о Карте реализации историй
ashapiro
0
290
太田博三(@usagisan2020)
otanet
0
190
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.1k
知を活かせるチームづくりとは？-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
700
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.9k
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
Карта реализации историй — убийца USM
ashapiro
0
200
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
280
ZKK_001.pdf
nicholaspegu
0
1.4k
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
170
Slip N Slime - Character Design Ideation
thebogheart
0
310
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
300

Featured

See All Featured
Teambox: Starting and Learning
jrom
133
8.8k
Done Done
chrislema
181
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
RailsConf 2023
tenderlove
29
900
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Designing for Performance
lara
604
68k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k

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