Open Props Review: The CSS Variable Framework
One of the ways that some CSS frameworks are trying to make things easier is by giving you a set of pre-defined variables that can help you create a consistent look for your sites. Open Props offers a modular and extensible way to create designs based on these variables
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.
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.
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.