Dynamic CSS with Vue

on YouTube ↗41m

" summary

Covers concrete demos and gotchas: rebuilt Susy in pure CSS (working but discouraged), heavy use of CSS custom properties plus calc and grid, and binding those variables from Vue to make layouts reactive; example apps include a day planner with per-minute columns (hits a column limit around 16.5 hours so resolution zooms out), generated pixel-art and bar/3D charts, and a sprite animator that works via CSS steps. Notes real limitations: variables can’t live inside url, CSS doesn’t know value types so variables themselves aren’t directly animatable, and Houdini is the proposed fix.

AI-written summary · about

" chapters (12)

1. 0:00Introduction
2. 0:23Web History
3. 0:401997 font and table
4. 0:592000 Cascading Style sheets
5. 1:182007 Grid Frameworks
6. 4:002009 Sass and Susy
7. 4:482009 media queries
8. 5:022011 Responsive Web Design
9. 8:512012 Flexbox
10. 21:452017: CSS Grid
11. 25:142018: Intrinsic Web Design
12. 28:05Let's add Vue

" related talks

• 36mDynamic CSS: Layouts & BeyondMiriam E Suzanne · Full Stack Fest 2018
• 40mData-Driven CSS with Grid & Custom PropertiesMiriam E Suzanne · JSConf US 2018
• 01h 03mCSS Variable SecretsLea verou · SmashingConf New York 2022
• 27mCSS Variables A New HopeMauricio Palma · CSSConf Budapest 2017
• 27mThe State of CSS in VueJamena McInteer · Vueconf.US 2020
• 33mModern CSS does what now?Joran Quinten · Frontend Nation 2024
• 53mCSS Houdini - from CSS variables to JavaScript and backSerg Hospodarets · NDC Oslo 2017
• 48mHoudini - New Era of CSSVidit Anjaria, Saket Kumar · DrupalCon Amsterdam 2019