simpliestui

A classic, simple design system with classes

Project page

Containers

container is the main class of simpliestui. Insert it in a div to get an adaptative centered surface.

<div class="container">
    <!-- content -->
<div>

Text

`text-font-* tf-*`

Some text tf-title

Some text tf-body

Some text tf-mono

`text-decoration-* td-*`

Some text td-none

Some text td-under

Some text td-dash

Some text td-wavy

Some text td-dot

Some text td-over

Some text td-double

`text-weight-* tw-*`

Some text tw-thin

Some text tw-light

Some text tw-regular

Some text tw-bold

Some text tw-black

`text-size-* ts-*`

Some text ts-caption

Some text ts-body

Some text ts-medium

Some text ts-display

Some text ts-hero

Some text ts-huge

`text-color-* tc-*`

Some text tc-default

Some text tc-dark

Some text tc-light

Some text tc-primary

Some text tc-secondary

Some text tc-tertiary

Some text tc-positive

Some text tc-warning

Some text tc-negative

Buttons

Link Cancel Disabled Create Update Delete

Left Center Right

Forms

Tables

Table header	Cell header 1	Cell header 2
Cell 1	Cell 2	Cell 3
Table footer	Cell header 1	Cell 2

Cards

Create a "card container" with card class.

You can also create an elevated card with card elevated

You can alternatively create a "big card" with card big to compensate buttons and forms border-radiuses (like the one this text is in)

This button looks good within its card

Grids

Create flexible layouts using a 12-column grid. Wrap columns in a grid-row and use grid-col-[n] classes (1 to 12) for widths. On mobile, columns stack vertically by default.

grid-col-12

grid-col-6

grid-col-4

grid-col-3

grid-col-2

Modals

Utils

Inline code `<code>Some inline code</code>`

Some inline code

Block of code `<pre><code>A block of code</code></pre>`

A block of code

Horizontal rule `<hr>`

Horizontal rules are used to split blocks of elements. You can also give it a .separator class to make a physical line between them.