Under 380B gzip. Pure HTML5 + CSS3. No JavaScript.

c2.css is the smallest known responsive CSS UI framework.

c2.css is smaller than the known public size leaders while still covering navbars, rows, grids, cards, buttons, forms, tables, code blocks, quotes, highlights, video, responsive media, and native light/dark mode.

Install See examples Buy me a coffee Kitchen-sink demo

Copy The Whole Framework

The complete record build is small enough to paste directly. Current verified size: 628B raw, 378B gzip, 286B Brotli.

:root{color-scheme:light dark}body,.c{max-width:70ch;margin:auto;padding:1em}body{font:1em/1.5 system-ui}img,video,svg{max-width:100%}button,input,select,textarea,.b{font:inherit;padding:.5em}button,.b,.k,pre{border:1px solid;border-radius:.5em}.b{display:inline-block;text-decoration:none}.p{background:CanvasText;color:Canvas}.r,.g{display:flex;gap:1em;flex-wrap:wrap}.g>*{flex:1 12em}.y>*+*{margin-top:1em}.k,pre{padding:1em}pre{overflow:auto}table{width:100%;border-spacing:0}th,td{border-bottom:1px solid;padding:.3em}.w{width:100%;box-sizing:border-box}blockquote{border-left:3px solid;padding-left:1em}mark{padding:.1em}

Install snippet MIT license and docs Support Code2care

Philosophy

The Browser Is The Framework

HTML already ships buttons, forms, tables, media, disclosure, progress, and dialog primitives. c2.css styles the gaps instead of rebuilding the platform.

Bytes Are Product Design

Every selector and declaration must earn its place. Small CSS is not just performance work; it is a product constraint that keeps the API focused.

Native First, Custom Last

Controls should keep platform behavior, accessibility, and user expectations. c2.css improves rhythm, spacing, and structure without faking widgets.

Readable Without A Build Step

No compiler, config, token pipeline, plugin chain, JavaScript runtime, or generated utility layer. Link the file and write HTML.

The goal is not to make a tiny Bootstrap. The goal is to prove that good native interfaces can be measured in bytes.

Record Ranking

197B gzip

c2.200.css is the extreme component build.

378B gzip

c2.css is the full micro-framework build used by this page.

0KB JS

No runtime, dependencies, reset, fonts, images, or build step.

Rank	Framework	Claim	Notes
1	`c2.css`	378B gzip	responsive UI core and native dark mode
2	lit	395B gzip	responsive grid, cards, forms, tables
3	bitty-css	793B gzip	classless CSS
4	min	995B	small CSS framework
5	browser.style	~1KB Brotli	native/system-color direction

Verified Sizes

Build	Raw	gzip	Brotli
`c2.nano.css`	187B	164B	121B
`c2.200.css`	236B	197B	162B
`c2.css`	628B	378B	286B

./size.sh

Included Features

Under 380B gzip still covers the patterns most small sites and docs actually need.

Navbar

Use semantic header, nav, and r.

Responsive Grid

g creates wrapping equal-width columns.

Cards

k creates thin bordered panels.

Buttons

Native buttons and button-like links with b.

Primary Actions

p uses system colors for contrast.

Forms

Inputs, selects, textareas, radios, and checkboxes inherit cleanly.

Tables

Full-width tables with simple row separators.

Code Blocks

Scrollable, bordered pre blocks.

Quotes

Styled blockquote callouts.

Highlights

Marked text gets compact padding.

Video

Responsive video elements without wrappers.

Dark Mode

Native light/dark mode through color-scheme.

GitHub Pages Ready

This repo is static. Push it to GitHub, enable Pages from the repository root, and index.html becomes the website.

1. Push

git init
git add .
git commit -m "Launch c2.css"
git branch -M main
git remote add origin https://github.com/<owner>/c2.css.git
git push -u origin main

2. Enable Pages

GitHub repo settings, Pages, deploy from branch, root.

3. Keep Icons Inline

The page uses inline SVG icons. No icon font, image file, or extra request is needed.

Choose A Build

c2.nano.css

187B raw. Native nucleus for mostly semantic HTML pages.

<link rel="stylesheet" href="c2.nano.css">

c2.200.css

197B gzip. Component-oriented build for harsh byte ceilings.

<link rel="stylesheet" href="c2.200.css">

c2.css

378B gzip. The full micro-framework core.

<link rel="stylesheet" href="c2.css">

Install

Use the record build for the best coverage-to-byte ratio.

<link rel="stylesheet" href="c2.css">

Then write normal HTML with byte-coded primitives.

<main class="c y">
  <section class="k y">
    <h1>Ship smaller interfaces</h1>
    <p>Native, fast, readable.</p>
    <p class="r">
      <a class="b p" href="/start">Start</a>
      <a class="b" href="/demo">Demo</a>
    </p>
  </section>
</main>

Byte API

Class	Meaning	CSS behavior
`c`	container	readable width, centered, padded
`r`	row	flex row with wrapping and gap
`g`	grid	responsive equal-width columns
`y`	stack	vertical rhythm between children
`k`	card	padding, thin border, radius
`b`	button	button-like link styling
`p`	primary	system-color inverted action
`w`	wide	full-width field/media helper

Full c2.css Code

The complete record build is small enough to read in one block.

:root{color-scheme:light dark}
body,.c{max-width:70ch;margin:auto;padding:1em}
body{font:1em/1.5 system-ui}
img,video,svg{max-width:100%}
button,input,select,textarea,.b{font:inherit;padding:.5em}
button,.b,.k,pre{border:1px solid;border-radius:.5em}
.b{display:inline-block;text-decoration:none}
.p{background:CanvasText;color:Canvas}
.r,.g{display:flex;gap:1em;flex-wrap:wrap}
.g>*{flex:1 12em}
.y>*+*{margin-top:1em}
.k,pre{padding:1em}
pre{overflow:auto}
table{width:100%;border-spacing:0}
th,td{border-bottom:1px solid;padding:.3em}
.w{width:100%;box-sizing:border-box}
blockquote{border-left:3px solid;padding-left:1em}
mark{padding:.1em}

How It Works

Rule	Why it exists
`color-scheme`	native light/dark page and form control behavior
`body,.c`	readable default page width and reusable container
`font:1em/1.5 system-ui`	compact typography in one declaration
`img,video,svg`	responsive media without wrappers
`button,input...`	forms and button-like links align visually
`.r,.g`	one flex primitive powers nav, actions, and grid
`.k,pre`	cards and code blocks share border/padding behavior
`table/th/td`	tables look deliberate without a full table system
`blockquote`	quote/callout styling in one small rule
`mark`	compact highlighted text

Component Examples

Navbar

Brand

<header class="r">
  <strong>Brand</strong>
  <nav class="r">
    <a href="/">Home</a>
    <a href="/docs">Docs</a>
  </nav>
</header>

Row / Toolbar

<p class="r">
  <button>Save</button>
  <button>Preview</button>
  <a class="b" href="/">Share</a>
</p>

Container + Stack

Visual

This panel is a card inside the normal readable page container.

Stack spacing comes from y.

<main class="c y">
  <section class="k y">
    <h2>Title</h2>
    <p>Content</p>
  </section>
</main>

Grid + Cards

One

Responsive column.

Two

Same primitive.

Three

Columns wrap naturally.

<div class="g">
  <article class="k">One</article>
  <article class="k">Two</article>
  <article class="k">Three</article>
</div>

Buttons

Primary link Secondary link

<p class="r">
  <a class="b p" href="/">Primary</a>
  <a class="b" href="/">Secondary</a>
  <button>Button</button>
</p>

Form

<form class="k y">
  <label>Email
    <input class="w" type="email">
  </label>
  <label>Message
    <textarea class="w"></textarea>
  </label>
  <button class="p">Send</button>
</form>

Table

Build	gzip
`c2.200.css`	197B
`c2.css`	378B

<table>
  <tr><th>Build</th><th>gzip</th></tr>
  <tr><td>c2.css</td><td>378B</td></tr>
</table>

Responsive Media

<svg viewBox="0 0 640 220">
  ...
</svg>

<video class="w" controls></video>
<img class="w" src="image.jpg" alt="">

Quote + Highlight

Small can still feel complete when HTML does most of the work.

<blockquote>
  Small can still feel <mark>complete</mark>.
</blockquote>

Code Block

npm install nothing
ship bytes, not bundles

<pre><code>
npm install nothing
ship bytes, not bundles
</code></pre>

Native Components

Details

Native disclosure with no script.

72% 7

<details class="k">
  <summary>Details</summary>
  <p>Native disclosure.</p>
</details>
<progress class="w" max="100" value="72"></progress>
<meter class="w" min="0" max="10" value="7"></meter>

Use It For

Docs

Readable pages, examples, code samples, tables, and forms.

Landing Pages

Fast one-page sites where content matters more than decoration.

Prototypes

Interfaces that look deliberate while preserving native behavior.

Open kitchen-sink demo Read README