Don't Use My Grid System (or any others)

on YouTube ↗48m

" summary

Built a grid system called Susy meta grid-system in Sass but stopped using it five years ago, then prototypes a CSS-only version; shows working examples with floats, flexbox, CSS Grid, and CSS custom properties. Recommends start with CSS Grid for two‑dimensional layout, use flexbox for single‑axis relationships, set box-sizing: border-box, beware CSS variables lack IE and flexbox cost on full‑page performance, and remove gutters to simplify the math — gutters move into padding and layouts become plain calc or var math.

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 5:31Design for Dynamic Relationships
3. 6:58Layout Concepts
4. 15:58Inline Block!
5. 20:48Shared Browser Hacks
6. 29:34Custom Properties
7. 32:53Implicit Relationships Explicit Grids
8. 36:31Nesting Matters Too Much
9. 37:53Poor Performance on Full Pages
10. 38:12OMG OMG, CSS Grid

" related talks

• 51m“Don’t Use My Grid System”Miriam E Suzanne · Clarity 2017
• 45mDon't Use My Grid System (or any others)Miriam E Suzanne · DjangoCon US 2017
• 36mDynamic CSS: Layouts & BeyondMiriam E Suzanne · Full Stack Fest 2018
• 30mStart Using CSS Grid Layout TodayRachel Andrew · RuhrJS 2017
• 29mStart Using CSS Grid Layout TodayRachel Andrew · Render Conference 2017
• 30mSolving layout problems with CSS Grid and friendsRachel Andrew · Nordic.js 2017
• 01h 02mStart Using CSS Grid Layout TodayRachel Andrew · Frontend United 2017
• 48mStart Using CSS Grid Layout TodayRachel Andrew · DevFest Nantes 2017