simpliestui documentation

Introduction

simpliestui is a lightweight, class-based CSS framework designed for simplicity, clarity, and fast development. Inspired by timeless design principles, it provides a clean foundation of styles and utility classes to help developers build responsive, elegant user interfaces—without the complexity of bloated frameworks. Whether you're prototyping or shipping production-ready pages, simpliestui keeps things intuitive and manageable, so you can focus on building, not configuring. No learning curve, just classic styling made easy. Better yet, you can customize the colors just by overriding the default values.

Getting Started

Getting started with simpliestui is fast and effortless. Just drop in the stylesheet and you're ready to build with a clean, minimal design system.

<link rel="stylesheet" href="path/to/simpliestui.css">

Container

Containers, as in many other frameworks, are centered <div> elements with container class that act as the main wrapper for your content. The container has a maximum width of 960px and becomes fluid on smaller screens.

<div class="container">
    <!-- CONTENT -->
</div>

Position

You can set the alignment of your content using the [position|pos]-[left|center|right] utility classes.

<p class="pos-left">Left</p>
<p class="pos-center">Center</p>
<p class="pos-right">Right</p>

Left

Center

Right

Buttons

Buttons are styled with the .btn class and can be extended with variants like primary, secondary, positive, or negative classes to reflect the action's intent.

<a class="btn primary">Download</a>
<a class="btn secondary">Learn more</a>
<a class="btn tertiary">Back</a>
<a class="btn positive">Confirm</a>
<a class="btn negative">Cancel</a>

Download Learn more Back Confirm Cancel

Button tabs are groups of buttons that acts as a action choice for a single concept. Add left, center or right to create your tab.

<a class="btn secondary left">Back</a>
<a class="btn negative center">Delete</a>
<a class="btn positive right">Add</a>

Back Delete Add

Text

You can customize text appearance using utility classes for size, weight, and font. Sizes range from text-size-caption (12px) to text-size-hero-large (128px). Weights range from text-weight-thin (100) to text-weight-black (900). Font families include text-outfit and text-mono.

<p class="text-size-display-small text-weight-light">Light display small text</p>
<p class="text-size-14 text-weight-700 text-mono">Bold small monospace</p>

Text weight

Some text thin 100

Some text extralight 200

Some text light 300

Some text regular 400

Some text medium 500

Some text semibold 600

Some text bold 700

Some text extrabold 800

Some text black 900

Text decoration

Some text underline

Some text wavy

Some text dashed

Text font

Some text outfit

Some text mono

Some text italic

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.

<div class="grid-row">
    <div class="grid-col-4">col 4</div>
    <div class="grid-col-8">col 8</div>
</div>

col 1

col 11

col 2

col 10

col 3

col 9

col 4

col 8

col 5

col 7

col 6

Grid spacings

Grids supports gaps since grids rework. Use grid-spacing-[n] classes to set horizontal and vertical spacing between columns. For example, grid-spacing-2 sets a 2px gap. Correct values for spacing are 2, 4, 8, 12, 16, 24 and 32.

<div class="grid-row grid-spacing-2">
    <div class="grid-col-4">col 4</div>
    <div class="grid-col-4">col 4</div>
    <div class="grid-col-4">col 4</div>
</div>

col 4

Customization

Customizing colors is easy — just modify the css variables defined at the top of the file. For example, change --color-primary to adapt the main accent color across all components.

:root {
    --color-primary: #ff6600;
}

That’s it!

simpliestui is built to be minimal, readable, and fast to use. Extend it, fork it, and style it your way. Happy building.

simpliestui

A classic, easy to handle CSS framework / design system