Open Props Review: The CSS Variable Framework

Variable Frameworks

One of the ways that some CSS frameworks are trying to make things easier is by giving you a set of predefined variables that can help you create a consistent look for your sites.

In CSS variables are known as custom properties. So this framework is called Open Props because they offer some preset variables that you can use. By using the variables, you're creating a design language that is consistent across your different components.

How it Works

If you look, for example, at how colors are put together, the variables use a color name and then a number from zero to nine. The same structure exists, for example, when you get to typography and then you specify things like font size or font weight and use the same type of numbers. The naming conventions for the variables are pretty easy to follow. Once you start working with the variables, you'll have an idea of how all the variables work.

Also, it's incrementally adoptable, which means that you can grab all the props, just the props that you need, or the props in JavaScript mode. You can also customize the props yourself. If you want to have a different name for the variables using JavaScript or the command line.

Amazing Docs

The documentation is fantastic for this. It has a very cool little language for creating most of the things that you're going to need. You can see media queries, Z index, also a lot of nice built in gradients so you can scroll and see all the gradients here. So it feels like a really fairly complete framework already and you can see that there's going to be a lot of stuff that's being added since I'm really excited to see this framework sort of growing and it's part of how a lot of newer frameworks are trying to make your lives a lot easier.