Layout

How to use

Our grid concept inspired by Joni Korpi’s Golden Grid System. The margins and columns are fluid while the gutters maintain a fixed width. This ensures consistent proportional spacing and alignment at all screen widths.

Grid settings are configured in /source/scss/1_settings/_variables.scss.

The basic layout foundation is setup in /source/scss/6_modules/_page.scss and you can define your global layout classes in /source/scss/6_modules/_layout.scss.

We’ve set up the following grid variables with a few classes for dividing page sections to help you get designing as quickly as possible without being bound to a specific set of grid units.

Default grid variables

These are the default grid variables. We are just dividing 100% by various values to give us a series of different column widths and quantities. Adjust these in /source/scss/1_settings/_variables.scss.

//Three Column Grid
$c3: 100% / 3;
//Four Column Grid
$c4: 100% / 4;
// Five Columns
$c5: 100% / 5;
//Six Column Grid
$c6: 100% / 6;
//Seven Column Grid
$c7: 100% / 7;
//Eight Column Grid
$c8: 100% / 8;
//Nine Column Grid
$c9: 100% / 9;
//Ten Column Grid
$c10: 100% / 10;
//Twelve Column Grid
$c12: 100% / 12;
//Sixteen Column Grid
$c16: 100% / 16;

SCSS example

To specify a width of four columns of a six column grid ($c6 == 1 column of a 6-column grid), use the following:

/* Create a 4-column object centered in a 6-column grid */
.object{
  width:$c6*4; /* $c6 = 1 column of a 6-column grid. Mulitply by 4 to specify 4 columns wide. */
  margin-left:$c6*1; /* Moves object 1 column to the right. */
}

There are a few simple layout classes in /source/scss/modules/_layout.scss to get you started with some basic layouts:

@media only screen and (min-width: $screenSmall) {
  .primary-content {
    width:$c5*3; // Creates an object that is 3/5 the width of its parent
    float:left;  // Float this block to the left edge of its parent
  }
  .secondary-content {
    width:$c5*2; // Creats an object that is 2/5 the width of its parent
    float:right; // Floats this block to the right edge of its parent
  }
  .split-content {
    width:$c4*2; // Creates an object that is 1/2 the width of its parent
    float:left;
  }
  .three-up {
    width:$c3; // Creates an object that is 1/3 the width of its parent
    float:left;
  }
}

Rows

By default, our grid stretches across the entire width of the browser, which may not be ideal for most situations. To give your page some margins, we have created a special .row class to add structure and extra theming hooks.

The .row class wraps around your content and stretches across your browser so you can add background colours and full-bleed images. It also sets up your grid by adding horizontal page margins and consistent vertical padding for even spacing between sections (though you can add the .row--tight class to remove the vertical spacing).

    <div class="row"> <!-- Adds margins and optional backgrounds to your section -->
      <section class="object">
        <!-- Content that aligns to the grid and has gutters applied -->
      </section>
      <section class="object2">
        <!-- Content that aligns to the grid and has gutters applied -->
      </section>
    </div>

Gutters

We use fixed-width gutters defined with a rem unit. This ensures that spacing stays consistent at all sizes. By default, our gutter size is equal to the $line variable set in /source/scss/1_settings/_variables.scss, which also happens to be the baseline grid.

There is a handy gutter mixin avialable which applies half a gutter width to each side of the element to which it is applied.

By default, the immediate children of a .row wrapper already have gutters applied using this gutter mixin. To prevent gutters from being applied to one of these immediate children, add the .collapse class to it.

Page Margins

The $margin variable determines the horizontal space on either side of the grid. It is set in /source/scss/1_settings/_variables.scss with a percentage based on one of our smaller grid units. For example, the default margin of Live Wires is $margin: 100% / 18 (which adds an extra column to either side of our 16 column grid).

You can add a max-width value to the .row class to give your design a static width after a certain size, but we recommend sticking with a fully fluid system based on percentages using the $margin variable.

This is fine at small window sizes, but what if it’s too loose at wider sizes? Instead of adding a max-width, we just increase the $margin variable on our .row classes:

/* Increase margins after a certain width */
@media only screen and (min-width: $screenMedium) {
  .row {
    padding-left: $margin * 2; /* Double the $margin size to squeeze the main content. */
    padding-right: $margin * 2;
  }
}

Background colors

We’ve included a few background classes in /source/scss/7_theme/_layout.scss to give you some easy background variations for rows and other elements:

Units & resizing

Every dimension in our project is defined using relative units. Aside from grid units and margins which use percentages, we stick with Rems. When everything is set using Rems, we can proportionally zoom the entire project by changing the font-size of our <html> element. Handy for zooming in or out at different break points.

// Our default font-size is 100%
html {
  font-size: 100%;
}

// We can proportionally increase the size of the enire site
// by simply increasing or decreasing the root font-size.
@media only screen and (min-width: $screenSmall) {
  html {
    font-size: 105%; // Increases everything defined by rems by 5%.
  }
}

.object {
  // Here are a few ways you can use the rem() function
  padding: rem(24px); // Converts a px value to rems
  padding: rem(24); // You can even leave out the px suffix
  padding: rem(24 12); // And use with multiple shorthand values
  padding: rem($line $line/2); // Use the $line variable for consistent spacing & flexibility
  padding: rem($line) $margin; // Use the rem() function for only part of your CSS declaration
}

Modular scale

Here’s a custom modular scale to provide a rational list of related numbers to use throughout the project. This keeps typographic and structural dimensions consistent and in proportion. You can refer to this scale when determining font sizes, gutter units, media proportions, and spacing.

Learn more about modular scales.

Calculated by Modular Scale.

To top