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 CSS Grid
Search
Mary Baum
March 17, 2018
Design
0
140
Momma's CSS Grid
CSS-Grid presentation, WordCamp Miami 2018
Mary Baum
March 17, 2018
Tweet
Share
More Decks by Mary Baum
See All by Mary Baum
Genesis or TwentyTwenty?
marybaum
0
23
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
49
Let's get visual!
marybaum
0
340
Confessions of a type nut: Quick tricks to get great type on your site, and why it matters
marybaum
1
380
My favorite design tool ... is a browser.
marybaum
0
43
Let's Get Visual!
marybaum
0
170
Themes_101.pdf
marybaum
0
230
Gutenberg.pdf
marybaum
0
120
Header logos and favicons!
marybaum
0
180
Other Decks in Design
See All in Design
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
顕在化されていない期待、デザインの灯台
daitorii
1
1.1k
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1k
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
root Design Partnership Policy
root_recruit
0
4k
MiKS inc. Company PR en_202404
zakkerooni
0
150
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
2
170
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
1.9k
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
200
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.5k
Documentation Writing (for coders)
carmenintech
60
3.9k
The Mythical Team-Month
searls
216
42k
Designing Experiences People Love
moore
136
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Typedesign – Prime Four
hannesfritz
36
2.1k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Unsuck your backbone
ammeep
663
57k
We Have a Design System, Now What?
morganepeng
43
6.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Transcript
CSS-Grid.
None
None
None
None
None
None
None
None
None
None
None
None
New unit! The fraction. 1fr, 2fr, 3fr, more.
Now let’s pay some dues.
We’re here for two reasons.
Jen Simmons . http://labs.jensimmons.com/
Rachel Andrew http://rachelandrew.co.uk
Jen Simmons. Host/executive producer, The Web Ahead. 2015 Net
Award: Podcast of the Year. http://labs.jensimmons.com/
Jen Simmons. Designer/Developer Advocate at Mozilla. What do we need
next in design for the web? http://labs.jensimmons.com/
None
Rachel Andrew. Editor-in-chief, Smashing Magazine. http://rachelandrew.co.uk/
Rachel Andrew. Web developer, speaker, author. http://rachelandrew.co.uk/
Rachel Andrew. Cofounder, Perch CMS. http://rachelandrew.co.uk/
None
So. Grid.
What is it? Where do we use it? Does it
work with Flexbox? How do we get started?
What it’s not.
What it’s not: A plugin A framework A page-builder A
panacea (much)
Grid is a CSS specification.
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
Instead of floats.
None
Thanks, Foundation. You taught me some great php.
None
How about inside a post?
None
None
None
Breakpoints are a lie. (Kinda.)
None
None
None
None
None
Why, yes! You can mix units.
None
None
Does it work with Flexbox?
None
None
None
Browser support?
None
The implicit grid.
None
None
None
None
The browser adapts the grid to the elements you put
in it.
VWs.
The vw unit. Viewport-width.
None
None
None
None
Mary Baum @marybaum