geoff
/
stylelite
mirror of https://github.com/n2geoff/stylelite.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
minimal, drop-in, classlite css stylesheet
91 Commits 1 Branch 0 Tags 163 KiB
CSS 93.1%
JavaScript 6.9%
Go to file
Geoff Doty 67b091814c update readme 2025-03-22 17:58:40 -04:00
dist dist 2024-07-20 17:57:01 -04:00
examples theme-toggle component for example 2025-03-22 17:31:00 -04:00
src fix table.condensed 2025-03-22 17:43:11 -04:00
.gitignore add example 2022-06-26 14:28:44 -04:00
LICENSE update license 2024-01-18 20:19:07 -06:00
README.md update readme 2025-03-22 17:58:40 -04:00
package-lock.json first build 2022-06-14 21:38:32 -04:00
package.json dist 2024-07-20 17:57:01 -04:00

README.md

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

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

WARNING: ever-green browsers need only apply ;)

Get Started

Via jsdelivr CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/n2geoff/stylelite/dist/stylelite.min.css">

or Download

Include Feather Icons

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css/css/feather.min.css">

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

@import url(stylelite);

/* Customize Vars / Theme */

:root {
    --theme: steelblue;
    --size: 1rem;
    --radius: 0rem;

    --fg: #17202A;
    --bg: #FDFEFE;
    --mg: #99A3A4;

    --white: #FFF;
    --black: #000;

    --light: #EEE;
    --dark: #222;
}

/* Add Your 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 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

: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

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