Golden ratio grid system in Sass

One of the most exciting and fun features that we implemented for our styling library was the grid system.

Our design team came up with the idea of using a golden ratio grid system, where they provide the proportions for the columns and we transform them into HTML/CSS columns.

What is the golden ratio?

For those who don’t know what the golden ratio is, the definition given by LiveScience is:

The Golden ratio is a special number found by dividing a line into two parts so that the longer part divided by the smaller part is also equal to the whole length divided by the longer part.

The result of that is a constant (represented by the greek letter phi — φ):

where φ = a+b/a = a/b = 1.6180…

The Greek mathematicians started investigating what we know today as the golden ratio about 2,400 years ago due to its frequent appearances in geometry. Since then, this magic number has fascinated many great minds throughout history (Euclid, Pythagoras, Fibonacci, etc).

One of the most interesting discoveries about the golden ratio is the fact that it can be found in the most diversified and surprising domains of the nature, beginning with the simple flower petals, shells, up to the human body and… galaxies. You can read more about the occurences of the golden ratio in nature by clicking this link

Although there isn’t a definitive proof that this ratio is perceived as “natural” by our brains, the usage of golden ratio emerged in various fields like:

Lately, we have started seeing this “magic ratio” emerging more and more in UI design, the most common use being the golden ratio font sizes, but also as a grid system, like the one we have built for Funding Circle’s website.

Golden ratio grid system

Requirements

Before implementing the new styling library we used a 3rd party solution for the grid system which served the purpose but also had some drawbacks:

you had to use an admin panel to generate the CSS/Sass so it interrupted the workflow

it exported a lot of CSS — every usage resulted in repeated code

it was class-name dependent

Therefore, we wanted to build a custom grid system for Funding Circle which would be:

easy to use

optimised for our problem

applicable to a parent element, so that the columns do not require specific classes

easy to maintain or change into a different grid system in the future

Geometry and formula

So, before diving into writing the Sass for this, we first needed to understand the math/geometry behind this.

This is an example of a golden spiral:

If we stretch that spiral into a line, the result can be translated into our grid system:

And the math would be:

c1 / c0 = φ
c2 / c1 = φ
……………………………
cn / cn-1 = φ

By using the pattern above and always replacing the cn with cn-1 × φ, we end up with the following formula:

Since we don’t have a defining scale for this and because everything will be turned into percentages anyway, we can arbitrarily set c0 to a convenient value, like 1, so we can simplify the formula further:

cn = φn

Design files / Practical example

The design team provides the column widths by giving us proportions that we then transform into percentages and apply to the columns.

Example:

We know that the sum of the two columns must be 100% (the full width of the container).

Step 3

After dealing with the math, all we need to do is to use this in a mixin.

The mixin will be applied to the wrapper of the columns and will return the width for each column using nth-child (we polyfilled this for IE8).

For the columns, we decided not to use the classical float (dealing with a lot of math can lead to trouble when rounding the widths) or flex (because of it’s weak browser support). Instead, we went for a more robust way of doing things although avoided by so many because of it’s quirky past: table layout.

Before saying “Hey, hey, hey, tables, really?”, I should add that we don’t use the HTML <table> element, we just set display: table; to the wrapper and display: table-cell; to the siblings.

The pros of using this over float being:

you don’t get the bug where one columns falls below the others if their width exceeds 100%

you can use vertical-align

you can create equal columns without actually knowing the number of columns (by using the width: 1% hack on the columns)

That being said, we add the display: table on the wrapper and then we iterate through the result of the array outputed by the function in step 2 and apply those values to the corresponding direct children.