Grid concepts

Grid glossary

In addition, there are five concepts that together describe your theme’s layout:

  • Columns
  • Gutters
  • Rows
  • Nested Rows
  • Blocks

Columns

Columns are the same as in standard grids and represent the vertical divisions and the width units of your grid (e.g., a 16 or 12 column 960px grid). The number of columns in your grid, in turn, determines the widths you have available for sizing sidebars and blocks (e.g, 60px for a 16 column 960px grid, or 80px for a 12 column 960px grid). While Fusion Core comes with 16 column and 12 column 960px grids, creating a custom grid is actually pretty easy to do. As a bonus, it’s also straightforward to create a fluid version of a grid that uses percentages for widths rather than pixels.

Gutters

One of the things that is different about the Fusion grid system is that gutters (the margins between columns) are applied to the inner div of each block. This allows the math behind the scenes to be simplified and keeps the end user from having to worry about gutters. Gutters are set once, in a grid css file.

Rows

Rows are the horizontal component of the grid and represent Drupal regions. As you can see in page.tpl.php, the div wrappers needed for grid rows can be created manually or they can be created with the grid_row theme function.

Nested Rows

Nested rows are the same as regular full-width rows and can contain blocks, but they are intended to go inside full-width rows to create more complex grid layouts, and they lack the outer wrapper that full-width rows have.

Blocks

Blocks are the elements of the grid and have a grid width and internal gutters. There are Drupal-generated blocks and “fake” blocks that you can create. The structure of blocks that are generated by Drupal is contained in the block.tpl.php file. If you have a single element in a template that you wanted to be treated like a “block” so that it gets gutters applied to it and it lines up on the grid nicely, then you can use the grid_block theme function to generate the div wrappers needed for the grid to position it correctly. Alternatively, if you have multiple elements that you want to be formatted as a single block, you can create the grid block div wrappers manually.

Important Tips:

  • A grid is defined primarily by its grid css file – everything else is handled automatically
  • Gutters are applied inside blocks, so column widths already include gutters
  • Setting the sidebar widths sets your main content area width
  • Full-width rows are at the top level, nested rows are inside full-width rows
  • Blocks go in rows, but rows do not go inside blocks
  • Blocks stack up next to each other in rows
  • Blocks are designed to drop under when their width exceeds available space
  • If you add margins to the outer divs of nested rows or blocks, you will break the grid layout. Instead, apply padding to the inner div
Permalink

Using the 12 column grid

Fusion’s default is the 16 column grid, or 16 columns of 60px each. However, the 12 column grid is also very popular, mainly because unlike 16 columns, it is evenly divisible by 3. If you want to have three equal width columns, then you want to use the 12 column grid instead.

The 12 column grid is built in to Fusion and can be swapped out easily in any subtheme. Here’s how:

  1. Open your subtheme’s .info file
  2. Look for these lines:
    settings[theme_grid] = grid16-960
    settings[theme_grid_options][] = grid16-960
    settings[theme_grid_options][] = grid16-fluid
  3. Change the values of “16” to 12”
  4. Look for this line: skinr[grid12-width] =
  5. Change the value of “12” to “16”
  6. Save, and clear your site’s theme registry by clicking the “Clear cached data” button at Administer > Site configuration > Performance

That’s it! You’ve now changed your theme’s grid. If you’d configured any theme settings, such as sidebar widths, you may now need to re-save this. You’ll also need to reapply any custom widths set in Skinr.

Permalink