# 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
```
or [Download](https://raw.githubusercontent.com/n2geoff/stylelite/main/dist/stylelite.min.css)
Include Feather Icons
```html
```
## 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 | steelblue | theme color |
| --secondary | #404040 | theme 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` may make a return, but ingored unless set
### 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
```
> 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