geoff
/
stylelite
mirror of https://github.com/n2geoff/stylelite.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

README

This commit is contained in:
Geoff Doty 2026-01-25 11:58:24 -05:00
parent 99655ce656
commit 9ee5977257
1 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
README.md
View File

@ -2,7 +2,7 @@
> Styles that work for you
Stylelite is a tiny-dynamic-classlite css foundation for any project. Easy to extend, with extras already available, and Great for rapid prototyping.
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)*
@ -11,18 +11,18 @@ All in **2kb gzipped!**
## Features
- Tiny, 2kb
- Class-lite
- Classlite
- Few Layout Utility Classes
- `.grid`, `.group`, `.left`, `.right`, `.center`
- `.container`, `.grid`, `.group`, `.center`...
- **extras/** supplies pick-and-choose styles to expanded your options
- Dynamic, 10 Custom CSS Vars
- 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 browsers need only apply ;)
> WARNING: ever-green, CSS3 browsers, need only apply ;)
## Get Started
@ -55,34 +55,46 @@ It is RECOMMENDED you import **Stylelite** via a `main.css` or the like referenc
/* customize */
:root {
--theme: steelblue;
/* for native web look */
--primary: #0000FF;
--radius: 0rem;
...
}
/* or add your own styles below */
...
```
### Avaliable Vars
| Var | Default | Description |
|--|--|--|
| --theme | steelblue | theme color |
| --primary | steelblue | theme color |
| --secondary | #404040 | theme color |
| --size | 1rem | a universal size, margin, font-size, ect... |
| --radius | 0rem | add some curves |
| --fg| #17202A | foreground color |
| --mg | #99A3A4 | midground color or netural color |
| --bg | #FDFEFE | background color |
| --white | #FFF | white color |
| --black | #000 | black color |
| --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 |
Below are some simple and common examples.
> `--theme` may make a return, but ingored unless set
### Dark Mode
Add `data-theme="dark"` to the `html` tag for a taste of the dark side
### 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">
@ -90,22 +102,6 @@ Add `data-theme="dark"` to the `html` tag for a taste of the dark side
> DEFAULT: data-theme="light"
### Theme
The stock theme color is `steelblue`, but you can change it to anything you want just add
```css
:root {
--theme: Magenta;
}
```
> NOTE: Light mode (default) should use dark theme colors, and dark mode should use light theme colors
### Rounded Corners
By default Stylelite is a boxy design, but if you want a rounded design, just set `--radius` to something. try `.4rem`
## LICENSE