Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Momma's got a brand-new grid.
Search
Mary Baum
October 14, 2017
Design
0
37
Momma's got a brand-new grid.
Version 1.1
Updated with a few more slides that, ahem, should have been in the original.
Mary Baum
October 14, 2017
Tweet
Share
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
30
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
59
Let's get visual!
marybaum
0
390
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
400
My favorite design tool ... is a browser.
marybaum
0
48
Let's Get Visual!
marybaum
0
210
Themes_101.pdf
marybaum
0
270
Gutenberg.pdf
marybaum
0
140
Header logos and favicons!
marybaum
0
200
Other Decks in Design
See All in Design
minpaku-community-scrum-patterns
norinity1103
1
120
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.7k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
960
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
120
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
300
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
160
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
600
AI時代に淘汰されないデザインのしごと
akinen
1
130
portfolio_YumiYasuda
yum0418
0
290
sachi_y_portfolio
sachi337
0
260
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Writing Fast Ruby
sferik
628
62k
Why Our Code Smells
bkeepers
PRO
337
57k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Documentation Writing (for coders)
carmenintech
72
4.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Balancing Empowerment & Direction
lara
1
400
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Speed Design
sergeychernyshev
32
1k
Designing Experiences People Love
moore
142
24k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
Psst …
None
None
None
None
None
None
Now let’s pay some dues.
We’re here for two reasons. Jen Simmons Rachel Andrew
A tiny taste: http://labs.jensimmons.com/ http://jensimmons.com/post/ feb-27-2017/learn-css-grid
A tiny taste: http://gridbyexample.com https://gridbyexample.com/video/
And so much more.
So. Grid.
What is it? Where do we use it? Does it
work with Flexbox? How to get started?
What it’s not: A plugin A framework A page-builder A
panacea (much)
Where do we use it?
Grids of posts ... instead of Flexbox; instead of floats;
instead of block and inline- block;
Instead of Flexbox.
None
None
None
Thanks, Foundation. You taught me some great php.
None
How about inside a post? For this theme only,
I scrapped the image-gallery plugins.
None
None
None
None
None
None
Why, yes! You can mix units.
None
.wrapper { display: grid; grid-gap: 10px; grid-template-columns: 200px 2fr 20vw
20rem; grid-template-rows: repeat(4, 200px); background-color: #cf0; color: #ff5; } .box { background: #09f; color: #fff; border-radius: 5px; padding: 20px; font: normal 300 3rem/1 montserrat; } .a { border-radius: 200%; grid-column: 1; grid-row: 2; margin: 2.5rem; padding: 2rem 1rem; text-align: center; } .b { grid-column: 4 ; grid-row: 1 / 5; } .c { grid-column: 1 / 3 ; grid-row: 3 / 4 ; } .d { grid-column: 2; grid-row: 2; } .e { grid-column: 3 / 4; grid-row: 3 / 5; } https://codepen.io/marybaum/pen/bodZbe
Does it work with Flexbox?
None
None
None
Browser support?
None
Mary Baum @marybaum