A barebones CSS framework in 999 bytes

Looking for some ready CSS library under 1K to scaffold your markup on? Look no further.

999.css weighs 999 bytes minified (with devilo.us), and just 512 bytes gzipped.

How to obtain

Download it here or include it right into your HTML:

<link rel=stylesheet href="//cdn.rawgit.com/plugnburn/0eea0b4ceb08c270efa6/raw/486682dbae8f05eef738bef3d6d7f69fcabcd048/999.min.css">


Originally started under “fungrid” name, 999.css borrows some ideas from different libraries like Ungrid, Gridism, Min.css, PocketGrid and Modernscale project, and combines them with own style to make a small and efficient tool.

For those of you who don't want to read much and want to get started faster, there's a cheat sheet just to the left of the page. But I'd advise to better take some time reading all the page to get more complete answers to your possible questions.


Loosely based on Modernscale, somewhat simplified.

Just override html element font-size and font-family properties and watch the magic unfold. For monospace fonts, though, you'll have to modify the rules separately.

Default settings are:

html {font-size:17px;font-family:Roboto,arial,sans-serif}
code,pre{font-size:0.9rem;font-family:"Droid Sans Mono",monospace}


Mobile-first with a single breakpoint at 700px. The single class, fr, denotes a grid row. Any direct descendant of an fr-enabled element is a column. You can add as many columns as you like, and they are evenly auto-sized by default.

You can force a column width either with an inline style attribute, or with external CSS. However, 999.css has two classes for two special cases: gsl for larger golden section part and gss for smaller golden section part.

On mobile, all columns become just fluid 100%-wide blocks independent on their declared width (you’ll probably not want to use inline styles for this case).

You can nest the grid rows as much as you want as long as you keep the correct ierarchy (i.e. you can’t put a row directly inside another row, you must put a column first).

Element visibility control

Three classes are responsible for controlling element visibility:


A simple container box is supported with box class. By default, it’s padded 2.5 rems from left and right and 1 rem from up and down. Feel free to customize the padding according to your needs. Note that 999.css already sets border-box as the default sizing model for everything.

If you don’t need the padding on a particular container, just append nopad class.

Color scheme

999.css offers a very basic color scheme customization that allows you to provide just two colors - text and background - for two themes - main and inverted.

The fcolor-main class is responsible for main theme, fcolor-inv is responsible for inverted theme. Set one of them to any block to apply an appropriate coloring.

By default, fcolor-main provides #222 text on #ddd background, and fcolor-inv provides the opposite. Of course, you can (and generally should) override these classes however you want.

Browser support

Should run on anything that supports rem units and @media queries.

Where is the demo?

You're looking at it!