2022-06-15 01:39:33 +00:00
|
|
|
# Stylelite CSS
|
|
|
|
|
|
2024-05-11 00:44:08 +00:00
|
|
|
> Styles that work for you
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-11 00:44:08 +00:00
|
|
|
Stylelite is a tiny-dynamic-classlite css foundation for any project. Easy to extend, with extras already available, and Great for rapid prototyping.
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-11 00:44:08 +00:00
|
|
|
It *may* be light on `class`, but it makes up for it in *[style](src/extras)*
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-17 21:35:33 +00:00
|
|
|
All in **2kb gzipped!**
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-11 19:25:34 +00:00
|
|
|
## Features
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-17 21:35:08 +00:00
|
|
|
- Tiny, 2kb
|
2024-05-11 00:44:08 +00:00
|
|
|
- Class-lite
|
2024-05-17 21:36:44 +00:00
|
|
|
- Few Layout Utility Classes
|
2025-03-22 21:58:40 +00:00
|
|
|
- `.grid`, `.group`, `.left`, `.right`, `.center`
|
2024-05-11 19:14:44 +00:00
|
|
|
|
2024-05-11 19:13:59 +00:00
|
|
|
- **extras/** supplies pick-and-choose styles to expanded your options
|
2025-03-22 21:58:40 +00:00
|
|
|
- Dynamic, 10 Custom CSS Vars
|
|
|
|
|
- Includes Light and Dark Themes (`data-theme="light"`)
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-11 19:25:34 +00:00
|
|
|
Designed to work with default [Feather Icons](https://feathericons.com/)
|
|
|
|
|
|
|
|
|
|
|
2022-06-15 01:39:33 +00:00
|
|
|
> WARNING: ever-green browsers need only apply ;)
|
|
|
|
|
|
|
|
|
|
|
2024-05-11 19:25:34 +00:00
|
|
|
## Get Started
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-11 19:13:59 +00:00
|
|
|
Via `jsdelivr` CDN
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-11 19:14:44 +00:00
|
|
|
```html
|
2024-05-11 19:15:12 +00:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/n2geoff/stylelite/dist/stylelite.min.css">
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-11 19:13:59 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
or [Download](https://raw.githubusercontent.com/n2geoff/stylelite/main/dist/stylelite.min.css)
|
|
|
|
|
|
2024-05-11 19:25:34 +00:00
|
|
|
Include Feather Icons
|
2024-05-11 19:13:59 +00:00
|
|
|
|
2024-05-11 19:25:34 +00:00
|
|
|
```html
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css/css/feather.min.css">
|
|
|
|
|
|
|
|
|
|
```
|
2024-05-11 19:13:59 +00:00
|
|
|
|
2024-05-17 21:20:32 +00:00
|
|
|
## 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);
|
|
|
|
|
|
2025-03-22 21:58:40 +00:00
|
|
|
/* Customize Vars / Theme */
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
--theme: steelblue;
|
|
|
|
|
--size: 1rem;
|
|
|
|
|
--radius: 0rem;
|
|
|
|
|
|
|
|
|
|
--fg: #17202A;
|
|
|
|
|
--bg: #FDFEFE;
|
|
|
|
|
--mg: #99A3A4;
|
|
|
|
|
|
|
|
|
|
--white: #FFF;
|
|
|
|
|
--black: #000;
|
|
|
|
|
|
|
|
|
|
--light: #EEE;
|
|
|
|
|
--dark: #222;
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-17 21:20:32 +00:00
|
|
|
/* Add Your Styles Below */
|
|
|
|
|
|
|
|
|
|
```
|
2025-03-22 21:58:40 +00:00
|
|
|
### 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 |
|
2024-05-17 21:20:32 +00:00
|
|
|
|
|
|
|
|
Below are some simple and common examples.
|
|
|
|
|
|
|
|
|
|
### Dark Mode
|
2024-05-11 19:13:59 +00:00
|
|
|
|
|
|
|
|
Add `data-theme="dark"` to the `html` tag for a taste of the dark side
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-17 21:20:32 +00:00
|
|
|
```html
|
|
|
|
|
<html lang="en" data-theme="dark">
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
> 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`
|
|
|
|
|
|
2022-06-15 01:39:33 +00:00
|
|
|
|
|
|
|
|
## LICENSE
|
|
|
|
|
|
|
|
|
|
- [MIT](LICENSE)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## TODO
|
|
|
|
|
|
2023-12-22 20:51:51 +00:00
|
|
|
Keep it small, but immediately useful.
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-17 21:20:32 +00:00
|
|
|
Tweak to hit that SWEET spot:
|
2022-06-15 01:39:33 +00:00
|
|
|
|
2024-05-11 19:25:34 +00:00
|
|
|
- Dark mode use native browser scroll bars/classes
|
2024-05-17 21:20:32 +00:00
|
|
|
- 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
|
