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
102 Commits 1 Branch 1 Tag 201 KiB
CSS 92.8%
JavaScript 7.2%
Go to file
Geoff Doty 5b4fe61557 dist 2026-01-25 14:56:50 -05:00
dist dist 2026-01-25 14:56:50 -05:00
examples --theme support returns 2026-01-25 14:53:16 -05:00
src --theme support returns 2026-01-25 14:53:16 -05: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 --theme support returns 2026-01-25 14:53:16 -05:00
package-lock.json new stylelite, simpiler, smaller, powerful 2026-01-25 11:23:38 -05:00
package.json new stylelite, simpiler, smaller, powerful 2026-01-25 11:23:38 -05:00

README.md

Stylelite CSS

Styles that work for you

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

All in 2kb gzipped!

Features

  • Tiny, 2kb

  • Classlite

  • Few Layout Utility Classes

    • .container, .grid, .group, .center...

  • extras/ supplies pick-and-choose styles to expanded your options

  • Dynamic, 9 Custom CSS Vars

  • Includes Light and Dark Themes (data-theme="light")

Designed to work with default Feather Icons

WARNING: ever-green, CSS3 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 {
  /* for native web look */
  --primary: #0000FF; 
  --radius: 0rem;
  ...
}
...

Avaliable Vars

Var Default Description
--primary #5499C7 theme color (overwritten by --theme)
--secondary #404040 contrast color
--size 1rem a universal size, margin, font-size, ect...
--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

--theme is an ignored color setting unless a user sets

Themes

Default theme based on steelblue, but CREATE YOUR OWN


[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 lang="en" data-theme="dark">

DEFAULT: data-theme="light"

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