Minimal-UI

Minimalist CSS framework for rapid prototyping by s17 Labs.

Get Started

Minimal-UI is a zero-dependency CSS framework — no build step, no npm, no config. Add one <link> tag to your HTML and every component is ready to use. Works with plain HTML files, any backend, or any frontend framework.

1. Link the stylesheet

The only required step. Paste this into your <head>:

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/s17labs/minimal-ui@latest/minimal-ui.css">

2. Add the Aldrich font

Required for headings and the brand typeface:

<link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap"
      rel="stylesheet">

3. Start building

That's it. You now have access to every component — buttons, forms, cards, navbar, tooltips, accordion, footer variants, and more. Browse the Components section below to see everything available.

Optional — Font Awesome icons

Many examples in these docs use Font Awesome icons. Not required by the framework itself — only needed if you use <i class="fa-..."> in your markup.

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">

Optional — s17 Labs brand icon

Use the red square brand mark in any project header or footer via CDN — no file to copy or download:

<img class="brand-cube"
     src="https://cdn.jsdelivr.net/gh/s17labs/minimal-ui@latest/s17-icon.svg"
     alt="s17 Labs">

Alternatively, copy s17-icon.svg from the repo into your project and reference it locally. The .brand-cube class handles sizing and alignment automatically.

Optional — Navbar hamburger JS

The navbar is fully CSS-based except for the mobile hamburger toggle. Add this before your closing </body> tag — it's the only JS the framework ever needs:

<script>
  document.getElementById('nav-toggle')
    .addEventListener('click', () => {
      document.getElementById('nav-menu').classList.toggle('open');
      document.getElementById('nav-toggle').classList.toggle('open');
    });
</script>

The open class on #nav-menu reveals the mobile dropdown. The open class on #nav-toggle animates the three bars into an ✕ close icon.

Pin a specific version

Replace @latest with a release tag like @v0.2.0 to lock your project to a specific version and avoid unexpected changes from future updates.

Components

Typography

Heading 1 / h1

Heading 2 / h2

Heading 3

Standard paragraph — --mu-text-muted color. Highly readable against dark backgrounds while maintaining a clean typographic hierarchy.

.text-main .text-muted .text-accent .text-sm .text-lg .text-bold .uppercase .font-mono

Buttons

All variants and sizes, composable with each other. Works identically on <button> and <a>.

Variants

Sizes

Icon Buttons

Full width (inside .mobile-col)

Links

Default Link Muted Link Accent Link Ghost Link

Forms

First Name

Last Name

Framework

Message

Input Group

Checkboxes

Accept terms Marketing emails Disabled

Radios

Option A Option B Disabled

Toggles

Enabled Off Disabled

Badges

Default Accent Muted Outline Live Draft GitHub

Alerts

Heads up

Default alert for neutral notices and informational messages.

Action required

Accent alert for important messages that require user attention.

Code

Use .btn-accent for primary actions and .btn-outline for secondary CTAs.

/* Import Minimal-UI */
@import url('minimal-ui.css');

/* Use components */
<button class="btn btn-accent">
   Click me
</button>

Dividers

Standard divider:

Labelled divider:

or continue with

Grid

.grid-2

Col 1

Col 2

.grid-3

Col 1

Col 2

Col 3

Surfaces

.surface

Subtle transparent fill, no border.

.surface-raised

Elevated with border — good for cards.

Cards

Feature Card

Cards use a subtle background to group related content. Combine with badges, buttons, and grid for layout blocks.

New v0.2.0

Interactive Lists

Project Alpha Live

Hover to see the accent gradient slide-in effect.

Project Beta

Composable with badges, text utilities, and more.

Navbar

One line of JS required for the hamburger menu

Everything else is pure CSS. For the mobile hamburger toggle, see the Get Started section — it's a single addEventListener call.

Static Brand only + actions

Tooltips

Add data-tooltip="..." to any element. No JS required.

v0.2.0

Accordion

Default

What is Minimal-UI?

Minimal-UI is a lightweight CSS framework built for rapid prototyping, designed with the s17 Labs dark aesthetic in mind.

How do I install it?

Link the CDN stylesheet in your HTML head — no build step or npm install required. Works with any plain HTML file.

Does it require JavaScript?

Almost nothing requires JS. The accordion uses native <details>, tooltips are pure CSS, and form controls use :has(). Only the navbar hamburger needs a one-liner toggle.

.accordion-flush

Can I use this in commercial projects?

Yes — Minimal-UI is open source. Check the repository for the full license details.

How do I customize the colors?

Override any CSS variable from :root in your own stylesheet. Every color, radius, and spacing value is a variable.

Footer Variants

.footer.footer-minimal .footer.footer-solid .footer.footer-gradient .footer.footer-flush