Supercharge your CSS with Open Props

🔥 Check out Open Props: open-props.style/
✅ If you haven't used Custom Properties before, start here: • CSS Custom Properties
🔗 Links
✅ More on min(): • 3 modern CSS technique...
✅ More on where(): • :where() - Remove the ...
⌚ Timestamps
00:00 - Introduction
00:52 - What is Open Props?
01:50 - Getting started with Open Props
07:26 - What it doesn't have what you need
10:31 - Normalize
12:11 - light and dark mode
14:42 - Customizing the properties
17:14 - Open Props Typography
18:53 - Other cool things
19:20 - Media Queries
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@zachjensz]

Huge props to Adam Argyle for his props!

[@AdamArgyleInk]

thanks!

[@serveshchaturvedi2034]

@@AdamArgyleInk You are legendary. Thanks for everything ❤️

[@brentgreeff1115]

@@AdamArgyleInk - Just found this. - I prefer semantic naming of classes - ie describe the content / purpose, but with normal css frameworks - we have all these visual css labels making my html ( slim ) dirty. - hope its going well.

[@SoldierXfreedom]

This is basically a balance between tailwind and writing your own css, GAME CHANGER. I think with all things the answer lies in the middle, this is the perfect middle that allows you to separate your css from html, but also has a bunch of prebuilt assets that can also be customized to your liking

[@markojozic3944]

Open-Props sounds like a nice foundation for setting up your own design-system

[@victorstone3720]

I love it when developers like you make the effort to introduce new technologies to us, I appreciate the effort thank you so much❤❤

[@bertlemoi431]

Damn... You learned to say "Specificity" correct consistently. Well Done, Kevin! Jokes aside, i gotta test this lib out for my next project. Thanks for teaching the cool little things of CSS that made me the CSS guy at my job. Keep it up!

[@khaldounal-nuaimi3594]

I have been using open props since my last project, It is a game changer imo. Unlike bootstrap and tailwind, I can clean html and structured css with predefined variables. I encourage everyone to try it asap!

[@user-mx1ek4sl2m]

You are missing the point of tailwind. They are not comparable. Different things completely.

[@khaldounal-nuaimi3594]

@@user-mx1ek4sl2m if i had a $ every time someone told me that I am missing the point of Tailwind, I would be a billionaire at this point. Do you all have this reply somewhere in your notes and paste it every time someone says something bad about tailwind?

[@user-mx1ek4sl2m]

@Khaldoun Al-nuaimi maybe you do not know what tailwind use case is. Sounds like a you problem.

[@bobmonsour]

I appreciate how you can jumpstart our understanding of something like this. I had just recently started using custom properties and was trying to come up with a good way to organize them. This helps immensely and since I’m still pretty early in my project, I’m going to take the plunge and give Open Props a spin. Thank you Kevin and Adam!

[@MrMairu555]

Thanks to your videos, I've just started getting into custom CSS variables... and VS Code. Great tutorials, and so easy to follow.

[@dlongodesign7026]

I can’t wait to use it. Thanks for exploring it with us!

[@itsPenguinBoy]

It's so good that there is no need to override! Taking over a bootstrap based project can be such a pain... I have a feeling that inheriting an open props project would be so much easier.

[@erz3030]

Awesome content as always Kevin! I love learning random insider tips/techs I haven't found yet.

[@binodnepali]

Thankyou Kevin for making video on open-props. I was searching for it in youtube and articles about it. You read my mind 😊. I am waiting for JIT part.

[@bobdinitto]

This looks like a great way to accelerate project development! It seems I'm just beginning to appreciate the power of custom properties and the different ways we can use them. Thanks for taking the time to demonstrate it.

[@Software.Engineer]

That's great, saves me time writing my own colours variables and the dark mode variants of them my self, how useful! SPEEEEEEEED!

[@pioleonardo]

This is impressive Kevin. I really love the way you demonstrate how things work and teach us how to do it. Kudos Kevin!

[@kylevandeusen]

This is pretty awesome! Would love to see you do more with this Kevin!

[@Rocadamis]

Love this! Thanks for introducing me to this.

[@dipenchavda6988]

This is very cool , what got me interested was box shadows because I suck at that.

[@NathG.1.4.]

Ncie tutorial and demonstration on how to use open props. First time seeing or hearing about it and I feel it has a huge advantage of offering you the autonomy over your css classes. Thank you as always for your amazing content!

