The Grid

Problem: You've got tons of content, each needing different sized vertical columns, and don't know how to quick and easily get it all done. Solution: The awesome grid!

Overview

The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns, and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a row or column.

Nesting

In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.

How to Use

Using this framework is easy. Here's how your code will look when you use a series of <div> tags to create vertical columns.

<div class="row">
  <div class="columns small-6 medium-4 large-3">...</div>
  <div class="columns small-6 medium-8 large-9">...</div>
</div>

Nesting Rows

In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.

<div class="row">
  <div class="columns small-8">8
    <div class="row">
      <div class="columns small-8">8 Nested
        <div class="row">
          <div class="columns small-8">8 Nested Again</div>
          <div class="columns small-4">4</div>
        </div>
      </div>
      <div class="columns small-4">4</div>
    </div>
  </div>
  <div class="columns small-4">4</div>
</div>

Small Grid

As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes.

<div class="row">
  <div class="columns small-2">2</div>
  <div class="columns small-10">10, last</div>
</div>
<div class="row">
  <div class="columns small-3">3</div>
  <div class="columns small-9">9, last</div>
</div>

COLORS

Below you can find the different values we created that support the primary color variable you can change at any time in _settings.scss

TYPOGRAPHY

This design uses Gotham for headings and paragraph text with the exception of subheadings using Chronicle Text G2 Italic.

Headings

Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest)

Paragraphs

Paragraph styles are responsive and based on the browser width size. The styles are written using SCSS and calculated as follows:

// Variables
$min-font-size      : 14px;
$max-font-size      : 18px;
$min-width          : 320px !default;
$max-width          : 1180px !default;

// Default & Fallback
font-size           : $min-font-size;
line-height         : 1.75;

// Minimum Width calculation for font size
@media (min-width: $min-width) {
  font-size: calc( #{$min-font} + (#{$max-font} - #{$min-font}) * ((100vw - #{$min-width}) / (#{$max-width} - #{$min-width})) );
}

// Max width
@media (min-width: $max-width) {
  font-size: $max-font;
}

<p class="lead">This is a lead paragraph. Font-size is 125% with leading at 1.6.</p>
<p>This is the primary paragraph style. The font is set to scale ... shrink and grow.</p>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur ... non distinctio.</p>

BUTTONS

Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.

Primary Buttons

These buttons are primary calls to action and should be used sparingly. Their styling can be added with the .is-primary and .button classes.

<a href="#" class="button is-primary">Primary Button</a>
<a href="#" class="button is-primary is-disabled">Disabled Button</a>

Primary Button Disabled Button

FRAMEWORK

You can learn more about the framework used in this project at Foundation by Zurb.

• Foundation Docs
• Foundation Forum
• Foundation Examples

PLUGINS

The following plugins are used throughout this project and can be found via the links provided.

• Bourbon — A simple and lightweight mixin library for Sass
• Typographic — by Cory Simmons
• Motion-UI — Motion-UI by Zurb for Foundation
• Spaces CSS — A simple CSS spacing library for margins, paddings and more