Fiths.js

no more declaring columns

Use Fiths GitHub

Single

Halves

Thirds

Quarters

Fiths

Documentation

Make any block element with the class of "container"
Add as many child block elements with a class of "box"
Fiths.js will automatically discover how many .boxes are inside each .container and add the appropriate classes. These are then streched to the corresponding width and will adjust to screen size accordingly.
The CSS contains a clearfix class. Fiths.js will automatically clear all .container by adding the "clearfix" class.


<section class="container">
    <div class="box">Halves</div>
    <div class="box">Halves</div>
</section>

Halves


<section class="container">
    <div class="box">Fiths</div>
    <div class="box">Fiths</div>
    <div class="box">Fiths</div>
    <div class="box">Fiths</div>
    <div class="box">Fiths</div>
    <div class="box">Fiths</div>
    <div class="box">Fiths</div>
    <div class="box">Fiths</div>
</section>

Fiths

Some Notes

There is another div in my visual examples with a class of "boxcontent" for padding and additional styling (cursive font, padding, min-height, background-color, etc.) inside of each "box". This div is not shown in the code samples. Fiths.js provides the basic framework and width sizing for responsive web design but leaves the rest of a site's styles up to the designer.

Fiths - By: Tyler Savin