Build Custom Interfaces Using CSS Open Props

Learn how to make a great-looking interface (+ animation!) with ready-to-use CSS variables from Open Props. Open Props is a design system for any tooling. Adam Argyle will teach us how it works.

0:00:00 - Welcome
0:00:39 - Who is Adam Argyle?
0:02:39 - What is Open Props?
0:07:59 - Where did CSS Open Props come from?
0:09:25 - What’s going on with color?
0:18:00 - How should I get started with Open Props?
0:33:34 - CSS Modules time
0:48:18 - Building a form for a new episode
0:58:48 - Gradients
1:12:46 - Pulling it into NextJS
1:22:01 - Masks in Open Props
1:25:48 - Where can people learn more about Open Props?

Repo: https://github.com/learnwithjason/ope...

Demo: https://open-props-nextjs.netlify.app/

Links

  / argyleink  

https://lwj.dev/

https://open-props.style/

https://www.learnwithjason.dev/api/sc...

https://www.learnwithjason.dev/stylin...

https://codepen.io/argyleink/pen/RwxJ...

https://codepen.io/argyleink/pen/gOXbvjj

  / discord  

  / openprops  

https://stackblitz.com/edit/jit-open-...

https://www.learnwithjason.dev/schedule

Watch future episodes live at   / jlengstorf  

This episode was sponsored by:
Netlify (https://lwj.dev/netlify)
Nx (https://lwj.dev/nx)
Backlight (https://lwj.dev/backlight)

Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/)

Credits:

Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...)
Source: http://incompetech.com/music/royalty-...
Artist: http://incompetech.com/

Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...)
Artist: http://audionautix.com/

Additional sound effects obtained from https://www.zapsplat.com