Capital G - Grid System

Sass Config

Every project will require the following variable map to be defined:

$g-config: (
  maxWidth: 1020px,
  tabletWidth: 720px,
  columnPadding: 15px,
  gutter: 20px
);

Flexibility

There are two ways you can implement a grid in your layout:

1. Via HTML classes
2. Via SASS mixins

Neither is more correct that the other. It all depends on your use case. The CSS route is perhaps cleaner, but may be more work if you have to name addtional components to style. Consider the following layout:

We can implement this in two different ways:

1) SASS Mixins (Susy style)

<div class="Layout">
  <div class="Layout-inner">
    <div class="Sidebar">
      <!-- content goes here -->
    </div>

    <div class="Content">
      <!-- content goes here -->
    </div>
  </div>
</div>

.Layout {
  @include g();

  .Layout-inner {
    @include g-row();
  }

  .Sidebar {
    @include g-col(4);
    @include g-when-mobile {
      @include g-col(12);
    }
  }

  .Content {
    @include g-col(8);
    @include g-when-mobile {
      @include g-col(12);
    }
  }
}

2) HTML classes (Bootstrap style)

<div class="Layout G-container">
  <div class="G-row">
    <div class="G-col-4 G-col-mobile--12">
      <!-- content goes here -->
    </div>

    <div class="G-col-8 G-col-mobile--12">
      <!-- content goes here -->
    </div>
  </div>
</div>

.Layout {
  // Other styles go here
}

As you can see the first method is cleaner and lends itself well to core layout elements like sidebars and content blocks, but might be pain when prototyping.

Basic Columns

HTML

<div class="G-container">
  <div class="G-row">
    <div class="G-col--6">
      <!-- content goes here -->
    </div>
  </div>
</div>

SASS

.Container {
  @include g();

  // An "row" container div is required around the columns
  // to offset the gutter around the first and last column
  .Container-row {
    @include g-row();
  }

  .SomeComponent {
    @include g-col(4);
    @include g-when-tablet {
      @include g-col(6);
    }
    @include g-when-mobile {
      @include g-col(12);
    }
  }
}

Nested Columns

There's nothing stopping you from nesting columns inside of other columns as long as you include you wrap the child columns inside a G-row element.

HTML

<div class="G-container">
  <div class="G-row">
    <div class="G-col--6">
      <div class="G-row">
        <div class="G-col--6">
          <!-- content goes here -->
        </div>

        <div class="G-col--6">
          <!-- content goes here -->
        </div>
      </div>
    </div>
  </div>
</div>

SASS

.Outer {
  @include g();

  .Outer-row {
    @include g-row();
  }

  .Inner {
    @include g-col(6);

    .Inner-row {
      @include g-row();
    }

    .Inner-component {
      @include g-col(6);
    }
  }
}

Fluid Container

SASS

.Container {
  @include g($fluid: true);
}

HTML

<div class="G-container G-container--fluid">
  <!-- content goes here -->
</div>

Example

Gutterless Container

SASS

.Container {
  @include g($gutter: false);
}

HTML

<div class="G-container g-container--gutterless">
  <!-- content goes here -->
</div>