CDN
No installation required. View all.
CSS
Bundles
/* index.css */
@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
<!-- index.html -->
<link rel="stylesheet" href="https://unpkg.com/open-props"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
// index.js
import 'https://unpkg.com/open-props';
import 'https://unpkg.com/open-props/normalize.min.css';
Individual packs
/* index.css */
@import "https://unpkg.com/open-props/colors.min.css";
@import "https://unpkg.com/open-props/colors-hsl.min.css";
@import "https://unpkg.com/open-props/indigo.min.css";
@import "https://unpkg.com/open-props/indigo-hsl.min.css";
@import "https://unpkg.com/open-props/easings.min.css";
@import "https://unpkg.com/open-props/animations.min.css";
@import "https://unpkg.com/open-props/sizes.min.css";
@import "https://unpkg.com/open-props/gradients.min.css";
/* etc */
PostCSS
Entry Points
/* index.pcss */
@import "https://unpkg.com/open-props/src/index.css";
@import "https://unpkg.com/open-props/src/extra/normalize.css";
Individual packs
/* index.pcss */
@import "https://unpkg.com/open-props/src/props.colors.css";
@import "https://unpkg.com/open-props/src/props.colors-hsl.css";
@import "https://unpkg.com/open-props/src/props.indigo.css";
@import "https://unpkg.com/open-props/src/props.indigo-hsl.css";
@import "https://unpkg.com/open-props/src/props.easings.css";
@import "https://unpkg.com/open-props/src/props.animations.css";
@import "https://unpkg.com/open-props/src/props.sizes.css";
@import "https://unpkg.com/open-props/src/props.gradients.css";
/* etc */
Design Tokens
Not all props can be represented as a design token.
Figma Tokens
Community created setup instructions.
https://unpkg.com/open-props/open-props.figma-tokens.json
https://unpkg.com/open-props/open-props.figma-tokens.sync.json
NPM
npm install open-propsCSS
Bundles
/* index.css */
@import "open-props/style";
@import "open-props/normalize";
// index.js loading CSS files
import 'open-props/style';
import 'open-props/normalize';
Individual packs
/* index.pcss */
@import "open-props/colors";
@import "open-props/colors-hsl";
@import "open-props/indigo";
@import "open-props/indigo-hsl";
@import "open-props/easings";
@import "open-props/animations";
@import "open-props/sizes";
@import "open-props/gradients";
/* etc */
// index.js
import 'open-props/colors';
import 'open-props/colors-hsl';
import 'open-props/indigo';
import 'open-props/indigo-hsl';
import 'open-props/easings';
import 'open-props/animations';
import 'open-props/sizes';
import 'open-props/gradients';
/* etc */
PostCSS
Entry points
/* index.pcss */
@import "open-props/postcss/style";
@import "open-props/postcss/normalize";
The PostCSS normalize comes with the Custom Media props
JavaScript
Bundles
// index.js loading JS object
import OpenProps from 'open-props'; // module
import OpenProps from 'open-props/src'; // unbundled ES module
import Colors from 'open-props/src/colors';
// object notation access is special to OpenProps
console.info(OpenProps.size1);
console.info(OpenProps['--size-1']);
console.info(Colors['--indigo-5']);
Individual imports
// import just 1 color set object
import {indigo} from 'open-props/src/colors';
// import shadows without prop deps
import {StaticShadows} from 'open-props/src/shadows';
// import the gradients
import Gradients from 'open-props/src/gradients';
Design Tokens
/* 3 ways to import */
import 'open-props/tokens'
import 'open-props/json'
import 'open-props/design-tokens'
PostCSS JIT Props
Only ship the props you use. Learn more.
PostCSS
npm install postcss-jit-propsStop importing Open Props in your CSS (if you were).
This plugin adds them to your stylesheet as you use them 🙂
Props as Javascript
// postcss.config.js
const postcssJitProps = require('postcss-jit-props');
const OpenProps = require('open-props');
module.exports = {
plugins: [
postcssJitProps(OpenProps),
]
}
Props from CSS
// postcss.config.js
const postcssJitProps = require('postcss-jit-props');
const OpenProps = require('open-props');
module.exports = {
plugins: [
postcssJitProps({
files: [
require('open-props/open-props.min.css'),
]
}),
]
}
CLI
git clone https://github.com/argyleink/open-props.gitCustomize your build
Customize Bundles
npm run gen:nowhere // bundle without `:where()`
npm run gen:prefixed // each prop prefixed with `op`, like `--op-font-size-1`
node _create-props.js 'my-prefix' // each prop with your own prefix
Build Locally
npm run gen:op // runs through `src/` js files and creates the PostCSS files in `src/`
npm run bundle // creates all the various minified bundles of props
npm run lib:js // builds the JS modules for NPM
Autocomplete
VScode
- VScode has an intellisense feature which you can tap into, by passing the path to the node_modules folder when open-props is installed
- In your VScode environment, navigate to the extensions marketplace, and install this CSS Var Complete extension
-
When the extension is installed, you'll have to add
open-prop's css file path to a
.vscode/settings.jsonfile. Take a look at an illustration below
// .vscode/settings.json file
{
"cssvar.files": [
"./node_modules/open-props/open-props.min.css",
// if you have an alternative path to where your styles are located
// you can add it in this array of files
"assets/styles/variables.css"
],
// you can also add support for autocomplete in other file extensions
"cssvar.extensions": [
"css", "html", "jsx", "tsx"
]
}