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

Say no to cookie cutter layouts expanded

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Chen Hui Jing Chen Hui Jing
September 28, 2017
Programming
77
0

Say no to cookie cutter layouts expanded

CSS grid, together with other layout specific properties like Flexbox, writing-mode and CSS shapes, when used in combination, open up a myriad of possibilities for responsive designs that were not possible before.

Avatar for Chen Hui Jing

Chen Hui Jing

September 28, 2017

More Decks by Chen Hui Jing

See All by Chen Hui Jing
Directions of the web
Avatar for Chen Hui Jing huijing
0
43
Box alignment
Avatar for Chen Hui Jing huijing
0
23
Be like water: applying Bruce Lee's philosophy to web design
Avatar for Chen Hui Jing huijing
2
100
Typesetting East Asian languages on the web
Avatar for Chen Hui Jing huijing
0
37
Rich dynamic design with modern CSS
Avatar for Chen Hui Jing huijing
1
54
The case for modern CSS
Avatar for Chen Hui Jing huijing
1
71
East Asian web typography
Avatar for Chen Hui Jing huijing
0
48
Layout the web with CSS Grid (and friends)
Avatar for Chen Hui Jing huijing
1
14
Not in Kansas anymore: a new frontier for web design
Avatar for Chen Hui Jing huijing
0
45

Other Decks in Programming

See All in Programming
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
Avatar for nrs nrslib
5
700
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
0
460
ReactとSvelteのその先、Ripple-TS / Beyond React and Svelte: Ripple-TS
Avatar for TOMIKAWA Sotaro ssssota
3
860
Lemonade + Foundry Toolkit でお手軽アプリ開発
Avatar for 瀬尾佳隆 seosoft
1
160
Migrations : C'est une question d'hygiène !
Avatar for Vincent Amstoutz vinceamstoutz
0
2.2k
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
1
360
3Dシーンの圧縮
Avatar for Fadis fadis
1
350
Spec-Driven Development with AI-Agents: From High-Level Requirements to Working Software
Avatar for Anton Arhipov antonarhipov
2
360
関係性から理解する"同一性"の型用語たち
Avatar for pvcresin pvcresin
2
560
OCRを使ってゲームのアイテムをデータ化する
Avatar for Kishikawa Katsumi kishikawakatsumi
0
120
Moments When Things Go Wrong
Avatar for Aurimas Liutikas aurimas
3
120
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
770

Featured

See All Featured
Between Models and Reality
Avatar for mayunak mayunak
4
300
Visualization
Avatar for Eitan Lees eitanlees
151
17k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
270
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
630
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.1k

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. None
  97. None
  98. None