Lay­out con­ven­tions to help speed up the design process.

Our design style is very edi­to­ri­al­ly influ­enced. The fol­low­ing grids and scales form a frame­work for lay­out and cre­ativ­i­ty for a num­ber of medi­ums & media sizes.

Web grid


We use a vari­a­tion of the Ger­st­ner grid that has been opti­mized for the respon­sive web. It over­lays 2,3,4,5, & 6 flu­id col­umn grids on top of each oth­er and is spaced based on our base­line grid unit (aka the $line vari­able). Our grid con­cept inspired by Joni Korpi’s Gold­en Grid Sys­tem. The mar­gins and columns are flu­id while the gut­ters main­tain a fixed width. This ensures con­sis­tent pro­por­tion­al spac­ing and align­ment at all screen widths.

Ger­st­ner 2,3,4,5,6 col­umn grid


Grid usage


This grid uses a col­lec­tion of Sass vari­ables to deter­mine col­umn counts and sizes. This approach lets us define our own seman­tic lay­out class­es, keeps the markup clean, and makes the lay­out eas­i­er to mod­i­fy across breakpoints.

Grid set­tings are con­fig­ured in /source/scss/1_settings/_variables.scss. The basic lay­out foun­da­tion is set­up in /source/scss/5_components/_layout--rows.scss and glob­al lay­out class­es are set in /source/scss/6_modules/_layout.scss.

//Two Column Grid
$c2: 100% / 2;
//Three Column Grid
$c3: 100% / 3;
//Four Column Grid
$c4: 100% / 4;
// Five Column Grid
$c5: 100% / 5;
//Six Column Grid
$c6: 100% / 6;

SCSS exam­ple

To spec­i­fy a width of four columns of a six col­umn grid ($c6 == 1 col­umn 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. */
}

Spac­ing

Rows

We have cre­at­ed a spe­cial .row class to add struc­ture and them­ing hooks, and to give our page some con­sis­tent margins.

The .row class wraps around the con­tent and stretch­es across your brows­er so we can add back­ground colours and full-bleed images. It also sets up the grid by adding hor­i­zon­tal page mar­gins and con­sis­tent ver­ti­cal padding for even spac­ing between sec­tions (though you can add the .row--tight class to remove the ver­ti­cal spacing).

Gut­ters

We use fixed-width gut­ters defined with a rem unit. This ensures that spac­ing stays con­sis­tent at all sizes. Our gut­ter size is equal to the $line vari­able set in _variables.scss, which also hap­pens to be our base­line grid.

There is a handy gutter mix­in avail­able which applies half a gut­ter width to each side of the ele­ment to which it is applied.

The imme­di­ate chil­dren of a .row wrap­per already have gut­ters applied using this gutter mix­in. To pre­vent gut­ters from being applied to one of these imme­di­ate chil­dren, add the .collapse class to it.

Page Mar­gins

The $margin vari­able deter­mines the hor­i­zon­tal space on either side of the grid. It is set in /source/scss/1_settings/_variables.scss with a per­cent­age based on one of our small­er grid units.

Markup exam­ple

<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>

Units & resizing

Every dimen­sion in the Loud­er Than Ten site is defined using rel­a­tive units. Aside from grid units and mar­gins which use per­cent­ages, we stick with Rems. When every­thing is set using Rems, we can pro­por­tion­al­ly zoom the entire project by chang­ing the font-size of our <html> ele­ment. This is espe­cial­ly handy for zoom­ing in or out at dif­fer­ent break points.

SCSS Exam­ple

// 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%.
  }
}

To make it easy to work with Rems, we’ve includ­ed a handy rem() func­tion inspired by Foun­da­tions rem-calc().

Rem cal­cu­la­tor usage

.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
}

Sec­tion backgrounds


We’ve includ­ed a few back­ground class­es in /source/scss/theme/_layout.scss to give you some easy back­ground vari­a­tions for rows and oth­er elements:

.sub­tle / .white

This class pro­duces a sub­tle back­ground variation.

<section class="row subtle">
  <h3>.subtle</h3>
  <p>This class produces a subtle background variation.</p>
</section>

.reverse / .dark-grey

This class pro­duces light text on a dark background.

<section class="row reverse">
   <h3>.reverse</h3>
   <p>This class produces light text on a dark background.</p>
</section>

.light-grey

This class pro­duces dark text on a light grey background.

.grey

This class pro­duces light text on a grey background.

.black

This class pro­duces light text on a black background.

.light-red

This class pro­duces dark text on a light red background.

.dark-red

This class pro­duces light text on a dark red background.

.light-blue

This class pro­duces dark text on a light blue background.

.dark-blue

This class pro­duces light text on a dark blue background.

.yel­low

This class pro­duces dark text on a yel­low background.

.green

This class pro­duces dark text on a green background.

Talk to us.

Learn more about our programs and find out how we can turn your project leads into loveable hardasses.