A curated list of CSS Houdini resources
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
README.md Added extra.css on sample Nov 3, 2018

README.md

.Awesome-CSS-Houdini { Awesome }

A curated list of CSS Houdini resources.

🤔 Is Houdini ready yet‽

The first question that we do when we view a new technology, thanks to Surma we have a great table to see the status of APIs and the browsers support.

Is Houdini ready yet‽

Is Houdini ready yet‽


📚 Documentation


📖 Articles

Name APIs
CSS Houdini Worklets Typed OM Custom Properties & Values API Paint API Animation Worklet Layout API
Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of Worklets Typed OM Custom Properties & Values API Paint API Animation Worklet Layout API Parser API
Houdini: Demystifying CSS Worklets Paint API Layout API Typed OM Custom Properties & Values API Font metrics
Say hello to Houdini and the CSS Paint API Paint API
What Houdini Means for Animating Transforms Animation Worklet
Working with the new CSS Typed Object Model Typed OM
New ways to make your web app jank with Houdini – An introduction Worklets Typed OM Custom Properties & Values API Paint API Layout API Font metrics Compositor Worklet
Exploring the CSS Paint API Paint API Custom Properties & Values API
Simple Interactive Pie Chart with CSS Variables and Houdini Magic Custom Properties & Values API
Houdini is like Babel but for CSS Typed OM Custom Properties & Values API Paint API Animation Worklet Layout API Parser API
A Houdini Quickstart: registerProperty Custom Properties & Values API
CSS Paint in Action: Bar Chart Paint API Custom Properties & Values API
The CSS Paint API Paint API
CSS Paint API Paint API
Houdini's Animation Worklet Animation Worklet

💻 Samples

Samples APIs
CSS Houdini 🤩 Worklets Typed OM Custom Properties & Values API Paint API Animation Worklet Layout API
CSS Houdini Experiments 🤩 Custom Properties & Values API Paint API Layout API
Houdini Samples (Google Chrome Labs) Custom Properties & Values API Paint API Animation Worklet Layout API
Houdini's CSS Paint Polyfill Paint API
Using Houdini CSS Paint API with Rough.js Paint API
Ana Tudor's Houdini samples Custom Properties & Values API Paint API Animation Worklet
KarstenBuckstegge's houdini-experiments Paint API
AndresCuervo's css-houdini-experiments Paint API
Hello Houdini Paint API
extra.css Paint API

📺 Talks

Talk Conference | Channel Speaker
Houdini: Demystifying the Future of CSS Google I/O 2016 Surma
Houdini Task Force BlinkOn 5 2016 Ian Kilpatrick
Houdini and the Future of Web BlinkOn 6 2016
Polyfills & Houdini | Browser API Special CSS Day 2017 Phil Walton
The Future of CSS: CSS Houdini CSS Day 2017 Tab Atkins
CSS Houdini - from CSS variables to JavaScript and back NDC Conferences 2017 Serg Hospodarets
Houdini, the Future of CSS DrupalCon Vienna 2017 Chris Ruppel
Animation Worklet HTTP203 Advent Surma
CSS Houdini: From CSS Custom Properties to JavaScript Worklets and back Voxxed Days Thessaloniki 2018 Serg Hospodarets
Magic tricks with Houdini CSSConf Australia 2018 Sam Richard
Houdini the new CSS Magic JSUnconf 2018 Karsten Buckstegge
Houdini - What lies ahead JSConf Iceland 2018 Arun Michael Dsouza

📺 Video Tutorials

Video Author
Animate gradient components independently with CSS vars & Houdini magic Ana Tudor
Möbius beacons with CSS transforms, variables and Houdini magic Ana Tudor
Cube rings with CSS variables & Houdini magic Ana Tudor
Neon trails on torus with CSS variables & Houdini magic Ana Tudor
moon grid with clip-path, CSS variables & Houdini magic Ana Tudor
Rainbow bar spinner with CSS vars & Houdini magic Ana Tudor
Pointless 🌈 stairs with CSS variables & Houdini magic Ana Tudor
Temperature display change: conic-gradient, CSS vars, Houdini magic Ana Tudor

📄 Slides


🗣 People that talk about CSS Houdini