All Projects → argyleink → open-props

argyleink / open-props

Licence: MIT License
CSS custom properties to help accelerate adaptive and consistent design.

Programming Languages

HTML
75241 projects
CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to open-props

stylos
Webpack plugin to automatically generate and inject CSS utilities to your application
Stars: ✭ 60 (-96.48%)
Mutual labels:  css-utilites
theme-change
Change CSS theme with toggle, buttons or select using CSS custom properties and localStorage
Stars: ✭ 283 (-83.38%)
Mutual labels:  css-custom-properties
postcss-variable-compress
Minifies css variable names
Stars: ✭ 18 (-98.94%)
Mutual labels:  css-custom-properties
ColorTranslator
A JavaScript library, written in TypeScript, to convert among different color models
Stars: ✭ 34 (-98%)
Mutual labels:  css-colors
swatch
A lightweight, modern theming library based on CSS variables and the setter/getter pattern.
Stars: ✭ 14 (-99.18%)
Mutual labels:  css-custom-properties
v-helper
A shorter SCSS access to CSS custom properties.
Stars: ✭ 14 (-99.18%)
Mutual labels:  css-custom-properties
pollen
The CSS variables build system
Stars: ✭ 754 (-55.73%)
Mutual labels:  css-utilites
fylgja
The modular highly customisable CSS framework. Powered by CSS Components, Utilities and Props for building your Web UI.
Stars: ✭ 65 (-96.18%)
Mutual labels:  css-custom-properties
Halfmoon
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.
Stars: ✭ 2,583 (+51.67%)
Mutual labels:  css-custom-properties

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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].