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.
For better impression of what it can do, please see the demo.
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.
Loosely based on Modernscale, somewhat simplified.
Headings are styled up to H3.
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).
Three classes are responsible for controlling element visibility:
hide- hide the element both on desktop and mobile;mob-hide- hide the element on mobile while leaving it on desktop;mob-only- show the element on mobile only and hide it on desktop.
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.
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.
Should run on anything that supports rem units and @media queries.