[@DanteMishima]

I'm going to absolutely try this out in my next project. Thanks Kevin, thanks Adam

[@rayollll]

Hi Kevin. I just heard Open Props mentioned on another video but couldn't get a good idea of how it works until I saw that you'd already made a video and Voilà! Clear as a bell. You have the best way of explaining things. I really appreciate your channel, Thanks!

[@saxmimmo]

Everytime I watch Kevin's videos I learn something new... I completely missed the padding/margin-block props... thumbs-up!

[@shankargurung1335]

Thank you so much sir for sharing such a valuable tutorial.

[@carberi50]

thanks for sharing such an amazing project.

[@GarmrNL]

I used Bootstrap for a while but after a while I noticed I was writing classes to circumvent Bootstrap. I’ve been happily using SCSS for a while now and I found your channel yesterday and subscribed right away :-) I’ve been binging your video’s and learned so much - wanted to say you’re a great teacher and thank you so much :-)

[@javascriptes]

GREAT STUFF KEVIN!!! THANKS AGAIN!!!

[@robertsilver1296]

Fantastic video, thank you!

[@jugibur2117]

Thanks for your introduction Kevin, I have never heard of open-props before. I'm currently still considering switching to Tailwind, dropping SASS and just using some more PostCSS plugins. At least it's worth thinking about whether custom props might be an effective approach too (for basic theming).

[@sarahwbs]

This looks really cool, I'm definitely going to try this out the next chance I get.

[@bulletproofcode5733]

Wow Kevin, I love your work!

[@Technoph1le]

Perfect, make my life much easier. Thank you, Kevin

[@justinr9699]

You’re the man, Kevin!!!

[@annaatitech5908]

What I really like about this one is that, You use it inside the CSS unlike Bootstrap and mostly Tailwind, that's great great approach grom the guy. This really looks game changer, from my POV

[@iamTazim9]

Just awesome!

[@ronendavid8842]

I love you Kevin. ty very much for all the tips, triks and the great content ❤💯

[@Dajmanable]

You are AWESOME!! :D

[@QualityScrub]

Wow, I think I sold on this plus Eleventy now for my next site change. Great video!

[@Morrile1]

WOW, i'm speechless!

[@amai_zing]

I have something I'm working on right now that I think Open Props will fit nicely into - thanks

[@veritatas678]

Really cool video.Would be nice to see how you setup Postcss with this like you mentioned

[@niner8275]

In our recent project, we have a very similar approach. For example, we have a palette with named colors like "orange-4" or "blue-3" and a "semantic layer" that binds all colors to their usage. The good thing is that everything looks automatically the way it should if you switch themes. So if the green is not bright enough, change it in the "palette.css" And if the primary color shouldn't be green, change it in the "semantic-palette.css" But be aware, it is sometimes VERY difficult to convince a designer or even peer programmers about the immense positive impact this has and how much this makes life easier and keeps stuff consistent. Because most people want "quick wins" like just copy the #ca93ee from the design file and paste it into the CSS but just don't see the benefit of creating all this definitions.

[@ev721]

I used Bootstrap extensively, grew frustrated and moved away from it and frameworks in general. This looks interesting though, will certainly check it out. Thanks Kevin!

[@Xamy-]

I might be using this

[@Fachuro]

Tailwind never got me hyped because it was just puking classes into the markup like bootstrap did before - styled-components was a much better alternative. This however is using CSS the way CSS SHOULD be used, I love it already... Will start incorporating into my projects...

[@bennadel]

Oh cool, I had no idea you could simulate Light / Dark modes in the various dev tools. That's a super helpful aside from the pain video.

[@56polobzh]

Crazy!

[@jenstornell]

Interesting. I like min() to the container. I use two divs which is really not needed anymore. I also like the fluid types. I miss them in Tailwind.

[@kaustubhdwivedi1729]

Man you need to have 1M followers seriously!

[@technikhil314]

Yeah Adam is just awesome.

[@simply_the_dev7588]

Thanks for this lesson. I just like Tailwind better. But if I ever see this in another project I know how to read it. Currently using tailwind as a styled component mix in a Nextjs project. Kinda cool.

[@yanmoenaing8267]

I'm gonna use open-props for my portfolio.

[@SladeHxH]

I’m huge fan of you Kevin can you please teach us how to work with sass and show us all ultimate tricks to make life easy with css ?

