Tiny Fibonacci CSS Framework By Jean-Charles Nadé

What happen if we use Fibonacci number for our css layout? Maybe 377 pixel and 13px as padding-top will looks better that arbitrary base 10 number like 350 and 10. Fibonacci.css provide shortcut for Fibonacci number for padding, margin, with and height. It's compatible with other grid system or framework like bootstrap.

Usage

<div class="w12 h11 p5 ml4" >
    This boxBox is 233px width, 144px height, 13px for padding and 5px as margin-left.
</div>

Shortcut:

• w = width
• h = height
• p = padding
• m = margin
• pl = padding-left
• pr = padding-right
• pb = padding-bottom
• pt = padding-top
• ml = margin-left
• mr = margin-right
• mb = margin-bottom
• mt = margin-top

Example:

• m1 = margin at 1px
• m2 = margin at 2px
• m3 = margin at 3px
• m4 = margin at 5px
• m5 = margin at 8px
• m6 = margin at 13px
• m7 = margin at 21px
• m8 = margin at 34px
• m9 = margin at 55px
• m10 = margin at 89px