Open Props: A CSS Framework for the Modern Web

Open Props: A CSS Framework for the Modern Web

https://2023.stateofcss.com/en-US/css-frameworks/

Open Props is a relatively new CSS framework, but already tops the interest and retention charts of the latest state of CSS survey, which is always a good indicator of what people enjoy working with.

It is a low-level framework, built entirely on CSS variables which means, it is highly customizable and can be adapted to fit any design system. Additionally, it uses just-in-time compilation, to ensure that only the CSS variables that are used in your project are actually generated. This can help to improve the performance of our application.

Let’s explore this library together.

Installation

First we need to install the library as a dependency

npm i open-props

And update style.scss with the following import

@import "open-props/style";

Now we can start using all the available variables and utilities.

Available Utilities

Let’s start with the colours.

All of the above are available and are named with the following pattern:

\--gray-{0-12}
\--stone-{0-12}
\--red-{0-12}
\--pink-{0-12}
\--purple-{0-12}
\--violet-{0-12}
\--indigo-{0-12}
\--blue-{0-12}
\--cyan-{0-12}
\--teal-{0-12}
\--green-{0-12}
\--lime-{0-12}
\--yellow-{0-12}
\--orange-{0-12}
\--choco-{0-12}
\--brown-{0-12}
\--sand-{0-12}
\--camo-{0-12}
\--jungle-{0-12}

Low numbers are light shades while high are dark.

For example, in order to use a light gray as the background and a dark gray as the text color all we need to do is:

body {
  background-color: var(--gray-1);
  color: var(--gray-10);
}

Of course, setting aliases or defining our own colours is encouraged.

html {
  --brand: var(--orange-6);

  --text-1: var(--gray-8);
  --text-2: var(--gray-7);

  --surface-1: var(--gray-0);
  --surface-2: #23b7d9;
}

A more interesting use case are gradients. There are 30 predefined following the pattern --gradient-{0-30}

Similarly, shadows can be defined with --shadow-{1-6} or --inner-shadow-{0-4}

A powerful typography system can be built around all the available typography variables

// Available variables
\--font-size-{00-8}
\--font-size-fluid-{0-3}
\--font-weight-{1-9}
\--font-letterspacing-{0-7}
\--font-lineheight-{00-5}

// Usage example
.hero {
  line-height: var(--font-lineheight-1);
  font-size: var(--font-size-fluid-3);
  font-weight: var(--font-weight-9);
  font-family: var(--font-sans);
}

Another essential utility to create professional websites with correct visual rhythm are predefined sizes.

And of course, this doesn’t end here. A lot of utilities are provided like borders, masks, animations, media queries, z-indexes and more so you will rarely have to define something yourself.

Explore all the available utilities in the official documentation.

Demos