stylelite/README.md

# Stylelite CSS

> Styles that work for you

Stylelite is a tiny-dynamic-classlite CSS3 foundation for any project.  Dead simple classless integration that can progressively inhance with class utilities and whatever else you want to bring to the table. The ultimate stylesheet for rapid prototyping.

It *may* be light on `class`, but it makes up for it in *[style](src/extras)*

All in **2kb gzipped!**

## Features

- Tiny, 2kb
- Classlite
- Few Layout Utility Classes
    - `.container`, `.grid`, `.group`, `.center`...

- **extras/** supplies pick-and-choose styles to expanded your options
- Dynamic, 9 Custom CSS Vars
- Includes Light and Dark Themes (`data-theme="light"`)

Designed to work with default [Feather Icons](https://feathericons.com/)


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


## Get Started

Via `jsdelivr` CDN

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/n2geoff/stylelite/dist/stylelite.min.css">

```

or [Download](https://raw.githubusercontent.com/n2geoff/stylelite/main/dist/stylelite.min.css)

Include Feather Icons

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css/css/feather.min.css">

```

## Customize

While **Stylelite** is a drop-and-forget cascading style sheet (css) file, that doesn't mean you cannot customize it -- easily!

It is RECOMMENDED you import **Stylelite** via a `main.css` or the like referenced in your web application, like

```css
@import url(stylelite);

/* customize */

:root {
  /* for native web look */
  --primary: #0000FF; 
  --radius: 0rem;
  ...
}
...
```
### Avaliable Vars

| Var | Default | Description |
|--|--|--|
| --primary | #5499C7 | theme color (overwritten by `--theme`) |
| --secondary | #404040 | contrast color |
| --size | 1rem | a universal size, margin, font-size, ect... |
| --radius | .3rem | add some curves |
| --foreground| #111 | foreground color |
| --background | #FFF | background color |
| --default | #F0F0F0 | midground color or netural color |
| --light | #EEE | light accent color |
| --dark | #222 | dark accent color |

> `--theme` is an ignored color setting unless a user sets


### Themes

Default theme based on `steelblue`, but CREATE YOUR OWN

```css

[data-theme=mytheme] {
    --primary: Magenta;
    --foreground: #FFF;
    --background: #222;

    --default: #333;
}
```

Add `data-theme="mytheme"` to the `html` to activate, or get a taste of the `dark` side with

```html
<html lang="en" data-theme="dark">
```

> DEFAULT: data-theme="light"


## LICENSE

- [MIT](LICENSE)


## TODO

Keep it small, but immediately useful.

Tweak to hit that SWEET spot:

- Dark mode use native browser scroll bars/classes
- Extras
  - Colors  - Bootstrap-inspired classes
  - Layout  - Little more flex-based layout options
  - Switch  - More modern UI component
  - Spinner - Identify content is loading
  - Tabs    - Another useful modern UI component
add readme 2022-06-15 01:39:33 +00:00			`# Stylelite CSS`

minor clean up 2024-05-11 00:44:08 +00:00			`> Styles that work for you`
add readme 2022-06-15 01:39:33 +00:00
README 2026-01-25 16:58:24 +00:00			`Stylelite is a tiny-dynamic-classlite CSS3 foundation for any project. Dead simple classless integration that can progressively inhance with class utilities and whatever else you want to bring to the table. The ultimate stylesheet for rapid prototyping.`
add readme 2022-06-15 01:39:33 +00:00
minor clean up 2024-05-11 00:44:08 +00:00			It may be light on `class`, but it makes up for it in [style](src/extras)
add readme 2022-06-15 01:39:33 +00:00
smaller 2024-05-17 21:35:33 +00:00			`All in 2kb gzipped!`
add readme 2022-06-15 01:39:33 +00:00
readme 2024-05-11 19:25:34 +00:00			`## Features`
add readme 2022-06-15 01:39:33 +00:00
smaller 2024-05-17 21:35:08 +00:00			`- Tiny, 2kb`
README 2026-01-25 16:58:24 +00:00			`- Classlite`
readme 2024-05-17 21:36:44 +00:00			`- Few Layout Utility Classes`
README 2026-01-25 16:58:24 +00:00			- `.container`, `.grid`, `.group`, `.center`...
readme 2024-05-11 19:14:44 +00:00
readme 2024-05-11 19:13:59 +00:00			`- extras/ supplies pick-and-choose styles to expanded your options`
README 2026-01-25 16:58:24 +00:00			`- Dynamic, 9 Custom CSS Vars`
update readme 2025-03-22 21:58:40 +00:00			- Includes Light and Dark Themes (`data-theme="light"`)
add readme 2022-06-15 01:39:33 +00:00
readme 2024-05-11 19:25:34 +00:00			`Designed to work with default [Feather Icons](https://feathericons.com/)`


README 2026-01-25 16:58:24 +00:00			`> WARNING: ever-green, CSS3 browsers, need only apply ;)`
add readme 2022-06-15 01:39:33 +00:00

