Overview

DIV is not the only tag available to your designs. Mimic traditional .container class by just using a MAIN tag, which by default centers your content to an 1140 width.

Need to divide major sections of your code, eh...use SECTION tag. Need little extra content flair, wrap in an ARTICLE tag.

Use AS-IS or Customize

Typography

The alternative to good design is always bad design. there is no such thing as no design. Simplicity carried to an extreme, becomes elegance. -- Adam Judge

P Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu, eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante, id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

STRONG Generated 1 paragraph, 52 words, 354 bytes of Lorem Ipsum

H1 Heading...

H2 Heading...

H3 Heading...

H4 Heading...

H5 Heading...
H6 Heading...

P can simply be a paragraph

A can be a link

STRONG can be bold

U can be underlined

EM can be emphasized

SMALL can be small

CODE can be code

HR
IMG
Example image

Lists

UL
  • LIList Item
  • LIList Item
  • LIList Item
  • LIList Item
OL
  1. LIList Item
  2. LIList Item
  3. LIList Item
  4. LIList Item

Forms

Details Summary
Default details and summary behavior. wrap content in tag, like div

Buttons

Tables

One Two There
Data Data Data
Data Data Data
Data Data Data

Components

These are native UI components that typically do not have any style

Dialogs
A native modal UI element exists as dialog and is supported with a little javascript.

SEE: MDN Documentation

More...
More...

Default Dialog Modal

Misc Utility Classes

.grid a display:grid layout helper, that acts a lot like .row but without the column control
.group really just display:flex however used on input groups provides form element designs

Customize

/extras provides some useful styles that complement Stylelite and have been removed to keep it focused closer to a classless css solution -- and smaller.

NOTE: Some extras exist in Stylelite, but are also useful in isolation

CSS Variables

Variable Description Default
--theme (color) Designing a site around a theme color, set here steelblue
--radius Prefer rounded-corners, try .4rem 0rem

Dark Mode

Add data-theme="dark" to your html tag

Colors

Customize with your own styles or some examples available extras like

Bootstrap-inspired color classes found in extras/colors.css