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-16 06:13:53 +00:00
- [Theme Builder ](https://n2geoff.github.io )
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" >
< img src = "example/img/steelblue-dark.png" width = "400" >
< img src = "example/img/steelblue-light.png" width = "400" >
< / 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-16 04:08:04 +00:00
Still have a bunch of tiny tweaks and extras to build, but th
2021-10-13 22:29:04 +00:00
2021-10-16 04:08:04 +00:00
- clamp themes, saturation and lightness above 80, or below 20 just wont work
2021-10-13 22:29:04 +00:00
- add theme to parts, checkbox, radio button, range sliders ect...
- styles for `details` & `summary`
2021-10-16 04:08:04 +00:00
- ability for an accent color (defaults to theme)
2021-10-13 22:29:04 +00:00
- Tweak `code` , `pre` , `kbd`
- input highlight on focus
- documentation around `main` , `article` , `section` tags
