• Stars
    star
    4,744
  • Rank 8,914 (Top 0.2 %)
  • Language
    HTML
  • License
    MIT License
  • Created about 3 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

CSS custom properties to help accelerate adaptive and consistent design.

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

More Repositories

1

gui-challenges

Components from the YouTube show GUI Challenges: accessible, responsive, adaptive and cross browser components.
HTML
2,781
star
2

transition.css

:octocat: Drop-in CSS transitions
CSS
1,831
star
3

ragrid

:octocat: Intrinsic first auto-layout flexbox grid
CSS
252
star
4

blingblingjs

💲 Micro-library of shorthands for DOM selection, events, and attribute manipulation
JavaScript
232
star
5

morphull

Astro starter powered by MPA view transitions
Astro
223
star
6

conic.css

nice'n simple conic gradients 🎨
JavaScript
209
star
7

shortstack

🥞 minimal Rollup + PostCSS modern syntax starter template
JavaScript
168
star
8

roving-ux

stateful roving index for web ui
JavaScript
129
star
9

scrollyfills

grab and go polyfill functions for web scroll features
JavaScript
102
star
10

ScrollSnapExplainers

89
star
11

slyd

Snappy, responsive, touch optimized, bi-directional presentation framework
CSS
73
star
12

twop

tailwind += open props
TypeScript
51
star
13

vite-postcss-preset-env

HTML
41
star
14

Kung-Fury-Theme

80's dark retro theme for VS Code and Sublime Text
35
star
15

Bolt

⚡ is a fast grunt based, data driven, static site seed project, for rapid web development of PWA's or JAMstack projects
HTML
34
star
16

2022-css-day_oh-snap

Astro
28
star
17

Google-IO-2021-Workshop_User-Adaptive-Interfaces

HTML
27
star
18

chat-ui

💬 rich message handling chat interface for bot projects
JavaScript
19
star
19

snowpack-template-preset-env

babel and postcss at latest with browserlist powered preset-env
JavaScript
18
star
20

slyd-starter

clone and go Slyd starter kit
HTML
17
star
21

css-at-cds

links to demo's and docs from our talk at Chrome Dev Summit 2019
HTML
15
star
22

scrollend-explainer

12
star
23

argyleink

11
star
24

houdini-tabs

WIP: scroll-snap-points + ScrollTimeline + Houdini AnimationWorklet
JavaScript
11
star
25

css-n-js

JavaScript
10
star
26

houdini-static-gradient

a houdini paint worklet with a retro static gradient effect
JavaScript
9
star
27

HTML5-ClearUI

Node, Mongo, Zepto, HTML5
JavaScript
8
star
28

Android-Webapp-Boilerplate

The project code needed to make a single webview android app
7
star
29

coinsafe

PWototype demo for JScamp 2019 presentation
HTML
6
star
30

london-css-2020

CSS 🎉
HTML
5
star
31

jscamp

talk for JScamp 2019 in Barcelona
HTML
5
star
32

NintendoSwitch.tmTheme

🎮 dark theme with bubble gum code highlighting and subdued machine characters for optimal dev focus and nostalgia
4
star
33

JS-Web-App-Starter

Vagrant/Nginx/Express/MySQL/Grunt/Jade/Stylus
CSS
4
star
34

app-img

<app-image> a lazy image loading custom element for considerate user experiences
HTML
4
star
35

Node--Express--and-Socket.io-Starter-Kit

Get started right way with a socket node app. I made this for me, but you can use it too!
JavaScript
4
star
36

iOS-Webview-Boilerplate

Objective-C
3
star
37

browserify-babel

Quickstart for playing with ES6 Babel and Browserify
JavaScript
2
star
38

prefers-reduced-data-explainer

2
star
39

surfin

JavaScript
2
star
40

RxState

💊 Turn any object or array into a reactive store
JavaScript
2
star
41

2021-csscamp-css-color

HTML
2
star
42

Leap-Motion---Finger-Tracking

JavaScript gesture and pointer following mechanism with CSS
JavaScript
1
star
43

DieAntsDie

ActionScript 3.0 port to Lua
Lua
1
star
44

csscamp

HTML
1
star
45

Greensock-Touch-Carousel

JavaScript
1
star
46

jack

repo for local wordpress build
PHP
1
star
47

N-Gon

Virtualized infinite sided cube, touch enabled bi-directional rotation
JavaScript
1
star
48

adobe-dreamweaver-fun-cs6-demo

JavaScript
1
star
49

hd-color-bugs

a stash of issues and bugs found while using new HD color functions in CSS
1
star
50

jQuery-Mobile-Ratio-Boilerplate

JavaScript
1
star
51

Android-Full-Screen-Webview-Seed

Use this for a quick android project that points to your dev environment
Java
1
star
52

affilicats

🐈 Progressive Web App demo that showcases flaky network resilience measures (📶 or 🚫📶).
JavaScript
1
star
53

parcel-cssNext-esNext

⚡️ Hot load CSS and JS with no state loss, build a site with the powers of Jade
CSS
1
star
54

Parallax-JS

Sideways! Parallax page generator from simple HTML & CSS
JavaScript
1
star
55

bash_profile

Shell
1
star
56

jade-cssnext-babel-webpacked

⚡️ Build a multipage site with Jade and Webpack, where each page is created from a bundle entry file
HTML
1
star