simpliestui

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>

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>

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>

Text

You can customize text appearance using utility classes for size, weight, and font. Sizes range from test-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-font-outfit and text-font-mono. You can also use the aliases for these utility classes, with ts-[size] for text size, tw-[weight] for text weight, tf-[font] for text font and td-[decoration] for text decoration.

<p class="ts-display-small tw-light">Light display small text</p>
<p class="ts-14 tw-700 tf-mono">Bold small monospace</p>

Cards

You can create a card container simply with the .card utility class.

<div class="card">
    <span>Card</span>
</div>

Utils

simpliestui also gives you a bunch of utility classes, designed for convenience and simple workflow:

• <hr/> tags are autostyled for a cool looking separator between sections
• <code> tags are autostyled and can be nested in any tags
• <pre> are also autostyled and can be used by nesting <code> tags to create a pleasant looking code window
• .full-width utility class is a wrapper for width: 100%
• .list-style-none with its alias .lsn can be used on a list parent to disable list style to every children.

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.