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

Lists

UL

LIList Item
LIList Item
LIList Item
LIList Item

OL

LIList Item
LIList Item
LIList Item
LIList Item

Forms

Details Summary

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

User id (read only)

Password

Random disabled input

Preferred theme

About me

Remember Me

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

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`
	There are 11 variables, 8 are neutral color variations

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