Open Props

CSS custom properties to help accelerate adaptive and consistent design.
GitHub
5.09k
Created 4 years ago, last commit 8 days ago
60 contributors
823 commits
Stars added on GitHub, month by month
7
8
9
10
11
12
1
2
3
4
5
6
2024
2025
Stars added on GitHub, per day, on average
Yesterday
+1
Last week
+0.1
/day
Last month
+0.5
/day
Last 12 months
+1.5
/day
npmPackage on NPM
Monthly downloads on NPM
7
8
9
10
11
12
1
2
3
4
5
6
2024
2025
No dependencies
README
![Open Props Logo](https://user-images.githubusercontent.com/1134620/141246730-7df4cf2a-6249-42ca-a01b-494c3ccddabe.png)

Open Source CSS Variables

colors gradients shadows aspect ratios typography
easings animations sizes borders z-indexes media-queries

Tests npm version Discord

Need help?   👉   Discord


CDN (browse)

Bookmarklet

javascript: (() => {
  const href = "https://unpkg.com/open-props";
  document.head.append(Object.assign(document.createElement("link"),{rel:"stylesheet",href}));
})();

CLI

  • npm run gen:op - runs through src/ js files and creates the PostCSS files in src/
  • npm run gen:nowhere - creates a version of Open Props without the use of :where()
  • npm run gen:shadowdom - creates a version of Open Props with :host as the selector scope
  • npm run gen:prefixed - creates a version of Open Props with each prop prefixed with op, like --op-font-size-1
  • npm run bundle - creates all the various minified bundles of props
  • npm run lib:js - builds the JS modules for NPM

Testing

npm run build && npm run bundle
npm test