Gumby Framework uses a container class to create a base padding. We also use row classes to create horizontal rows, define the page's max-width, and contain the various page columns. Column classes round out the bunch and create the final structure of the page. The magic of responsivity occurs because columns don't have a fixed width: they can 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.
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, all aspects of the grid are now variables that you can customize and build-to-order unique grid sizes, columnm numbers, widths and variations on each of your projects!
14 columns
13 columns
1
12 columns
2
11 columns
3 columns
10 columns
4 columns
9 columns
5 columns
8 columns
6 columns
7 columns
7 columns
<div class="row">
<div class="fourteen columns">
<p>14 columns</p>
</div>
</div>
<div class="row">
<div class="twelve columns">
<p>12 columns</p>
</div>
<div class="two columns">
<p>2</p>
</div>
</div>
Here is where the Gumby Framework gets way more interesting... The Hybrid Grid. What the Hybrid Grid allows you, and your designers, to do is create layouts like never before by allowing you to define what grid to use, wherever you want on the page. By defining class="sixteen colgrid" on any element that has been assigned a row class, or simply right on 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 16-Column grid injected in the middle of it. This will not only allow some pages of your project to be laid out using a 16-Column grid, but also any section of the page as well! You will be able to be more flexible than ever before, and your designers will have the freedom to design things that would normally "break the grid" if you were stuck with only one grid system on a page.
Again, thanks to Sass, the hybrid grid column number is a variable so go with whatever you want!
14 columns
7 columns
7 columns
16 columns
4 columns
4 columns
4 columns
4 columns
2
2
2
2
2
2
2
2
<div class="row">
<div class="fourteen columns">
<p>14 columns</p>
</div>
</div>
<div class="sixteen colgrid">
<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 class="four columns">
<p>4 columns</p>
</div>
</div>
</div>
Push 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 because your designer likes tons of pretty whitespace... You can push that sidebar over to the right using .push_three, then profit from Gumby’s awesomeness and ease-of-use. Push columns are also nestable, just like the rest of the grid.
14 columns
11 columns
2
7 columns
6 columns
3 columns
10 columns
<div class="row">
<div class="seven columns">
<p>7 columns</p>
</div>
<div class="push_one six columns">
<p>6 columns</p>
</div>
</div>
<div class="row">
<div class="three columns">
<p>3 columns</p>
</div>
<div class="push_two nine columns">
<p>9 columns</p>
</div>
</div>
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.
14 columns
10 columns
6 columns
2
<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>
Tiles are an awesome new way to lay out elements on a page that you want to maintain their “grid" style layout. 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 are a fantastic addition to Gumby 2 that will help sure up some of those use cases that required you to write your own styles in earlier versions.
With Tiles maintaining their N-up configuration on mobile devices, Gumby 2 has unlocked powers never before possible in our framework before.
<ul class="two_up tiles">
<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>
</ul>
You can nest grids within grids infinitely, but after a while the columns become too small to be practical.
<div class="row">
<div class="seven columns">
<div class="row">
<div class="ten columns">
<p>10 columns</p>
</div>
<div class="four columns">
<p>4 columns</p>
</div>
</div>
</div>
<div class="seven columns">
<p>7 columns</p>
</div>
</div>
<section>
<article>
<p>I’m speaking Russian</p>
</article>
<aside>
<p>Wibbly Wobbly</p>
</aside>
</section>
section {
@include row();
}
article {
@include column(8);
}
aside {
@include column(4);
}
@include row($nested); // $nested: set to ‘false’, can be ‘false’, or ‘nested’
@include column($columns, $alignment, $behavior); @include hybrid($columns, $alignment, $behavior); // $columns: an integer, the number of columns for your element // $alignment: set to ‘false’, can be ‘false’, or ‘center’ // $behavior: set to ‘false’, can be ‘false’, or ‘collapse’
@include push($columns, $hybrid-grid); // $columns: an integer, the number of columns to push your element // $hybrid: set to ‘false’, can be ‘false’, or ‘hybrid’
@include pull($direction); // $direction: set to ‘false’, can be ‘false’, ‘left’, or ‘right’
As with the original Gumby, Gumby 2 has two PSD's that help get you started designing on 12 and 16 column grid systems. You can find these templates below.