util

util is a library made with atomic css principles, designed to extend other frameworks. This site is built only with lit and util.

Any other thoughts? Head to the Github repository and make an issue! If you like this idea, don't forget to

Star

Utilities

For now, use the "view source" functionality of your browser as documentation

Spacing Colors Misc

Spacing

Util uses a simple spacing system inspired by the likes of BassCSS and Tachyons.

ph2 pv2

In this example, p means padding (m means margin), h means horizontal while v means vertical, and the number at the end is the level. Levels go from 0-4.

ml1 mt2

This example shows off margins. For the middle selector, you use t (top), b (bottom), l (left), and r (right) to say which direction you want the margin. Margin does not have v or h as directions.

p2 m2

If you want something on all sides, just do the above, with type then level.

Colors

Text Colors

accent info success warning error black white gray

Background Colors

bg-accent

bg-info

bg-success

bg-warning

bg-error

bg-black

bg-white

bg-gray

Border Colors

b-accent

b-info

b-success

b-warning

b-error

b-black

b-white

b-gray

Misc

Components

For now, use the "view source" functionality of your browser as documentation

Buttons Alerts Navbar Badges Full Page Landing

Buttons

Basic Buttons

Ghost Buttons

Rounded Buttons

Pill Buttons

Alerts

Oh no!

This is an example of an error alert

This is an example of a warning alert

Badges

Heading Badge New

List Groups

Some item that is long

Some item

Some item, that exists

Selected Item