/open-props

CSS custom properties to help accelerate adaptive and consistent design.

Primary LanguageHTMLMIT LicenseMIT

Open Props Logo

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)

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