mirror of https://github.com/n2geoff/stylelite.git
README
This commit is contained in:
parent
99655ce656
commit
9ee5977257
66
README.md
66
README.md
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
> Styles that work for you
|
> 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)*
|
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
|
## Features
|
||||||
|
|
||||||
- Tiny, 2kb
|
- Tiny, 2kb
|
||||||
- Class-lite
|
- Classlite
|
||||||
- Few Layout Utility Classes
|
- Few Layout Utility Classes
|
||||||
- `.grid`, `.group`, `.left`, `.right`, `.center`
|
- `.container`, `.grid`, `.group`, `.center`...
|
||||||
|
|
||||||
- **extras/** supplies pick-and-choose styles to expanded your options
|
- **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"`)
|
- Includes Light and Dark Themes (`data-theme="light"`)
|
||||||
|
|
||||||
Designed to work with default [Feather Icons](https://feathericons.com/)
|
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
|
## Get Started
|
||||||
|
|
@ -55,34 +55,46 @@ It is RECOMMENDED you import **Stylelite** via a `main.css` or the like referenc
|
||||||
/* customize */
|
/* customize */
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--theme: steelblue;
|
/* for native web look */
|
||||||
|
--primary: #0000FF;
|
||||||
--radius: 0rem;
|
--radius: 0rem;
|
||||||
...
|
...
|
||||||
}
|
}
|
||||||
|
...
|
||||||
/* or add your own styles below */
|
|
||||||
|
|
||||||
```
|
```
|
||||||
### Avaliable Vars
|
### Avaliable Vars
|
||||||
|
|
||||||
| Var | Default | Description |
|
| Var | Default | Description |
|
||||||
|--|--|--|
|
|--|--|--|
|
||||||
| --theme | steelblue | theme color |
|
| --primary | steelblue | theme color |
|
||||||
|
| --secondary | #404040 | theme color |
|
||||||
| --size | 1rem | a universal size, margin, font-size, ect... |
|
| --size | 1rem | a universal size, margin, font-size, ect... |
|
||||||
| --radius | 0rem | add some curves |
|
| --radius | .3rem | add some curves |
|
||||||
| --fg| #17202A | foreground color |
|
| --foreground| #111 | foreground color |
|
||||||
| --mg | #99A3A4 | midground color or netural color |
|
| --background | #FFF | background color |
|
||||||
| --bg | #FDFEFE | background color |
|
| --default | #F0F0F0 | midground color or netural color |
|
||||||
| --white | #FFF | white color |
|
|
||||||
| --black | #000 | black color |
|
|
||||||
| --light | #EEE | light accent color |
|
| --light | #EEE | light accent color |
|
||||||
| --dark | #222 | dark 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
|
||||||
<html lang="en" data-theme="dark">
|
<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"
|
> 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
|
## LICENSE
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue