The idea

The whole idea revolves around the golden ratio i.e. 1.618. From grid, typography, tables, buttons, form components, spacing to colors almost everything is based on this divine number.

Defining the base

This framework uses the number 1.618, so a variable is defined in the SASS as follows with other rem variables derived from this number:

$phi: 1.618;
$remMulPhi: 1rem * $phi
$remDivPhi: 1rem / $phi

As you can see here 1rem with $phi is used to compute the value of the other two variables. These computed values are primarily used for margin and padding. These three variables play an essential role in the framework. Read the content below to see how they are used throughout the framework.

Grid

The columns are generated based on the generation of the golden rectangles. Grid is curated based on the full width in terms of percentage i.e. 100%. The base column (class names: .phi-col-0 and .phi-col-base) utilizes 100% width. Other columns are then derived based on this column. The column width (dividend) is divided using the $phi (devisor), the resultant value (quotient) is the width of next column then the resultant value is subtracted from the dividend's width to get another new column. This method is used iteratively to create columns. See the gif below to get an idea.

This framework supports only eight columns because columns are curated irrationally as the 1.618 number is irrational. Even if we go beyond these eight columns, the columns wouldn't be useful in real-life examples, as their width is much smaller.

Let's see how other columns are implemented. Following code shows the SASS variables representing the column width.

$base: 100%; /* classes: .phi-col-base and .phi-col-0 */
$phiCol2: $base / $phi; /* classes: .phi-col-lg and .phi-col-2 */
$phiCol3: $base - $phiCol2; /* classes: .phi-col-md and .phi-col-3 */
$phiCol4: $phiCol3 / $phi; /* classes: .phi-col-sm and .phi-col-4 */
$phiCol5: $phiCol3 - $phiCol4; /* classes: .phi-col-xs and .phi-col-5 */
$phiCol6: $phiCol5 / $phi; /* class: .phi-col-6 */
$phiCol7: $phiCol5 - $phiCol6; /* class: .phi-col-7 */

If you notice the columns, there is one column missing in the above code. The missing column is $phiCol1. Well, this column has a different implementation than the above columns. It is implemented in this way:

$phiCol1: $base - ($phiCol6 + $phiCol6); /* classes: .phi-col-xl and .phi-col-1 */

Typography

In this framework, typography extensively uses the cardinal three variables for font size, line height, word spacing, letter spacing and spacing (margin and padding). But here we will only focus on some of the primary factors because the rest of the things you can find in the typography.scss file. In this section only essential things like how headers are using the cardinal variable, the fluid typography, etc.

Headers

Headers are created using $phi variable. See the code below:

$h5: 1rem;
$h4: $h5 * $phi;
$h3: $h4 * $phi;
$h2: $h3 * $phi;
$h1: $h2 * $phi;
$h6: $h5 / $phi;

As you can see $h5 is initialized to 1rem which will be equivalent to the body's font size. Then $h4 header is then generated by multiplying the $h5 value with $phi. Similar process is used to generate the headers till $h1 is calculated. For $h6 header, $h5 value is divided by the $phi value. Since these headers are using rem unit, these headers will show their fluidity as the window resizes.

Fluid typography

The fluid typography feature is inspired stolen from CSS tricks. You can read the article to know more about it.

Colors

The standard colors in the framework are defined and then using those standard colors with $phi, tints and shades are generated using the mix function from SASS.

The function for the tint and shade is defined like this in _.function.scss. The tint function is mixes the white color in the provided standard color (first parameter) depending on the percentage provided as the second parameter.

@function tint($color, $percentage) {
    @return mix(white, $color, $percentage);
}

Similarly, for shade color it is defined in the following way. This function mixes the black color in the provided color through the parameter depending on the percentage provided in the second parameter.

@function shade($color, $percentage) {
    @return mix(black, $color, $percentage);
}