Lightweight CSS framework

Pragmatic CSS for clean static websites, because a little class never hurt nobody.

MiddleClass is a lightweight, classless-first CSS framework for semantic static websites. This page starts with a practical tour of the framework and ends with a separate regression-testing area.

Download 0.4.0 GitHub Repo

Installation

Download the stylesheet, copy it into your project, and serve it alongside your own HTML and other static assets. Keeping a local copy makes the site independent of a CDN and lets you decide when to adopt future MiddleClass updates.

<link rel="stylesheet" href="/assets/middleclass.css">

Link the file from the document head before any project-specific stylesheet that should override its defaults. MiddleClass is plain CSS, so there is no package manager, build step, preprocessor, or JavaScript dependency to install or maintain. Start with semantic HTML, then add the small set of layout and component classes only where they are useful.

Typography and content

Ordinary semantic elements receive readable defaults without component classes.

Unordered list

  • First list item
  • Second list item
  • Third list item

Ordered list

  1. First step
  2. Second step
  3. Third step

Definition list

Term one
A short definition for the first term.
Term two
A short definition for the second term.

Heading scale

A short quotation demonstrates the default blockquote treatment.

Inline code, keyboard input such as Ctrl + S, sample output such as Build complete, highlighted text, and an CSS abbreviation receive useful defaults.

Small text follows the browser's normal semantics, while muted text uses the framework's secondary color.

<article class="reading-width">
	<h1>Example article</h1>
	<p>Readable content with ordinary HTML.</p>
</article>

Layout

The public layout classes handle width, spacing, wrapping, columns, and logical alignment.

Container and reading width

.container centers content within a responsive maximum width. .reading-width limits long-form text without centering it automatically.

Stack

First stacked item
Second stacked item

Cluster

Columns

Column one
Column two

Push end

Start End

Components

MiddleClass adds a small presentation layer where semantic HTML alone cannot express the intended treatment.

Buttons

Outline Secondary outline Documentation

Card

Example card

A card provides a contained surface with padding, a border, and rounded corners.

Continue to forms

Notices

Note: General supporting information.
Success: The operation completed successfully.
Warning: Review this setting before continuing.
Danger: The operation could not be completed.

Disclosure

Show additional information

This is an ordinary block-style disclosure using native details and summary elements.

Dropdowns

The same native disclosure behavior can present an overlaid link list. Alignment and opening direction are explicit modifiers.

End aligned
Start aligned
Opens upward
Start and upward 
:root {
	--mc-chevron-down: var(--mc-chevron-down-font-awesome);
	--mc-dropdown-chevron: var(--mc-chevron-down);
}

Forms

Native fields and controls share consistent sizing, spacing, borders, focus treatment, and disabled states.

Text fields
Choices

Tables

Tables use readable defaults, while .table-wrap provides horizontal scrolling when the content is wider than the viewport.

Example project status
Project Owner Status Updated
Alpha Jordan Complete July 28
Beta Morgan In progress July 30
Gamma Taylor Planned August 2

Layout and rhythm tests

Regression area: The examples below intentionally repeat and combine elements to expose spacing, wrapping, overflow, and component-edge problems. They are tests rather than part of the feature tour.

Document flow

This paragraph comes immediately before a heading.

Heading after a paragraph

The heading's top margin creates stronger separation from the preceding paragraph, while its bottom margin controls the space before this text.

  • Parent item with a nested list
    • First nested item
    • Second nested item
  • Next parent-level item

Heading after a list

The heading's top margin creates the separation after the list.

Rhythm test table
Element Spacing owner
Table Bottom margin

Heading after a table

The heading's top margin creates the separation after the responsive table wrapper.

Visible rhythm is easier to judge when several semantic relationships appear together.

Example figure caption

Heading after a figure

The heading's top margin creates the separation after the figure.

Disclosure used in the rhythm test

The padded disclosure controls the space at its inner edges.

Heading after a disclosure

The heading's top margin creates the separation after the disclosure.

Heading after a form

The heading's top margin creates the separation after the form.

This paragraph follows a thematic break, which intentionally uses equal space above and below.

Padded component edges

The component padding should be the only spacing source at the top and bottom edges.

Card heading

The first and last child margins should not add to the card padding.

Disclosure edge test

The final paragraph should not add extra space below the disclosure padding.

Long content and overflow

This long link should wrap rather than force the page to overflow: https://example.com/releases/middleclass/0.4.0/documentation/very-long-static-site-example

example-command --with-a-very-long-option-name --and-another-long-option=value

Documentation

The repository contains focused guides for the framework's design, API, customization, accessibility, sizing, and spacing policies.