============
CSS-Sections
============

Disclaimer
==========

This is just some code I've been using to create grids. It works for me and I
keep this code in a repository online for my own convenience.

The 960 Grid System (http://960.gs/) et al. is probably what you want to use.

Introduction
============

`CSS-Sections` is CSS grids in disguise.

The philosophy behind `CSS-Sections` is a simple one: a section container
(`.sections`) can fit a number of sections (`.section`). More important
sections can claim additional "weight" but will as such reduce the amount of
"weight" available to other, less significant, sections.

The "weight" the different sections claim is translated into `width` when the
CSS file included in this repository is applied.

A section container can display 12 sections of regular weight horizontally.

The following weight-changing CSS classes are defined (yes, trying to come up
with more memorable names):

* `.doubleweight` (takes up double the space of a regular section)
* `.tripleweight` (dito but triple the space)
* `.quadweight` (dito but four times the space)
* `.quinweight` (dito but five times the space)
* `.hexweight` (dito but six times the space)
* `.septweight` (dito but seven times the space)
* `.octweight` (dito but eight times the space)
* `.nonweight` (dito but nine times the space)
* `.decweight` (dito but ten times the space)
* `.undecweight` (dito but eleven times the space)

Use basic addition to calculate the number of sections of varying weights a
container can take::

    quadweight + quadweight + quadweight = 4 + 4 + 4 = 12
    doubleweight + decweight = 2 + 10 = 12
    tripleweight + tripleweight + tripleweight = 3 + 3 + 3 = 12

Usage
=====

Just link the included stylesheet (`sections.css`) (or copy-paste it's contents
into your own stylesheet) and add proper classes to your elements::

    <div class="sections">
        <div class="section hexweight">Section</div>
        <div class="section hexweight">Section</div>
    </div>

See ``example/index.html`` for more examples.