minimal, drop-in, classlite css stylesheet

Go to file

Geoff Doty 7b432a13b7 fix table.condensed		2025-03-22 17:43:11 -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	readme	2024-05-17 17:36:44 -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

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 .clear
extras/ supplies pick-and-choose styles to expanded your options
Dynamic, 12 Custom CSS Vars
Includes Light and Dark Themes

Designed to work with default Feather Icons

WARNING: ever-green browsers need only apply ;)

Via jsdelivr CDN

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

Include Feather Icons

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

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);

/* Add Your Styles Below */

Below are some simple and common examples.

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"

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

By default Stylelite is a boxy design, but if you want a rounded design, just set --radius to something. try .4rem

Keep it small, but immediately useful.

Tweak to hit that SWEET spot: