MiddleClass

MiddleClass is a lightweight, classless-first CSS framework for semantic static websites. It gives common HTML elements, navigation, forms, tables, and content structures clean, responsive defaults before any component classes are added.

The framework is distributed as one readable CSS file with no build step, package manager, preprocessor, or JavaScript dependency. A small public class API handles common layout and presentation choices that semantic markup cannot express by itself.

MiddleClass can be used for blogs, documentation, landing pages, small business websites, and other content-focused projects, but its primary audience is smaller sites deployed with services such as GitHub Pages or Cloudflare Pages. It works without customization, while projects that need their own design can load an optional style.css after middleclass.css to override variables, element styles, or public classes.

Usage

Copy middleclass.css into your project and link the local file from the document head:

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

Host the stylesheet with your project rather than linking to GitHub, a raw GitHub URL, or the demo site. MiddleClass has no official CDN yet; a supported option may be introduced later through a provider such as Cloudflare, but local hosting is the supported approach for now.

Pages can use semantic HTML alone or add MiddleClass's limited public classes for layout and presentation. This example uses a few of those optional classes:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Example</title>
	<link rel="stylesheet" href="/assets/middleclass.css">
</head>
<body>
	<header>
		<div class="container">
			<nav aria-label="Primary navigation">
				<ul>
					<li><a class="brand" href="/">Example</a></li>
					<li><a href="/about/">About</a></li>
				</ul>
			</nav>
		</div>
	</header>

	<main>
		<div class="container reading-width">
			<h1>Hello, world.</h1>
			<p>MiddleClass handles the foundation while the document remains ordinary HTML.</p>
			<p class="cluster">
				<a class="button" href="/start/">Get started</a>
				<a class="button outline" href="/about/">Learn more</a>
			</p>
		</div>
	</main>

	<footer>
		<div class="container">
			<small>&copy; 2026 Example</small>
		</div>
	</footer>
</body>
</html>

Standard header-main-footer documents use a full-height vertical layout automatically. The main element fills unused space on short pages so the footer reaches the bottom of the viewport, while longer pages continue growing and scrolling normally.

Documentation

The demo site is the quickest way to see MiddleClass styles, public classes, forms, themes, and responsive behavior together. The documents below cover the framework's design, scope, supported API, customization options, and implementation details.

Document	Description
Scope	Defines the framework's intended purpose and development goals, together with explicit boundaries around tooling, JavaScript, utility generation, fonts, icons, routing, and other application concerns.
Architecture	Explains the classless-first model, built-in document layout, why the limited class layer exists, class admission rules, selector strategy, stylesheet organization, public API boundaries, browser expectations, and criteria for evaluating new features.
Classes	Serves as the canonical reference for every supported public class, including its purpose, expected markup, compatible variants, local variables, behavior, limitations, and usage examples.
Navigation	Explains native disclosure navigation, CSS-only dropdown behavior, and when additional site-specific enhancements are appropriate.
Customization	Provides a practical guide to loading site styles, overriding global or scoped variables, changing typography, widths, spacing, colors, themes, component presentation, and testing the result.
CSS variables	Lists the documented customization variables, default values, expected value types, theme-aware color overrides, component-level variables, inheritance behavior, and guidance for extending the variable API.
Spacing	Defines the vertical rhythm model, which elements own external spacing, how layout classes control internal gaps, how padded components trim their edges, and where intentional exceptions apply.
Sizing and units	Explains where and why MiddleClass uses rem, em, px, unitless values, percentages, viewport-aware expressions, and responsive layout units throughout the stylesheet.
Accessibility	Describes the framework's accessibility baseline, the responsibilities that remain with site authors, component-specific considerations, and basic checks for semantics, focus, contrast, forms, and assistive technology.
Browser Support	Defines supported modern browsers, progressive enhancement expectations, accessibility considerations, and compatibility boundaries.
Localization	Explains language and right-to-left layout considerations and separates site-owned translations from the core CSS.
SEO	Distinguishes the core CSS framework from demo-only SEO metadata, documents site-author responsibilities, and explains sitemap and robots.txt choices on GitHub Pages.
Branding	Documents the logo, favicon, colors, SVG geometry, and consistent use of demo branding assets.
Attribution	Explains licensing and attribution for the bundled Font Awesome chevron versus demo-only icons, including the role of notices.md.
Troubleshooting	Helps diagnose common integration problems with stylesheets, spacing, layouts, forms, and dropdowns.
Testing	Provides a manual regression checklist covering layout, forms, responsive behavior, themes, and accessibility.
Releases	Explains pre-1.0 compatibility, maintainer release checks, version updates, and how adopters should upgrade local CSS copies.
Changelog	Summarizes each release so sites can review framework changes before updating their local copy of middleclass.css.
Agent instructions	Defines repository-specific guidance for coding assistants, including project boundaries, documentation, testing, and commit rules.