grayscale/README.md

# Grayscale CSS

> CSS For Minimalists

Grayscale is a tiny-dynamic-classless css stylesheet designed for rapid prototyping and **LIVE** dynamic style alterations. **CHANGE A SINGLE COLOR** to **REDEFINE YOUR ENTIRE THEME**, complete with *light* and *dark* modes.

It *may* be `classless`, but it *oozes* [style](src/extras)

All in **2kb gzipped!**

### Features

- Tiny, 2kb
- Classless
- Dynamic, 15 Custom CSS Vars
- Pure CSS Theme Generation
- Includes Light and Dark Themes

> WARNING: ever-green browsers need only apply ;)


## Check it Out

- [Theme Builder](https://n2geoff.github.io/grayscale/theme/)
- [Documentation](https://n2geoff.github.io/grayscale)

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

---

<div style="display: flex">
  <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">
</div>

---

> Add `data-theme="dark"` to the `html` tag for a taste of the dark side


## LICENSE

- [MIT](LICENSE)


## TODO

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

- some theme colors need sat/light `clamp`ed so colors dont clobber eachother

- theme designs for normally uncustomizable parts:checkbox, radio button, range sliders ect...

- Im a fan of `details` & `summary`, needs to be included
renaming to grayscale 2021-10-16 04:08:04 +00:00			`# Grayscale CSS`
initial commit 2021-10-13 22:29:04 +00:00
renaming to grayscale 2021-10-16 04:08:04 +00:00			`> CSS For Minimalists`
initial commit 2021-10-13 22:29:04 +00:00
tweak readme 2021-10-23 18:51:52 +00:00			`Grayscale is a tiny-dynamic-classless css stylesheet designed for rapid prototyping and LIVE dynamic style alterations. CHANGE A SINGLE COLOR to REDEFINE YOUR ENTIRE THEME, complete with light and dark modes.`
initial commit 2021-10-13 22:29:04 +00:00
tweak readme 2021-10-23 18:51:52 +00:00			It may be `classless`, but it oozes [style](src/extras)
initial commit 2021-10-13 22:29:04 +00:00
renaming to grayscale 2021-10-16 04:08:04 +00:00			`All in 2kb gzipped!`
initial commit 2021-10-13 22:29:04 +00:00
			`### Features`

renaming to grayscale 2021-10-16 04:08:04 +00:00			`- Tiny, 2kb`
tweak readme 2021-10-23 18:51:52 +00:00			`- Classless`
renaming to grayscale 2021-10-16 04:08:04 +00:00			`- Dynamic, 15 Custom CSS Vars`
			`- Pure CSS Theme Generation`
			`- Includes Light and Dark Themes`
initial commit 2021-10-13 22:29:04 +00:00
renaming to grayscale 2021-10-16 04:08:04 +00:00			`> WARNING: ever-green browsers need only apply ;)`
initial commit 2021-10-13 22:29:04 +00:00

update readme w/ images 2021-10-13 23:07:44 +00:00			`## Check it Out`
initial commit 2021-10-13 22:29:04 +00:00
readme update 2021-10-17 19:57:08 +00:00			`- [Theme Builder](https://n2geoff.github.io/grayscale/theme/)`
doc tweaks 2021-10-16 21:28:36 +00:00			`- [Documentation](https://n2geoff.github.io/grayscale)`
doc tweaks 2021-10-16 06:13:53 +00:00
renaming to grayscale 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
initial commit 2021-10-13 22:29:04 +00:00
doc tweaks 2021-10-16 06:13:53 +00:00			`---`

update readme w/ images 2021-10-13 23:07:44 +00:00			`<div style="display: flex">`
updated sample images to display correctly on npm 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">`
update readme w/ images 2021-10-13 23:07:44 +00:00			`</div>`
initial commit 2021-10-13 22:29:04 +00:00
doc tweaks 2021-10-16 06:13:53 +00:00			`---`

tweak readme 2021-10-23 18:51:52 +00:00			> Add `data-theme="dark"` to the `html` tag for a taste of the dark side
initial commit 2021-10-13 22:29:04 +00:00

update readme w/ images 2021-10-13 23:07:44 +00:00			`## LICENSE`
initial commit 2021-10-13 22:29:04 +00:00
update readme w/ images 2021-10-13 23:07:44 +00:00			`- [MIT](LICENSE)`
initial commit 2021-10-13 22:29:04 +00:00

update readme w/ images 2021-10-13 23:07:44 +00:00			`## TODO`
initial commit 2021-10-13 22:29:04 +00:00
readme update 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`
initial commit 2021-10-13 22:29:04 +00:00
readme update 2021-10-17 19:57:08 +00:00			- some theme colors need sat/light `clamp`ed so colors dont clobber eachother
initial commit 2021-10-13 22:29:04 +00:00
readme update 2021-10-17 19:57:08 +00:00			`- theme designs for normally uncustomizable parts:checkbox, radio button, range sliders ect...`
initial commit 2021-10-13 22:29:04 +00:00
readme update 2021-10-17 19:57:08 +00:00			- Im a fan of `details` & `summary`, needs to be included