https://github.com/n2geoff/stylelite
minimal, drop-in, classlite css stylesheet
https://github.com/n2geoff/stylelite
classless-css css css3 minimal stylesheet
Last synced: 4 months ago
JSON representation
minimal, drop-in, classlite css stylesheet
- Host: GitHub
- URL: https://github.com/n2geoff/stylelite
- Owner: n2geoff
- License: mit
- Created: 2022-06-15T01:15:57.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-20T22:43:34.000Z (over 1 year ago)
- Last Synced: 2025-02-09T17:03:29.281Z (about 1 year ago)
- Topics: classless-css, css, css3, minimal, stylesheet
- Language: CSS
- Homepage:
- Size: 110 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Stylelite CSS
> 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.
It *may* be light on `class`, but it makes up for it in *[style](src/extras)*
All in **2kb gzipped!**
## Features
- Tiny, 2kb
- Class-lite
- Few Layout Utility Classes
- `.grid`, `.group`, `.left`, `.right`, `.center`
- **extras/** supplies pick-and-choose styles to expanded your options
- Dynamic, 10 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 ;)
## 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 {
--theme: steelblue;
--radius: 0rem;
...
}
/* or add your own styles below */
```
### Avaliable Vars
| Var | Default | Description |
|--|--|--|
| --theme | steelblue | 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 |
| --light | #EEE | light accent color |
| --dark | #222 | dark accent color |
Below are some simple and common examples.
### Dark Mode
Add `data-theme="dark"` to the `html` tag for a taste of the dark side
```html
```
> 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
- [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