Skip to content

CSS custom properties to help accelerate adaptive and consistent design.

License

Notifications You must be signed in to change notification settings

Jothsa/open-props

 
 

Repository files navigation

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)

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

About

CSS custom properties to help accelerate adaptive and consistent design.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 46.5%
  • CSS 29.6%
  • JavaScript 23.9%