Open Props CSS Framework (An Introduction)

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: github.com/coding-in-public/o...
- Open Props: open-props.style/
- ViteJS: vitejs.dev/
- CSS Var complete VS Code extension: marketplace.visualstudio.com/...
- PostCSS: github.com/postcss/postcss
- Open Props JIT: github.com/GoogleChromeLabs/p...
---------------------------------------
📹 Related Videos 📹
- Understanding Clamp(): • Dynamic Font Size CSS ...
---------------------------------------
⏲️ 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: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned

[@maikolhernandez9176]

I don't understand why your videos are so under rated. They are so simple, informative and beautiful. You are one of the greatest teachers that y ever met. Thank you for tanking the time to make these videos and share your knowledge.

[@CodinginPublic]

That's very kind, @Maikol Hernandez! Just trying enjoy myself and be a help. Numbers are just numbers. It's more about the people that we can all help. And if I can be one of those for you, great! 🙌

[@nyashachiroro2531]

This is one of my favorite coding channels. I agree with you 💯. I hope he gets all the success he wants.

[@nyashachiroro2531]

@@CodinginPublic This why you will succeed. You have the mindset and heart for it.

[@CodinginPublic]

Thanks for the kind words. Glad you've enjoyed the channel! Can’t believe I'm 6k+!

[@princekha4540]

Bro , I am new to web development . I really enjoy your videos. It is fun as well as informative. Keep producing such high quality content . Lots of love and support ❤️👏

[@nitinsoni9956]

I guess once you have a clear understanding of CSS than OpenProps makes much sense with all the custom variables especially gradients, box shadow and animations. You an amazing instructor and as you mentioned Opens props provides a good design system to the developers.

[@101stDay]

As mentioned, you deserve A LOT more recognition for your *excellent* videos

[@CodinginPublic]

That’s very kind. Thanks for saying something!

[@lvekua]

I don't know how you do it but unlike other tutorials your tutorials stick to me like a glue. Thank you for Awesome content!❤

[@CodinginPublic]

Glad they're a help! We all learn better from some than others and I'm glad to be one in the "better" category for you. Thanks for saying something!

[@FredySandoval_123]

Your video is easy for beginners to understand. Kudos

[@CodinginPublic]

So glad to hear it! Thanks for saying something!

[@nyashachiroro2531]

This channel deserves an award. Thank you so much.

[@CodinginPublic]

🙏 That's very kind. Glad you've enjoyed it!

[@SamadKanton]

@@CodinginPublic certainly

[@avinashmurmu9070]

After trying all the different solutions for css, what I have found is that SASS is where everyone finally falls into.

[@CodinginPublic]

For larger or team projects, I agree that sass is a natural fit and almost a necessity. For smaller projects or solo projects, other options start to open up!

[@Rob-cq1nf]

Keep up the good work! Your content and quality is really really good 👌

[@CodinginPublic]

Thanks for your kind words! 🙏

[@naranyala_dev]

Wow, very huge thanks. I'm come back for the Open Props and another modern tools.

[@CodinginPublic]

You’re welcome! I love Open Props!

[@pablorey9203]

Great video!! Thanks! Liked, subscribed and notification activated!

[@CodinginPublic]

Awesome, thank you!

[@cadamsdev]

Awesome video, thanks! 🙂

[@CodinginPublic]

You’re welcome! Glad it was a help! It’s such a nice framework :)

[@SamadKanton]

thanks, will check it out.

[@CodinginPublic]

You’re welcome!

[@korngsamnang]

Great bro !! i'm a new subscriber.I will check out all your videos next time soon.but now May i ask you about your vscode's set up and about platform that you deploy your every front-end projects?

[@CodinginPublic]

Thanks for the sub! Sure thing. I just did this recent video on my theme/font here: kzbin.info/www/bejne/a6aohYeOrbudbtU I'm mostly using Netlify these days for deploying!

[@Grovento]

Great work! Thanks. On your experience, what is better for a personal project: tailwind or open props? I haven't been able to make my mind...

[@CodinginPublic]

Glad you enjoyed it! Personally, if I was going to be regularly working in the project, I’d use Open Props. If I was going to leave the project and then come back after a few months, I’d use Tailwind as it’s easier to quickly see how to alter the project in the future, even if it’s not quite as flexible. Hope that helps!

[@jugibur2117]

Thanks for your introduction! I'm still looking for new ways to speed up development. But I think SASS continues to have greater advantages for me here, for example because of the functions, the "extend" and serveral partial files for better structuring. Defined but unused variables are also not taken into the code, with OP I need after again a PostCSS plugin. I find writing all these sometimes long custom properties a bit annoying and I also find that the framework tries to do too much. For example, why so many pre-made gradients? TailwindCSS on the other hand also has its disadvantages, but for that I can really work faster there, I don't need class names, the commands are shorter and the JIT compiler is built right in.

[@CodinginPublic]

Sure thing! Glad it was a help. IMO, Open Props works best if you like to write your own CSS and just want to pick and choose a few pre-built props to incorporate into your styles. I mostly pull them in, renaming them to my own custom CSS variables, and then just use them for things like spacing, font sizes, etc. So it's more of an addition to CSS and not really a replacement for writing your own CSS (like Tailwind). Hopefully that makes sense? But definitely not for everyone. If you want a full system for CSS, it's hard to beat Tailwind. If you want to write your own CSS, it's hard to resist sprinkling in some Open Props to help you quickly get up to speed, IMO.

[@humbulanimunyai6320]

coding in public your the best

[@CodinginPublic]

🙏

[@pioleonardo]

what font did you use in your vscode editor? I love it!

[@CodinginPublic]

I use Cascadia Code (free font by microsoft). More info here: kzbin.info/www/bejne/a6aohYeOrbudbtU

[@pioleonardo]

@@CodinginPublic thanks a lot. I highly appreciate it

[@simio8809]

The homepage of Open Props doesn't have the config for CSS Var Complete anymore 🤔😐

[@CodinginPublic]

Hey! Just checked. It’s under the autocomplete header (expand VSCode). Hope that helps!

[@simio8809]

@@CodinginPublic Oh, lol. My bad, couldn't find it. Thanks!

[@CodinginPublic]

Lol No worries 😉

[@mdkawsarislamyeasin4040]

This seems to be interesting but if we need to set class then style in the CSS file, this might be not much helpful for us! Cause we can use our CSS Why need a framework like this !

[@CodinginPublic]

It’s not for everyone, but if you like writing your own CSS, I think it’s a winner!

[@mdkawsarislamyeasin4040]

@@CodinginPublic yeah! But It's good also ! I tried after watching Your tutorials, pretty good 😌 Thanks

[@HimasRafeek]

Turtorial on buttercake css framework?

[@CodinginPublic]

Never heard of it! I’ll check it out!

[@mdkawsarislamyeasin4040]

That's great I use postcss right now i can also use this as a postcss plugging 🥱 Thanks 🤗

[@CodinginPublic]

👏