98's Mini CSS Framework

I didn't want to use a bloated CSS framework full of things I was never going to use just for arranging content in columns and making it collapse on small screens so I made my own.

I add features as I need them, don't expect this to contain everything you need, it only has all I need.

Download

To download the latest version click here and press CTRL+S.

Features

Very small, version 1.0 is only 1.52KB uncompressed.
Reasonable default values for fonts, colors, sizes, paddings and margins.
Can arrange content in up to 12 columns and collapse them if the screen is too small.
No bloat, icon fonts and similar things not included, include them yourself if you really need them.
Mobile first, looks good if media queries are not supported (Internet Explorer 8, Dillo, etc.).
Helps you write code that is viewable with any web browser (even when CSS is disabled).

Documentation

To include this CSS just download the framework and add the following line to your document head:

<link href="style.css" rel="stylesheet" type="text/css" media="all">

Most of the time you will be writing regular HTML, you don't need to add extra classes. Example:

<h1>This is a title</h1>
<p>This is a paragraph and <code>this is a code tag</code>.</p>
<ul><li>This is a list</li></ul>

It is recommended that you add the following code to your head section:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

If you don't care about Internet Explorer you can omit the first line.

To use columns the classes col-1 through col-12 are available. They should all be wrapped around an element with the row class assigned, example:

<div class="row">
  <div class="col-3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col-3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col-6"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
</div>

The previous code looks like this:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.