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/orange.min.css";
@import "https://unpkg.com/open-props/easings.min.css";
@import "https://unpkg.com/open-props/sizes.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.orange.css";
@import "https://unpkg.com/open-props/src/props.easing.css";
@import "https://unpkg.com/open-props/src/props.sizes.css";
/* etc */
Design Tokens
as JSON
Follows the design tokens spec.
Note: Not all props can be represented as a design token.
import "https://unpkg.com/open-props/open-props.tokens.json"
NPM
npm install open-propsCSS
Bundles
/* index.css */
@import "open-props/style";
@import "open-props/normalize";
// index.js
import 'open-props/style';
import 'open-props/normalize';
Individual packs
/* index.pcss */
@import "open-props/sizes";
@import "open-props/colors";
@import "open-props/orange";
@import "open-props/gradients";
/* etc */
// index.js
import 'open-props/sizes';
import 'open-props/colors';
import 'open-props/orange';
import 'open-props/gradients';
/* etc */
PostCSS
Entry points
/* index.pcss */
@import "open-props/postcss/style";
@import "open-props/postcss/normalize";
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-propsProps 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"
]
}