Overview

DIV is not the only tag available to your designs. Stylelite mimics traditional .container class by just using a MAIN tag, which by default centers your content to an 1140px 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

KBD acts like a tag

SMALL can be small

CODE can be code

IMG

HR

Buttons

button can be customize by applying a color class.

Link

Navigation

nav provides a convenient way to build navigation systems using ul and li. Internally elements nav divide, so you can put an empty div before the ul to make the nav on the right side or div on both sides to center

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

Tables

TABLE is clean by default

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

Dark Mode

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

Custom Theme

Create a custom theme by overriding variables in :root stylesheet

Variable	Description	Default
`--primary`	Designing a site around primary theme color, set here	`#5499C7`
`--radius`	Prefer rounded-corners, try `.4rem`	`.3rem`

Utilities

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