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
94 Commits 1 Branch 0 Tags 143 KiB
CSS 93%
JavaScript 7%
Go to file
Geoff Doty 0aa4f9896a fix label 2025-04-06 20:15:17 -04:00
dist fix label 2025-04-06 20:15:17 -04:00
examples theme-toggle component for example 2025-03-22 17:31:00 -04:00
src fix label 2025-04-06 20:15:17 -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 readme tweak 2025-03-22 18:04:17 -04:00
package-lock.json release canidate 2025-03-22 18:01:48 -04:00
package.json release canidate 2025-03-22 18:01:48 -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 */

: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 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