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.
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.
12 columns
11 columns
1
10 columns
2
9 columns
3 columns
8 columns
4 columns
7 columns
5 columns
6 columns
6 columns
<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>
$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
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
.
12 columns
4 columns
4 columns
4 columns
14 columns
7 columns
7 columns
<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>
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.
12 columns
10 columns
1
6 columns
4 columns
3 columns
7 columns
<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>
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.
Six Column (Pushed)
Six Column (Pulled)
4 columns 1
4 columns 2
4 columns 3
<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 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.
12 columns
10 columns
6 columns
2
<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 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>
You can nest grids within grids infinitely by creating rows inside of columns, or other rows.
7 columns
6 cols
6 cols
5 columns
9 cols push 3
<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>
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.
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.