> Canonical URL: https://codingcat.dev/podcast/2-6-open-props-an-open-source-css-props-library

# Open Props - an Open Source CSS Props Library

🎧 Podcast Episode · S2E6February 9, 2022[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/builder-io-symbol-light.svg)![](/logos/tags/builder-io-symbol-dark.svg)Builder.io](/topic/builder-io)[![](/logos/tags/tailwindcss-symbol-light.svg)![](/logos/tags/tailwindcss-symbol-dark.svg)Tailwind CSS](/topic/tailwindcss)[#Design](/topic/design)[![](/logos/tags/mcp-symbol-light.svg)![](/logos/tags/mcp-symbol-dark.svg)MCP](/topic/mcp)[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#AI & Agents](/topic/ai)[#WebDev](/topic/webdev)

# Open Props - an Open Source CSS Props Library

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/ecbf04952f2de4fd0d43cbd39f0905561e5fbe1a-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=hW-itQMKyiU&list=UUnKZ8gEb78zXKMi1ns-IQ2g)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Adam Argyle](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d099a598f8869fd68695d3ca430da0c6cf6519c9-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Adam Argyle](/guest/adam-argyle)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/34dNMpOmT5jtHbecQQz2ND)[Apple](https://podcasts.apple.com/us/podcast/2-6-open-props-an-open-source-css-props-library/id1491655542?i=1000550585269)[YouTube](https://www.youtube.com/watch?v=hW-itQMKyiU&list=PLUKgAjyG9B0ZhUEXp9eVa7h4L__FDW3uV)[Subscribe on YouTube (62.5K / 100K) →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Pocket Casts](https://pca.st/episode/d0e2206e-b806-406e-af13-ffd59d2a5fa8)[Castbox](https://castbox.fm/episode/id2508485-id466640875)[Castro](https://castro.fm/episode/xvGGRq)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)

## Episode Sponsors.

[![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/e355e7e90e37726637596011069c154ae515da9f-1200x675.png?w=1200&q=82&fit=max&auto=format)Partner & Sponsor

### Builder.io

Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whole-team autonomy with a platform that is developer approved.](https://www.builder.io/?utm_source=codingcatdev)

**Open Props - an Open Source CSS Props Library ** is a CodingCat.dev podcast episode featuring Adam Argyle alongside Alex Patterson and Brittney Postma focused on CSS, Builder.io, Tailwind CSS. We sit down to learn more about Adam Argyle and his new project Open Props. Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=hW-itQMKyiU) or explore the architectural notes, chapters, and official documentation links below.

## Questions

- Tell us a little about what Open Props is.
- What made you want to create an open source library using css props?
- What is the thing that would make a developer want to go out and start using open props right now?
- Normalize vs Reset and CSS Remedy, what's the difference and why use normalize in open props?
- Demo open props - [https://stackblitz.com/edit/jit-open-props?file=style.css](https://stackblitz.com/edit/jit-open-props?file=style.css)
- Why do you think there is so much hate for CSS? Is it a lack of understanding, frustration, or lack of instruction?

## Additional Links

- [https://twitter.com/argyleink/status/1466880026721206274?s=20](https://twitter.com/argyleink/status/1466880026721206274?s=20)
- [https://stackblitz.com/edit/jit-open-props-qavrvr?file=index.css](https://stackblitz.com/edit/jit-open-props-qavrvr?file=index.css)

## Technical Overview: Open Props - an Open Source CSS Props Library

2.6 - Open Props - an Open Source CSS Props Library: We sit down to learn more about Adam Argyle and his new project Open Props. https://codingcat.dev/podcast/2-6-open-props-an-open-source-css-props-library Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whol

When applying the concepts from **Open Props - an Open Source CSS Props Library**  in a production codebase, teams working with CSS, Builder.io, Tailwind CSS, Design should align their implementation with the [**MDN CSS Reference**](https://developer.mozilla.org/en-US/docs/Web/CSS) (Modern layout, Grid, Flexbox, animations, and cascade layers). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.

### Key Engineering Takeaways

- **Core Topic Focus: ** Practical strategies for CSS, Builder.io, Tailwind CSS, Design covered in "Open Props - an Open Source CSS Props Library" (We sit down to learn more about Adam Argyle and his new project Open Props.).
- **Production Implementation: ** Combine the architectural patterns demonstrated in this podcast with the official [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS) for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: ** Follow along with the live coding demos and discussion on [YouTube (Open Props - an Open Source CSS Props Library)](https://www.youtube.com/watch?v=hW-itQMKyiU) and subscribe to [CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly deep dives.

## Video Chapters & Timestamps

Jump directly to any segment of [**Open Props - an Open Source CSS Props Library**](https://www.youtube.com/watch?v=hW-itQMKyiU) on YouTube using the timestamped chapters below:

- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): PM (EST)
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Intro
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Adam Argyle Background
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Open Props Background
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Are you a designer or a developer first?
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Looking into Open Props
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Bringing designs to life
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Differences between Open Props and Tailwind CSS
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Use CSS properties anywhere
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Design System
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Single Keyframes
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Atomic Keyframe Animations
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Open Props Demo
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): jitProps
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Superpowers for CSS
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Normalize vs reset
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Why do people hate CSS so much?
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Last thoughts, clip paths
- [**00:00**](https://www.youtube.com/watch?v=hW-itQMKyiU&t=0s): Purrfect Picks

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Open Props - an Open Source CSS Props Library Full Video](https://www.youtube.com/watch?v=hW-itQMKyiU) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **builder.io: ** [https://Builder.io](https://builder.io/?utm_source=codingcatdev)
- **Show Pick: ** [Qwik and Partytown Live (picked by Alex Patterson)](https://www.builder.io/blog/how-we-cut-99-percent-js-with-qwik-and-partytown?utm_source=codingcatdev)
- **Show Pick: ** [Spider Man Far From Home (picked by Alex Patterson)](https://en.wikipedia.org/wiki/Spider-Man:_Far_From_Home)
- **Show Pick: ** [The CSS Podcast (picked by Brittney Postma)](https://thecsspodcast.libsyn.com/)
- **Show Pick: ** [Swyx's Sitdown - Adam Argyle: Complexity Cliffs, DX, and the Disruption of Web Design (picked by Brittney Postma)](https://www.youtube.com/watch?v=xEyJ6LY7DKI)
- **Show Pick: ** [Learn CSS on web.dev (picked by Adam Argyle)](https://web.dev/learnCSS)
- **Show Pick: ** [GUI Challenges (picked by Adam Argyle)](https://a.nerdy.dev/gui-challenges)
- [**Adam Argyle Guest Profile & Episodes on CodingCat.dev**](/guest/adam-argyle)
- [**Adam Argyle on GitHub**](https://github.com/argyleink)
- [**Episode Sponsor: Builder.io**](https://www.builder.io/?utm_source=codingcatdev)
- [**MDN CSS Reference:**](https://developer.mozilla.org/en-US/docs/Web/CSS) Modern layout, Grid, Flexbox, animations, and cascade layers
- [**Builder.io Developer Documentation:**](https://www.builder.io/c/docs/developers?utm_source=codingcatdev) Visual headless CMS, SDKs, and design-to-code workflows
- [**Tailwind CSS Documentation:**](https://tailwindcss.com/docs) Utility-first styling, design tokens, and responsive workflows

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Open Source Svelte Magic: Melting Minds through Melt UI!**](/podcast/cwcc-1-2-meltui): Thomas teaches Brittney and Alex how to use Melt and how Runes can be used to improve builders.
- [**Adam Argyle Presents CSS Features for 2023 and beyond!**](/podcast/3-14-adam-argyle-presents-css-features-for-2023-and-beyond): Adam helps reveal some CSS features that will elevate your code and help you push forward.
- [**Creating and Using Kendo UI**](/podcast/2-24-making-progress-with-kendo-ui): We have Alyssa Nicoll and Kathryn Grayson from Progress teach us all about KendoUI and how they maintain this frontend library.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Open Props - an Open Source CSS Props Library?

We sit down to learn more about Adam Argyle and his new project Open Props. 2.6 - Open Props - an Open Source CSS Props Library: We sit down to learn more about Adam Argyle and his new project Open Props. https://codingcat.dev/podcast/2-6-open-props-an-open-source-css-props-library Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whol Throughout this podcast, Adam Argyle breaks down real-world implementation details for CSS, Builder.io, Tailwind CSS so developers can apply these patterns directly in production.

### How do you implement CSS best practices in production?

When adopting CSS and Builder.io in a production stack, start by validating your configuration against the [**MDN CSS Reference**](https://developer.mozilla.org/en-US/docs/Web/CSS) (Modern layout, Grid, Flexbox, animations, and cascade layers). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Open Props - an Open Source CSS Props Library walkthrough and find related code resources?

You can watch the complete video session for [**Open Props - an Open Source CSS Props Library**](https://www.youtube.com/watch?v=hW-itQMKyiU) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into CSS, check out our related guide: [**Open Source Svelte Magic: Melting Minds through Melt UI!**](/podcast/cwcc-1-2-meltui).

## ✏️ Episode Summary

2.6 - Open Props - an Open Source CSS Props Library: We sit down to learn more about Adam Argyle and his new project Open Props.

https://codingcat.dev/podcast/2-6-open-props-an-open-source-css-props-library

Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whol

✏️ Visual Architecture Diagram

## how this episode connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Open Props - an Open Source CSS Props Library✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Open Props - an Open Source CSS Props Library: start with Adam Argyle, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

## episode picks.

### 🐾 Adam Argyle

- [Learn CSS on web.dev](https://web.dev/learnCSS)
- [GUI Challenges](https://a.nerdy.dev/gui-challenges)

### 🐾 Alex Patterson

- [Qwik and Partytown Live](https://www.builder.io/blog/how-we-cut-99-percent-js-with-qwik-and-partytown?utm_source=codingcatdev)
- [Spider Man Far From Home](https://en.wikipedia.org/wiki/Spider-Man:_Far_From_Home)

### 🐾 Brittney Postma

- [The CSS Podcast](https://thecsspodcast.libsyn.com/)
- [Swyx's Sitdown - Adam Argyle: Complexity Cliffs, DX, and the Disruption of Web Design](https://www.youtube.com/watch?v=xEyJ6LY7DKI)

## related episodes.

[All Episodes→](/podcasts)[![The Odin Project 3: Intermediate HTML, Modern Forms & CSS Grid Architecture](https://cdn.sanity.io/images/hfh83o0w/production/e81cb7bdd395cf1351722a2e6357da97cc3c1ed6-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-intermediate-html-and-css-grid)November 4, 2026[![](/logos/tags/css-symbol-light.svg)![](/logos/tags/css-symbol-dark.svg)CSS](/topic/css)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[#Design](/topic/design)[+1](/course/odin-intermediate-html-and-css-grid)

### [The Odin Project 3: Intermediate HTML, Modern Forms & CSS Grid Architecture](/course/odin-intermediate-html-and-css-grid)

Master 2D CSS Grid layouts, Subgrid, CSS Custom Properties, fluid clamp() typography, container queries, and zero-JS form validation with :user-valid.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents](https://cdn.sanity.io/images/hfh83o0w/production/d2e98ad8352ec6a3edba735e8fbf8cda6151201f-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/hyperframes-html-to-video-agents)November 4, 2026[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[#AI & Agents](/topic/ai)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)

### [HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents](/course/hyperframes-html-to-video-agents)

Learn how HeyGen's open-source HyperFrames compiler turns self-contained HTML, CSS, and Canvas compositions into deterministic 1080p60 videos built by AI agents.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)