readme 2024-05-11 19:25:34 +00:00			`## Get Started`
add readme 2022-06-15 01:39:33 +00:00
readme 2024-05-11 19:13:59 +00:00			Via `jsdelivr` CDN
add readme 2022-06-15 01:39:33 +00:00
readme 2024-05-11 19:14:44 +00:00			```html
readme 2024-05-11 19:15:12 +00:00			`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/n2geoff/stylelite/dist/stylelite.min.css">`
add readme 2022-06-15 01:39:33 +00:00
readme 2024-05-11 19:13:59 +00:00			```

			`or [Download](https://raw.githubusercontent.com/n2geoff/stylelite/main/dist/stylelite.min.css)`

readme 2024-05-11 19:25:34 +00:00			`Include Feather Icons`
readme 2024-05-11 19:13:59 +00:00
readme 2024-05-11 19:25:34 +00:00			```html
			`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css/css/feather.min.css">`

			```
readme 2024-05-11 19:13:59 +00:00
reduce classes 2024-05-17 21:20:32 +00:00			`## Customize`

			`While Stylelite is a drop-and-forget cascading style sheet (css) file, that doesn't mean you cannot customize it -- easily!`

			It is RECOMMENDED you import Stylelite via a `main.css` or the like referenced in your web application, like

			```css
			`@import url(stylelite);`

readme tweak 2025-03-22 22:04:17 +00:00			`/* customize */`
update readme 2025-03-22 21:58:40 +00:00
			`:root {`
README 2026-01-25 16:58:24 +00:00			`/* for native web look */`
			`--primary: #0000FF;`
readme tweak 2025-03-22 22:04:17 +00:00			`--radius: 0rem;`
			`...`
update readme 2025-03-22 21:58:40 +00:00			`}`
README 2026-01-25 16:58:24 +00:00			`...`
reduce classes 2024-05-17 21:20:32 +00:00			```
update readme 2025-03-22 21:58:40 +00:00			`### Avaliable Vars`

			`\| Var \| Default \| Description \|`
			`\|--\|--\|--\|`
--theme support returns 2026-01-25 19:53:16 +00:00			\| --primary \| #5499C7 \| theme color (overwritten by `--theme`) \|
			`\| --secondary \| #404040 \| contrast color \|`
update readme 2025-03-22 21:58:40 +00:00			`\| --size \| 1rem \| a universal size, margin, font-size, ect... \|`
README 2026-01-25 16:58:24 +00:00			`\| --radius \| .3rem \| add some curves \|`
			`\| --foreground\| #111 \| foreground color \|`
			`\| --background \| #FFF \| background color \|`
			`\| --default \| #F0F0F0 \| midground color or netural color \|`
update readme 2025-03-22 21:58:40 +00:00			`\| --light \| #EEE \| light accent color \|`
			`\| --dark \| #222 \| dark accent color \|`
reduce classes 2024-05-17 21:20:32 +00:00
--theme support returns 2026-01-25 19:53:16 +00:00			> `--theme` is an ignored color setting unless a user sets
reduce classes 2024-05-17 21:20:32 +00:00
readme 2024-05-11 19:13:59 +00:00
README 2026-01-25 16:58:24 +00:00			`### Themes`
add readme 2022-06-15 01:39:33 +00:00
README 2026-01-25 16:58:24 +00:00			Default theme based on `steelblue`, but CREATE YOUR OWN
reduce classes 2024-05-17 21:20:32 +00:00
README 2026-01-25 16:58:24 +00:00			```css
reduce classes 2024-05-17 21:20:32 +00:00
README 2026-01-25 16:58:24 +00:00			`[data-theme=mytheme] {`
			`--primary: Magenta;`
			`--foreground: #FFF;`
			`--background: #222;`
reduce classes 2024-05-17 21:20:32 +00:00
README 2026-01-25 16:58:24 +00:00			`--default: #333;`
reduce classes 2024-05-17 21:20:32 +00:00			`}`
			```

README 2026-01-25 16:58:24 +00:00			Add `data-theme="mytheme"` to the `html` to activate, or get a taste of the `dark` side with
reduce classes 2024-05-17 21:20:32 +00:00
README 2026-01-25 16:58:24 +00:00			```html
			`<html lang="en" data-theme="dark">`
			```
reduce classes 2024-05-17 21:20:32 +00:00
README 2026-01-25 16:58:24 +00:00			`> DEFAULT: data-theme="light"`
reduce classes 2024-05-17 21:20:32 +00:00
add readme 2022-06-15 01:39:33 +00:00
			`## LICENSE`

			`- [MIT](LICENSE)`


			`## TODO`

text tweaks 2023-12-22 20:51:51 +00:00			`Keep it small, but immediately useful.`
add readme 2022-06-15 01:39:33 +00:00
reduce classes 2024-05-17 21:20:32 +00:00			`Tweak to hit that SWEET spot:`
add readme 2022-06-15 01:39:33 +00:00
readme 2024-05-11 19:25:34 +00:00			`- Dark mode use native browser scroll bars/classes`
reduce classes 2024-05-17 21:20:32 +00:00			`- Extras`
			`- Colors - Bootstrap-inspired classes`
			`- Layout - Little more flex-based layout options`
			`- Switch - More modern UI component`
			`- Spinner - Identify content is loading`
			`- Tabs - Another useful modern UI component`