JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 14424
  • Score
    100M100P100Q149206F
  • License MIT

Package Exports

  • open-props
  • open-props/animations
  • open-props/aspects
  • open-props/blue
  • open-props/blue-hsl
  • open-props/borders
  • open-props/buttons
  • open-props/colors
  • open-props/colors-hsl
  • open-props/cyan
  • open-props/cyan-hsl
  • open-props/design-tokens
  • open-props/easings
  • open-props/fonts
  • open-props/gradients
  • open-props/grape
  • open-props/grape-hsl
  • open-props/gray
  • open-props/gray-hsl
  • open-props/green
  • open-props/green-hsl
  • open-props/indigo
  • open-props/indigo-hsl
  • open-props/json
  • open-props/lime
  • open-props/lime-hsl
  • open-props/media
  • open-props/normalize
  • open-props/orange
  • open-props/orange-hsl
  • open-props/pink
  • open-props/pink-hsl
  • open-props/postcss/normalize
  • open-props/postcss/style
  • open-props/red
  • open-props/red-hsl
  • open-props/shadows
  • open-props/sizes
  • open-props/src
  • open-props/src/animations
  • open-props/src/aspects
  • open-props/src/borders
  • open-props/src/colors
  • open-props/src/colors-hsl
  • open-props/src/easing
  • open-props/src/fonts
  • open-props/src/gradients
  • open-props/src/shadows
  • open-props/src/sizes
  • open-props/src/svg
  • open-props/src/zindex
  • open-props/style
  • open-props/teal
  • open-props/teal-hsl
  • open-props/tokens
  • open-props/violet
  • open-props/violet-hsl
  • open-props/yellow
  • open-props/yellow-hsl
  • open-props/zindex

Readme

Frame 2

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: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