Grid Fundamentals

The core structure of the grid is defined by the use row classes to create horizontal rows which also assign the page's max-width, and function to contain the various page columns. Column classes create the final structure of the page. As a responsive, fluid-fixed, framework - our columns don't have a fixed width: they vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). This allows for your project to adapt to any viewport, any device, without separate stylesheets or html templates.

Basic Grid

If you look at the example below you can see how the rows and columns come together to build structure. Each row of columns are inside of a div that has been assigned the row class. Thanks to Sass, the margins, widths, and document size are all variables that you can change as needed. Simply edit the var/_settings.scss file and change the values of the variables to create your own grid.

<div class="row">
    <div class="twelve columns">
      <p>12 columns</p>
    </div>
  </div>
  <div class="row">
    <div class="eleven columns">
      <p>11 columns</p>
    </div>
    <div class="one columns">
      <p>1</p>
    </div>
  </div>
  <div class="row">
    <div class="ten columns">
      <p>10 columns</p>
    </div>
    <div class="two columns">
      <p>2</p>
    </div>
  </div>
  <div class="row">
    <div class="nine columns">
      <p>9 columns</p>
    </div>
    <div class="three columns">
      <p>3 columns</p>
    </div>
  </div>
  <div class="row">
    <div class="eight columns">
      <p>8 columns</p>
    </div>
    <div class="four columns">
      <p>4 columns</p>
    </div>
  </div>
  <div class="row">
    <div class="seven columns">
      <p>7 columns</p>
    </div>
    <div class="five columns">
      <p>5 columns</p>
    </div>
  </div>
  <div class="row">
    <div class="six columns">
      <p>6 columns</p>
    </div>
    <div class="six columns">
      <p>6 columns</p>
    </div>
  </div>

Settings Variables

$row-max-width: 940px !default; // The max-width of your project
$gutter-in-px: 20px !default; // This is the space between columns
$cols: 12 !default; // The number of columns in your grid
$hybrid: 16 !default; // Change this if you plan to mix grids

Hybrid Grid

The Hybrid Grid allows you to create mixed-grid layouts. By defining class="sixteen colgrid" on any element that has been assigned a row class, or the html element, you are creating a sixteen column grid within that element, or page.

The example below shows a 14-Column grid with a 12-Column grid injected in the middle of it. With they hybrid grid, some pages or sections of your project can be laid out using an entirely different grid configuration than the rest of it.

You can edit the grid configuration of the hybrid grid by changing the $hybrid variable within var/_settings.scss.

<div class="row">
  <div class="twelve columns">
    <p>12 columns</p>
  </div>
</div>
<div class="row">
  <div class="four columns">
    <p>4 columns</p>
  </div>
  <div class="four columns">
    <p>4 columns</p>
  </div>
  <div class="four columns">
    <p>4 columns</p>
  </div>
</div>
<div class="fourteen colgrid">
  <div class="row">
    <div class="fourteen columns">
      <p>14 columns</p>
    </div>
  </div>
  <div class="row">
    <div class="seven columns">
      <p>7 columns</p>
    </div>
    <div class="seven columns">
      <p>7 columns</p>
    </div>
  </div> 
</div>

Pushing Columns

Push and pull columns allow you to create additional space between columns in a row. Say you have a chunk of text, lets call it a blog post, that only needs to occupy six columns; and your sidebar is only three columns wide, but it hugs the right side of the document in your comp… You can push that sidebar over to the right using .push_three. Push/pull columns are also nestable, just like the rest of the grid.

<div class="row">
  <div class="twelve columns">
    <p>12 columns</p>
  </div>
</div>
<div class="row">
  <div class="ten columns">
    <p>10 columns</p>
  </div>
  <div class="push_one one columns">
    <p>1</p>
  </div>
</div>
<div class="row">
  <div class="six columns">
    <p>6 columns</p>
  </div>
  <div class="push_two four columns">
    <p>4 columns</p>
  </div>
</div>
<div class="row">
  <div class="three columns">
    <p>3 columns</p>
  </div>
  <div class="push_two seven columns">
    <p>7 columns</p>
  </div>
</div>

Pulling Columns

Pull columns are push columns sister. They work in the reverse way but utilize the same class based structure. They also must be used in unison with push columns. You use these primarily to switch the positions of columns around.

<div class="row">
  <div class="push_six six columns">
    <p>Six Column (Pushed)</p>
    <!-- Look I'm first in the markup, but second on the screen! -->
  </div>
  <div class="pull_six six columns">
    <p>Six Column (Pulled)</p>
  </div>
</div>
<div class="row">
  <div class="four columns">
    <p>4 columns 1</p>
  </div>
  <div class="push_four four columns">
    <p>4 columns 2</p>
  </div>
  <div class="pull_four four columns">
    <p>4 columns 3</p>
  </div>
</div>

Centered Columns

Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: There cannot be any other column blocks in the row for this to work.

<div class="row">
  <div class="twelve columns">
    <p>12 columns</p>
  </div>
</div>
<div class="row">
  <div class="centered ten columns">
    <p>10 columns</p>
  </div>
</div>
<div class="row">
  <div class="centered six columns">
    <p>6 columns</p>
  </div>
</div>
<div class="row">
  <div class="centered two columns">
    <p>2</p>
  </div>
</div>

Tiles

Tiles maintain their N-up “grid" style layout on all screens. This allows you to preserve the look and feel of things like a grid of profile images in a friends list, or other block-style content generated by your application across devices. Tiles are invoked using the .tiles class in association with a .two_up, .three_up, .four_up, or .five_up class to determine the layout.

Tiles were designed to work with <ul> and <li> however you can use any elements that you like, just add a class of .tile to the children.

<ul class="two_up tiles">
  <li>Two Up</li>
  <li>Two Up</li>
  <li>Two Up</li>
  <li>Two Up</li>
</ul>
<ul class="four_up tiles">
  <li>Four Up</li>
  <li>Four Up</li>
  <li>Four Up</li>
  <li>Four Up</li> 
  <li>Four Up</li>
  <li>Four Up</li>
  <li>Four Up</li>
  <li>Four Up</li>
</ul>

Nested Grids

You can nest grids within grids infinitely by creating rows inside of columns, or other rows.

<div class="row">
  <div class="seven columns">
    <p>7 columns</p>
    <div class="row">
      <div class="six columns">
        <p>6 cols</p>
      </div>
      <div class="six columns">
        <p>6 cols</p>
      </div>
    </div>
  </div>
  <div class="five columns">
    <p>5 columns</p>
    <div class="row">
      <div class="nine columns push_three">
        <p>9 cols push 3</p>
      </div>
    </div>
  </div>
</div>

Fancy Tiles

Easily create grided layouts that respond gracefully. Fancy Tiles shift the number of columns in a grid at predefined breakpoints. You can read more about Fancy Tiles in the mixins section.

Semantic Grids

Gumby offers a series of mixins to build flexible, semantic grids which dont require the use of non-semantic class names inside of your markup structure. You can read more about Semantic Grids in the mixins section.