In this video, I'll give you an overview of Open Props, a new kind of CSS framework built entirely on CSS custom properties (i.e., CSS variables). I’ll cover three questions:
1. What is Open Props?
2. Why would you choose it over Tailwind, Bootstrap, and other frameworks?
3. How to use Open Props.
I’ll show you how to install the just-in-time plugin available in PostCSS so you only build the props you use. We’ll use ViteJS as the build tool to quickly get the project up and show you how to configure the CSS Var complete plugin so you get auto-complete suggestions in VSCode.
🔗 Key Links 🔗
- GitHub: https://github.com/coding-in-public/open-props-introduction
- Open Props: https://open-props.style/
- ViteJS: https://vitejs.dev/
- CSS Var complete VS Code extension: https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar
- PostCSS: https://github.com/postcss/postcss
- Open Props JIT: https://github.com/GoogleChromeLabs/postcss-jit-props
---------------------------------------
📹 Related Videos 📹
- Understanding Clamp(): https://youtu.be/Moely7aPYGE
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
0:29 What is Open Props?
3:04 Why choose Open Props?
4:05 How to install and use Open Props
---------------------------------------
🌐 Connect With Me 🌐
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog
- Twitter: https://twitter.com/cpenned
