Minima.css

A minimal, semantic, classless CSS framework, inspired by Pico.css, for quick and beautiful webpage styling.

One CSS file and your semantic HTML is instantly elevated with modern design and best UI design practices. No classes, no configuration, no hassle.

Getting Started

Include Minima in your HTML and you're done:

Via CDN

<link rel="stylesheet" href="https://cdn.statically.io/gh/cealigbe/minimacss@main/minima.css">

Via Local File

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

That's it! Your HTML elements are now beautifully styled with zero effort.

Color Palette

Minima uses a clean, modern color scheme that's easy to customize and extend:

Primary #0099ff

Secondary #204060

Tertiary #ffcc00

Contrast #333333

Error #cc3333

Success #66cc33

Typography

Minima has a harmonious type scale with optimal line heights and clear spacing.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph. It has text with bold text, italic text, and links that look great. You can also use inline code and Cmd + K keyboard shortcuts, with great styling.

Blockquotes are styled with a left border. Perfect for pulling out and highlighting quotes or important information.

Minima also has great styling for advance text elements:

Highlighted text stands out
~~Deleted text~~ shows removals
Inserted text shows additions
HTML with abbreviations

Lists

Unordered List

First item
Second item
Third item with nested list:
- Nested item 1
- Nested item 2

Ordered List

First step
Second step
Third step

Definition List

Classless CSS: A CSS framework that styles semantic HTML without requiring classes.
Semantic HTML: HTML that uses tags that convey meaning and structure to browsers, screen readers, and end users.

Images

Images and figures have minimal styling to make them elevated and responsive.

blurred image — This is a figure with an image.

Buttons

Multiple button styles with minimal markup:

Forms

All form elements are automatically styled with proper focus states and validation:

Input Types

Radio Buttons & Checkboxes

Choose your preference Option A Option B Option C

Check all that apply Item A Item B Item C

Switch Toggle

Enable notifications Dark mode

Tables

Clean tables with alternating rows, no extra markup needed:

Sample Data Table
Name	Email	Role
Alice Johnson	alice@example.com	Developer
Bob Smith	bob@example.com	Designer
Carol Williams	carol@example.com	Manager
David Brown	david@example.com	Developer

Interactive Elements

Details & Summary

Click to expand

This content is hidden by default and can be toggled open and closed. Perfect for FAQs, accordions, or hiding supplementary information.

Already expanded

This one starts open. The icons change to reflect the open or closed state.

Progress Bars

Loading progress: Indeterminate progress:

Meter

Disk usage (70%):

Code Blocks

Code examples are styled with monospace fonts:

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('World'));

Dialog

Modern dialog elements with backdrop blur:

Layout Utilities

Optional utility classes for common layouts:

Grid Columns

Column 1

Column 2

Column 3

Aside Elements

Article with Aside

Articles can contain aside elements that are automatically styled with a distinct background:

The main content continues after the aside with proper spacing. Minima also has layout classes to place the aside to the left or right of the main content.