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

Momma's CSS Grid

Avatar for Mary Baum Mary Baum
March 17, 2018
Design
0
240

Momma's CSS Grid

CSS-Grid presentation, WordCamp Miami 2018

Avatar for Mary Baum

Mary Baum

March 17, 2018
Tweet

More Decks by Mary Baum

See All by Mary Baum
Genesis or TwentyTwenty?
Avatar for Mary Baum marybaum
0
32
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
Avatar for Mary Baum marybaum
1
65
Let's get visual!
Avatar for Mary Baum marybaum
0
410
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
Avatar for Mary Baum marybaum
1
410
My favorite design tool ... is a browser.
Avatar for Mary Baum marybaum
0
53
Let's Get Visual!
Avatar for Mary Baum marybaum
0
240
Themes_101.pdf
Avatar for Mary Baum marybaum
0
270
Gutenberg.pdf
Avatar for Mary Baum marybaum
0
140
Header logos and favicons!
Avatar for Mary Baum marybaum
0
200

Other Decks in Design

See All in Design
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
390
kintone_aroma
Avatar for kintone kintone
0
1.2k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
6.8k
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
400
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
450
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
540
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
1k
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
290
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
Avatar for Isao utm529f
0
1.8k

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
45k
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.4k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.1k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
110
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
98
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
84
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
670
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
49

Transcript

  1. CSS-Grid.

  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. New unit! The fraction. 1fr, 2fr, 3fr, more.

  15. Now let’s pay some dues.

  16. We’re here for two reasons.

  17. Jen Simmons . http://labs.jensimmons.com/

  18. Rachel Andrew http://rachelandrew.co.uk

  19. Jen Simmons. Host/executive producer, 
 The Web Ahead. 2015 Net

    Award: 
 Podcast of the Year. http://labs.jensimmons.com/

  20. Jen Simmons. Designer/Developer Advocate at Mozilla. What do we need

    next in design for the web? http://labs.jensimmons.com/
  21. None

  22. Rachel Andrew. Editor-in-chief, Smashing Magazine. http://rachelandrew.co.uk/

  23. Rachel Andrew. Web developer,
 speaker, author. http://rachelandrew.co.uk/

  24. Rachel Andrew. Cofounder, 
 Perch CMS. http://rachelandrew.co.uk/

  25. None

  26. So. Grid.

  27. What is it? Where do we use it? Does it

    work with Flexbox? How do we get started?

  28. What it’s not.

  29. What it’s not: A plugin A framework A page-builder A

    panacea (much)

  30. Grid is a CSS specification.

  31. Where do we use it?

  32. Grids of posts.

  33. instead of Flexbox; instead of floats; instead of block and

    inline- block;

  34. Instead of Flexbox.

  35. None
  36. None
  37. None

  38. Instead of floats.

  39. None

  40. Thanks, Foundation. You taught me some great php.

  41. None

  42. How about 
 inside a post?

  43. None
  44. None
  45. None

  46. Breakpoints are a lie. (Kinda.)

  47. None
  48. None
  49. None
  50. None
  51. None

  52. Why, yes! 
 You can mix units.

  53. None
  54. None

  55. Does it work with Flexbox?

  56. None
  57. None
  58. None

  59. Browser support?

  60. None

  61. The implicit grid.

  62. None
  63. None
  64. None
  65. None

  66. The browser adapts the grid to the elements you put

    in it.

  67. VWs.

  68. The vw unit. Viewport-width.

  69. None
  70. None
  71. None
  72. None

  73. Mary Baum @marybaum