diff --git a/README.md b/README.md index 4a6d054..77a8665 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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