Huh... ?

Base12 is a framework that provides you with a basic SCSS folder structure for your projects. Its measurements are built around the number 12 for increased flexibility & math goodies.

Because Base12 uses the starting CSS from the HTML5 Boilerplate, it can be used in combination with it.

How do I use it?

  1. Start a new project with the Classic H5BP
  2. Replace the css folder with Base12's
  3. Tweak your preprocessor
  4. Code away!

Download v0.6.2-beta

Download Base12

Base12, A Different Approach to Numbers

The most important aspect of Base12 is that it's measurements are based on the number 12. Because 12 has a wide range of divisors (1, 2, 3, 4, 6 & 12), it makes it very easy to get a wide variety of sub-measurements while keeping some rhythm in your design.

In this aspect, Base12 is more of a design philosophy. By using multiples/divisors of 12 across our design, we ensure that our numbers are not random but follow some rules. This can make a huge difference when thinking in terms of a baseline and vertical rhythm.