Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Thinking 960

Parent Feed: 

If you are not familiar with the concept of 960 grid system you should be. In one sentence, 960 is a CSS framework that divides a page to 12 or 16 columns with a total of 960 pixels.

960 is a framework. As so, it doesn’t only give us tools, it also encourages us to use them the _right way. I think it’s a bit like forms API in Drupal that helps us build our forms correctly. In 960 you have CSS classes that can be used to set elements width and position.

For example, working with 16 columns and the following pseudo-code:

print $left-sidebar

print $main-content

Will give us something like this:

The left sidebar is taking 4 columns, and the main is taking a total of 12. As you see in the above example we make sure to “fill up columns”, so even if wanted the main to be in 11 columns, we would add a suffix (e.g. _suffix-1) or a prefix - so the total of the line will be 16 columns. This will assure all elements are in place, and nothing pops up. Oh, and it’s cross browser compatible. Oh, and it’s already RTLed.

Before we start with the examples set up your system:

  1. Download zen and zen_ninesixty themes
  2. Download the gizra_ninesixty theme used for this tutorial here (A clean gizra_ninesixty can be found in github)
  3. Enable the above themes and make gizra_ninesixty the default
  4. In the gizra_ninesixty configuration page, enable the "Active 960 grid system image"
  5. Download the example module with the tutorial's Views and Panels, and enable it
  6. In all the examples I assume we are working with 16 columns grid, and that we have blocks on the left sidebar, but not on the right (so the main content area is 12 columns wide)

Our first example will be showing in a node view the submitted by and tags on the left, and the node links on it’s right.

Open _node.tpl.php in gizra_ninesixty and compare it to the one in zen_ninesixty. You will notice we added grid-* classes. For example

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web