Skip to content

n2geoff/stylelite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

/* Add Your Styles Below */

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

About

minimal, drop-in, classlite css stylesheet

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages