2021-10-16 04:08:04 +00:00
# Grayscale CSS
2021-10-13 22:29:04 +00:00
2021-10-16 04:08:04 +00:00
> CSS For Minimalists
2021-10-13 22:29:04 +00:00
2021-10-16 04:08:04 +00:00
Grayscale is a tiny-dynamic-classless css stylesheet designed for rapid prototyping. Use AS-IS or...
2021-10-13 22:29:04 +00:00
2021-10-16 04:08:04 +00:00
**CHANGE A SINGLE COLOR** and **REDEFINE YOUR ENTIRE THEME** , complete with *light* and *dark* modes.
2021-10-13 22:29:04 +00:00
2021-10-16 06:52:05 +00:00
It *may* be `classless` , but it *oozes* with an [extendable ](src/extras ) style that just rocks!!
2021-10-13 22:29:04 +00:00
2021-10-16 04:08:04 +00:00
All in **2kb gzipped!**
2021-10-13 22:29:04 +00:00
### Features
2021-10-16 04:08:04 +00:00
- Tiny, 2kb
- Classless
- Dynamic, 15 Custom CSS Vars
- Pure CSS Theme Generation
- Includes Light and Dark Themes
2021-10-13 22:29:04 +00:00
2021-10-16 04:08:04 +00:00
> WARNING: ever-green browsers need only apply ;)
2021-10-13 22:29:04 +00:00
2021-10-13 23:07:44 +00:00
## Check it Out
2021-10-13 22:29:04 +00:00
2021-10-17 19:57:08 +00:00
- [Theme Builder ](https://n2geoff.github.io/grayscale/theme/ )
2021-10-16 21:28:36 +00:00
- [Documentation ](https://n2geoff.github.io/grayscale )
2021-10-16 06:13:53 +00:00
2021-10-16 04:08:04 +00:00
While **Grayscale CSS** can generate a dynamic theme based on A SINGLE COLOR, it defaults to a beautiful theme is based on `steelblue` , and of course that comes in both `light` and `dark` variants
2021-10-13 22:29:04 +00:00
2021-10-16 06:13:53 +00:00
---
2021-10-13 23:07:44 +00:00
< div style = "display: flex" >
2021-10-17 21:33:50 +00:00
< img src = "https://n2geoff.github.io/grayscale/img/steelblue-dark.png" width = "344" >
< img src = "https://n2geoff.github.io/grayscale/img/steelblue-light.png" width = "344" >
2021-10-13 23:07:44 +00:00
< / div >
2021-10-13 22:29:04 +00:00
2021-10-16 06:13:53 +00:00
---
2021-10-16 04:08:04 +00:00
Add `data-theme="dark"` to the `html` tag for a taste of the dark side
2021-10-13 22:29:04 +00:00
2021-10-13 23:07:44 +00:00
## LICENSE
2021-10-13 22:29:04 +00:00
2021-10-13 23:07:44 +00:00
- [MIT ](LICENSE )
2021-10-13 22:29:04 +00:00
2021-10-13 23:07:44 +00:00
## TODO
2021-10-13 22:29:04 +00:00
2021-10-17 19:57:08 +00:00
While many of the core ideas are here to keep it as small as possible, there are plenty of tweaks and extras to build to hit that perfect sweat spot
2021-10-13 22:29:04 +00:00
2021-10-17 19:57:08 +00:00
- some theme colors need sat/light `clamp` ed so colors dont clobber eachother
2021-10-13 22:29:04 +00:00
2021-10-17 19:57:08 +00:00
- theme designs for normally uncustomizable parts:checkbox, radio button, range sliders ect...
2021-10-13 22:29:04 +00:00
2021-10-17 19:57:08 +00:00
- Im a fan of `details` & `summary` , needs to be included
2021-10-13 22:29:04 +00:00
2021-10-17 19:57:08 +00:00
- toggleable accent color (defaults to theme)
2021-10-13 22:29:04 +00:00
2021-10-17 19:57:08 +00:00
- documentation around how various layout and designs can be created with just regualar html tags; like `main` , `article` , `section` , or the absence of them
