Gumby Grid System

In gumby grid, row classes create horizontal rows and column classes create final structure of grid. It provides a responsive and fluid-fixed grids that means it varys based on the resolution of the screen, or the size of the window.

Code
<div class="row">
  <div class="small-4 large-6 columns">6</div>
  <div class="small-8 large-6 columns">6</div>
</div>
<div class="row">
  <div class="small-4 columns">4</div>
  <div class="small-8 columns">8</div>
</div>
<div class="row">
  <div class="large-4 columns">4</div>
  <div class="large-4 columns">4</div>
  <div class="large-4 columns">4</div>
</div>
<div class="row">
  <div class="small-2 large-3 columns">3</div>
  <div class="small-4 large-6 columns">6</div>
  <div class="small-8 large-3 columns">3</div>
</div>
<div class="row">
  <div class="small-2 columns">2</div>
  <div class="small-8 columns">8</div>
  <div class="small-2 columns">2</div>
</div>

Output

6 columns

6 columns


4
8

4
4
4

3
6
3

2
8
2

Pushing Columns

Pusing Columns allow user to create additional space between columns in a row.

Code
<div class="row">
  <div class="three columns">
    <p>3 columns</p>
  </div>
  <div class="push_three three columns">
    <p>3 columns</p>
  </div>
</div>
<div class="row">
  <div class="four columns">
    <p>4 columns</p>
  </div>
  <div class="push_four four columns">
    <p>4 columns</p>
  </div>
</div>
<div class="row">
  <div class="six columns">
    <p>6 columns</p>
  </div>
  <div class="push_three three columns">
    <p>3 columns</p>
  </div>
</div>
<div class="row">
  <div class="eight columns">
    <p>8 columns</p>
  </div>
  <div class="push_two two columns">
    <p>2 columns</p>
  </div>
</div>
<div class="row">
  <div class="twelve columns">
    <p>12 columns</p>
  </div>
</div>
Output

3 columns

3 columns


4 columns

4 columns


6 columns

3 columns


8 columns

2 columns


12 columns

Pulling Columns

Pulling columns are like as sister of push columns. It act as union with push columns. We can use both to switch the positions of columns around.

Code
<div class="row">
  <div class="push_three three columns">
    <p>3 columns(Pushed)</p>
  </div>
  <div class="pull_three three columns">
    <p>3 columns (Pulled)</p>
  </div>
  <div class="push_three three columns">
    <p>3 columns (Pushed)</p>
  </div>
  <div class="pull_three three columns">
    <p>3 columns (Pulled)</p>
  </div>
</div>
<div class="row">
  <div class="four columns">
    <p>4 columns</p>
  </div>
  <div class="push_four four columns">
    <p>4 columns (Pushed)</p>
  </div>
  <div class="pull_four four columns">
    <p>4 columns (Pulled)</p>
  </div>
</div>
<div class="row">
  <div class="six columns">
    <p>6 columns</p>
  </div>
  <div class="push_three three columns">
    <p>3 columns (Pushed)</p>
  </div>
  <div class="pull_three three columns">
    <p>3 columns (Pulled)</p>
  </div>
</div>
<div class="row">
  <div class="eight columns">
    <p>8 columns</p>
  </div>
  <div class="push_two two columns">
    <p>2 columns (Pushed)</p>
  </div>
  <div class="pull_two two columns">
    <p>2 columns (Pulled)</p>
  </div>
</div>
<div class="row">
  <div class="twelve columns">
    <p>12 columns</p>
  </div>
</div>
Output

3 columns (Pushed)

3 columns (Pulled)

3 columns

3 columns


4 columns

4 columns

4 columns


6 columns

3 columns

3 columns


8 columns

2 columns

2 columns


12 columns

Centered Columns

Centered columns are align columns in the middle of the row using centered class. It align only columns not text.

Code
<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 eight columns">
    <p>8 columns</p>
  </div>
</div>
<div class="row">
  <div class="centered six columns">
    <p>6 columns</p>
  </div>
</div>
<div class="row">
  <div class="centered four columns">
    <p>4 columns</p>
  </div>
</div>
Output

12 columns


10 columns


8 columns


6 columns


4 columns

Tiles

Tiles maintain "N-up grid" style layout on all screens. It preserve look and feel of things like images, friend list and block styles.

Code
<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>
Output
  • Two Up
  • Two Up

  • Two Up
  • Two Up
  • Four Up
  • Four Up
  • Four Up
  • Four Up

  • Four Up
  • Four Up
  • Four Up
  • Four Up

Nesting Columns

Gumby grids offer nesting feature by creating row inside of columns or other rows.

Code
<div class="row">
  <div class="eight columns">
    <p>8 columns</p>
    <div class="row">
      <div class="eight columns">
        <p>8 columns Nested</p>
		  <div class="row">
		    <div class="eight columns">
			  <p>8 columns Nested Again</p>
            </div>
			<div class="four columns">
			  <p>4 columnss</p>
			</div>
		  </div>	 
      </div>
      <div class="four columns">
        <p>4 columns</p>
      </div>
    </div>
  </div>
  <div class="four columns">
    <p>4 columns</p>
  </div>
</div>
Output

8 columns

8 columns Nested

8 columns Nested Again

4 columns

4 columns

4 columns


Next Lesson > Gumby Components