[@676005ga]

Every time I watch through the video. I naturally read awesome with Kevin🤣

[@LiamThom]

I can't stop thinking this is a convoluted way of making your web site look like the other people's sites that use this system.

[@mimosveta]

in regards to property-block, and property-inline, they aren't necessarily top and bottom, or left and right, they are that in western world. For example, if you were using Japanese text orientation, writing text top to bottom, then block would be left and right, and inline top and bottom. I guess, block is in the direction of paragraphs, and inline in the direction of letters. equally, if you write arabic, property-inline-start would be the right side, while same thingin english or russian, or whatever european, would be left side. so this can be useful to make sites that have same design idea independent of the language, like if you want a bold border where the text starts, you can achieve it with this. basically, if you only do english language sites, -block will always be top and botton, and inline left and right, but technically, they're not interchangeable. in fringe cases

[@talhaibnemahmud]

This is very interesting for personal or small project. The only thing missing is a VS Code Extension

[@Luggruff]

But you can still use autocomplete in VS Code with it. Info under the CDN on their website

[@talhaibnemahmud]

@@Luggruff Got that. But I'm not sure if that's only useful when using with NPM

[@universecode1101]

Light and dark mode ✅ Thanks Kevin, interesting

[@QuinCarter]

So if I wanted to use this in constructible style sheets in a project using open web components like Lit Element, I don't see Lit friendly modules to use with Web Components (lit requires css`` exported, otherwise it won't import properly, and the openprops JS is just an export default). That's about the only thing I see you can't really do with it. But constructible style sheets are still evolving in that spec. Great vid man. I'm going to use this in some personal projects to try it out

[@kiwicrafter]

I have been using this for a few years now, not Open Props buy I have made my own file, a css file called "roots.css". As all this Open Props, is a basic root style sheet. It works very well for me, like fonts, I have font-size-x:1em:,font-size-xx:1.25em;, font-size-xl:3em, etc etc

[@BenjaminAster]

I don't quite get the point of this "framework". Why would you want to load a giant CSS file just to use a few custom properties that you can easily make yourself? And for the dark theme: If you set "color-scheme: dark light;" on your :root, a dark theme gets applied to your document automatically. Since January 11, color-scheme is now even supported in Firefox (version 96). What I always do is I set transparent grays like #8883 as the background-color of an element that should have a gray-ish background-color. That way, the element is dark gray in dark mode and light gray in light mode.

[@craigburton4447]

Have to say I agree, Apart from the box shadow, I don't get how this saves any time at all and you can just write a prop for that once and reuse it.

[@huaweitrainingsafrica3742]

Finally something for us non-frameworkers...Thanks Kevin

[@fpigeonjr]

🤍 thanks for the gentle intro to Open Props, looks like a fun library to work in.

[@briansnider7391]

This approach appears to offer the kind of flexibility and convenience I’d really like to have!

[@clevermissfox]

I’m very curious about using existing utility classes and importing the library. I’m going to be experimenting to see what I think….

[@ElPolemista]

Is there any figma plugin to get the props using it?

[@sergejstojanovic2518]

Hey, I know auto-complete software doesn't have anything to do with CSS, but I still wanted to know Your opinion on them. So what do You think about software like TabNine or GitHub Copilot, good or bad stuff? Can they be useful tools if used in some moderate amount. For example if you use auto-complete software to finish you line, that's good (in my opinion), but if you try to "code" an entire function with them is it still a tool?

[@dandange]

Hi Kevin, is it possible to incorporate this into an existing Sass project, say you've got a design system you've developed but maybe just want to use the colours from Open Props?

[@blue-moon-novelas]

This open props looks really handy. I want to ask you something... it can be used with gastby and tailwindcss?

[@fai6702]

huh... this is cool

[@TheMartaDias]

Hey Kevin. Do you use tailing css ? If so How often? (And after your sass course will we expect a tailwind css course :) )

[@KevinPowell]

I get why people like Tailwind, but it's not for me :) - I much prefer this approach, if I'm going to go down that type of route.

[@eccenux]

For non-personal projects I think only two useful things is probably --font-sans and --shadow*. But in a real project you would probably want to define it for yourself anyway. Why? Someone behind you comes in and says: "Ehm... Could you just make this padding smaller 2px"... "Ehm... Could you change this font to Roboto..." etc 😉

[@Jxerot]

Awesome dive in Open props, thanks! Perfect for a quick dev and testing out code bases :) And now I [need] to implement dark/light mode in my next project! why does margin-block and padding-block exists? what is the purpose? why is it better then margin: ** ** ** **;

[@Jxerot]

Or is it because "margin: 0 0 var(--size-9) 0;" is not clean/nice?

[@edwardgray6167]

@@Jxerot same for the padding versions.

[@Jxerot]

@@edwardgray6167 what do you mean? You've got the same question about the padding versions?

[@zip753]

Check Kevin's video on logical properties where he showcases exactly this difference :)

[@Jxerot]

@@zip753 think i already saw that but i will rewatch thnx maybe ill find my anwser. Only because of the rtl propertie right? :( so no use in projects like this video about open props

[@annaatitech5908]

This looks like it's probably gonna reduce a lot of headaches and frustration. Writing plain CSS feels like dumb. Bootstrap over-complicates things with a bunch of other classes which you don't wanna, and for a while I thought Tailwind was the answer but then I realized that things get messy an ut of hand. I probably gonna try this one. But hey, Thanks 😊

[@mannixmd]

We should submit Adam's name for nobel peace prize for creating this :D

[@supportic]

Cool thing but I think as soon as you start building your own components or a mixture with custom properties this will be very hard to debug when the global space is poluted with those variables.

[@nishantmogha7679]

How do you use it with sass? With sass variables preferably.

[@OryginTech]

When you refreshed the page, it took about half a second for the normalized styles to be pulled into the page. Is this because it's a heavy css file? Why is it slow?

[@KevinPowell]

Probably the CDN having a bit of a delay. If I was doing this for production I'd take the time to have it all local instead. The actual file sizes are really small :)

[@OryginTech]

@@KevinPowell awesome thanks! Also your videos are amazing and has taught me a lot. Literally the reason I’m performing so well at my job. Thank you.

[@trishayable]

I wish Kevin would make JS tutorials.

[@abcabc371]

position:fixed not working when parent was aplied transform!!! What is your workaround? I need tranform on the parent to center it

[@ibanjaxed]

Please do a video using it with Oxygen Builder

[@thefaulenzer677]

I noticed that android phones simply force the colors on websites to be dark if the system darkmode is enabled (Iphones don't do this). Is there a way to make sure they can't force colors to be dark? And does the @media if preferes darkmode work on all devices with the system darkmode enabled?

[@smartdub]

Regarding CSS vars, I am jumping in an existing Vue/Vuetify webapp project where all styles variables are relying on granular CSS vars applied in each Vue components. Now I see the quantity of those CSS vars exploding to about 50 variables and more to come. I’m use to rely on Sass/scss $variables that get compiled to CSS and a few CSS vars (like Bootstrap does). Therefore minimizing the quantity of CSS vars in my project mostly for contents from text editor (TinyMCE, etc). Is there a performance issue of relying on « static CCS vars » ? I remember reading something years ago about CSS vars NOT getting saved in browser’s cache memory

[@KevinPowell]

I know Chrome used to cache unchanged custom props that were in :root {} - and I think all the browsers have put a lot of effort into optimizing them. Adam works at Google, so has a good in to talk with the browser team there, and from everything he's told me, as long as you aren't pushing a crazy number of them (10,000+), there shouldn't be any performance issues. And if you use the JIT version with PostCSS, it only keeps the variables you're using anyway, so it helps reduce any potential impact.

[@smartdub]

@@KevinPowell wow, that is « the answer » I was looking for. Thank you Kevin.

[@user-ms8ei9le7x]

Дзякую Кевiн , як заýжды моцна i цiкава распаведаеш 🎓

[@r-i-ch]

If you npm install open-props, is there an automagic way to *not* include the code that you aren't using?

[@sep1ol]

Guys can anyone help me PLEASE? I'm trying to wrap a TableRow inside a Button, but the display messes up with the table headers! Any css tip?

[@abdul1275]

padding-block - learn something new every day!

[@GlennPhilp]

@Kevin when you show these cool trends, the main question that comes to mind is it performance friendly? How much additional weight does it include to a project?

[@Anth-ony]

Considering it's only 3.4kb, and the fact that it's 2022 and we live in a high-speed internet world (For the most part), I don't think this is something that needs to be worried about.

[@GlennPhilp]

@@Anth-ony I respect your point-of-view of living in a mostly high-speed world. That should not detract from our dev responsibilities to reduce waste. When I mention waste, I am thinking about additional battery drain or data being transferred or cellular consumption. They all consume power. Then we could also talk about the total cost for the end-user. Even if someone pays for unlimited data, when are we responsible for their additional cost? Many people in the world live beyond their means. These are simply food for thought questions and ideas.

[@AdamArgyleInk]

@@GlennPhilp you can import pieces of the lib OR there's support for a plugin that only adds the props you use to your stylesheet. if you're worried about shipping props you dont use, or being minimal, there's a few ways to solve it.

[@GlennPhilp]

@@AdamArgyleInk thank you. It is good to know that props can be selectively included. That is forward thinking. Let me point out I am not against using libraries. There is validity to using open source tools in development. The goal should always be to develop smarter and to be more responsible for the environment, which should benefit the end-users.

[@helloworld2740]

Using same intro from nearly 2year but every time this intro fell like new one

[@stillready6405]

Does anyone know how Kevin switches the color scheme of his browser so quick?

[@bramduss]

Looks like good, but "open props" doesn't provide grid ?

[@YOGA47]

Send phone imu data through wifi to pc then to 3d objects green background. it will be unique With help HIMUServer and hyperimu app on phone to 3d phone mode on browser or on software

[@YOGA47]

kzbin.info/www/bejne/jpfHoZJubN55gZo

[@tajuddinkhan5206]

I don’t really see the benefit of using it. We have to think about class names and for properties we have to use custom property for each and every property. So what exactly is the benefit?

[@nathanhedglin931]

They're predefined, no looking up hex codes in the design files. They'll automatically update if their values change. Variable values could change based on light or dark mode, media queries etc.

[@angladephil]

In my opinion : - you don't have to stuff the HTML with dozens of classes, - you can mix Open Props with vanilla CSS, - maintainance or evolution seem easier with the 'var(- -)' approach. The questions are : how heavy is this library ? Does it slow the CSS, especially for small projects ?

[@breebw]

I must admit, my hatred for CSS knew no bounds. Thanks to Kevin, I am becoming more accepting of its existence.

[@MusantoSus]

Appreciate the video but why would anyone use var(--font-weight-5) instead of just 500??

[@KevinPowell]

Well, with a system like this, with predefined sizes, you won't have anything in between, so no reason to go beyond -5. I like 500, because I can have a 400, 500, and later on squeeze a 450 in there if I need to. When you have predefined sizes, those won't change, so no reason to have the 00

[@qorzzz9252]

I still think a class-driven utility framework like tailwind is better simply due to not having to worry about separate css files. Web development is slowly merging all separate paradigms into one easy place to manage. React allows developer to combine js, html, and css all into a single file - and frameworks such as NextJS or Remix take this a step further by combining what react simplified (frontend ecosystem) with the backend ecosystem. Of course, Kevin does not do much with JS so I am sure he like open-props more than tailwind because he is not leveraging the full power tailwind which you get when you componentize your html structure. He tends to stick to plain HTML/CSS and that requires him to re-write the same classes over and over and over again on elements - rather than have a component.

[@KevinPowell]

Something like this plays really nice with CSS-in-JS actually. And outside of YT I'm a fan of breaking outside of plain ol' HTML, but I like focusing on content in a more framework agnostic way, so people can take it into wherever/however they like to work. I get why people like Tailwind, but to me it's more about being able to focus on the JS side, which is totally fine. I'm more of a fan of having a bit more of a design system in place that, while relying on utility classes, has more of an emphasis on reusable components (not that you can't do that with Tailwind), but to each their own :D

[@harri00413]

So will we use SASS or openprops

[@KevinPowell]

Depends? Or both?! I'm digging this for fast prototyping, but if I was working on a large project I'd probably still go with Sass, though I use custom properties within my Sass all the time.

[@shaderbytes]

i dont get it? Are these not just css variables? - is this then just some persons setup of those variable values that you are downloading?

[@yadusolparterre]

I really have a hard time understanding what problem this solves

[@curtisw0234]

Saves you time on making up your mind over variables in guess

[@yamiteru4376]

It's just reinventing the wheel 🤷‍♂️

[@jorgedosanjos3108]

I fail to see what this is good for. If you use CSS for a while, you probably have all it provides in the exact same form or as Sass files, but just for the stuff you actually need. It is nothing but a collection of custom properties.