drupal theming using the 960.gs grid system - four … 2009 | todd ross nienkerk drupal theming...
TRANSCRIPT
![Page 1: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/1.jpg)
May, 2009 | Todd Ross Nienkerk
Drupal theming using the 960.gs grid systemOriginally presented at DrupalCamps Copenhagen, Helsinki, and Stockholm 2009
![Page 2: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/2.jpg)
Personal introduction
![Page 3: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/3.jpg)
Photo: Kristin Hillery
Todd Ross Nienkerk
‣ Co-founder of Four Kitchens, a Drupal design and development firm in Austin, Texas
‣ One of the implementers of the new Drupal.org redesign
‣ Member of the Drupal documentation team
![Page 4: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/4.jpg)
What is a grid system?
![Page 5: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/5.jpg)
Source: Grids are Good by Khoi Vinh and Mark Boulton
History of the grid
‣ The practice of using a grid to guide design and page layout is nearly a century old
‣ In the 1910s and 1920s, ornamental design gave way to Rationalism and New Objectivity
‣ This shift in design was part of a much larger movement towards function over form
‣ Helvetica typeface and Bauhaus architecture
![Page 6: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/6.jpg)
Source: Grid (page layout) on Wikipedia
‣ After World War II, a number of graphic designers, influenced by the modernist ideas of Die neue Typographie (The New Typography), questioned the relevance of the conventional page layout of the time
‣ They devised a flexible system to help designers achieve coherency in organizing the page
Typographic grids
![Page 7: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/7.jpg)
Source: Grid (page layout) on Wikipedia
‣ The result was the modern typographic grid associated with the International Typographic Style
‣ Grid Systems in Graphic Design, the seminal work on the subject, helped propagate the use of the grid in Europe and, later, in North America
![Page 8: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/8.jpg)
Source: Grids are Good by Khoi Vinh and Mark Boulton
Nearly a century ago
‣ Modernists looked to build a new aesthetic by...
‣ deriving beauty from the innate qualities of the machine
‣ championing standardization
‣ Sound familiar?
![Page 9: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/9.jpg)
Source: Grids are Good by Khoi Vinh and Mark Boulton
Today
‣ Web designers have turned to grid-based design in order to...
‣ derive beauty from the innate qualities of the browser
‣ champion standardization
‣ 16 years after the invention of the web, we are finally embracing a century-old design philosophy
![Page 10: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/10.jpg)
1 Source: Software framework on Wikipedia
Grid systems on the web‣ On the web, grid systems usually take the form of
CSS frameworks
‣ A framework is a “reuseable abstraction of code wrapped in a well-defined API”1
‣ A collection of tools and shortcuts designed to minimize code and make your life easier
![Page 11: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/11.jpg)
Examples of frameworks
‣ Ruby on Rails is a well-known Ruby framework
‣ jQuery is a JavaScript framework
‣ Drupal itself can be considered a web application framework
‣ Includes many APIs for working with databases, fields, and web forms
![Page 12: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/12.jpg)
CSS frameworks
‣ Apply the principles of software frameworks to web design
‣ They provide standardized rules and shortcuts for:
‣ browser resets
‣ typography
‣ navigation
‣ print style
‣ and...
![Page 13: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/13.jpg)
Layout
‣ When applied to web design, grid systems are CSS frameworks that provides standardized rules and shortcuts for building a website’s layout
![Page 14: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/14.jpg)
Why use a grid system?
![Page 15: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/15.jpg)
1) Saves time
2) Saves money
3) Reduces frustration
![Page 16: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/16.jpg)
Stop reinventing the wheel‣ Reduces the amount of CSS and markup you need
to duplicate each time you start a project
‣ No need to refer to old projects to figure out how to implement layouts
![Page 17: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/17.jpg)
Stop fixing and start designing‣ Shortens testing phases by providing built-in
support for noncompliant browsers
‣ Minimize Internet Explorer hacks in your layout
‣ A well-tested grid system will rarely be the source of your problems
![Page 18: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/18.jpg)
Stop deconstructing CSS
‣ Understanding someone else’s design is much easier when a standard grid system is used
![Page 19: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/19.jpg)
How do grid systems work?
![Page 20: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/20.jpg)
Example based on 960.gs (12-column)
Columns
‣ Grid systems are built using columns
‣ Columns are a grid system’s smallest unit of measurement
‣ Most grid systems contain 12–16 columns
![Page 21: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/21.jpg)
Example based on 960.gs (12-column)
Column width
‣ Page regions (header, content, sidebars, etc.) are defined by column width
‣ As in: “The header is eight columns wide”
![Page 22: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/22.jpg)
Example based on 960.gs (12-column)
Gutters (margins)
‣ Margins or padding are used to create gutters between columns
‣ These gutters provide margins between page regions
![Page 23: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/23.jpg)
Lean and versatile CSS
‣ A grid system’s CSS should:
‣ Be lean and efficient
‣ Be versatile and reusable
‣ Ensure consistent behavior across all common browsers — even IE6
![Page 24: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/24.jpg)
Wrapping <div> elements‣ In fixed-width grid systems, the entire layout is
wrapped inside a single <div> element
‣ <div> elements wrap the page regions and define their widths according to the number of columns they span
‣ These <div> elements may be nested to create regions within regions
![Page 25: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/25.jpg)
Example based on 960.gs (12-column)
Floating <div> elements
‣ The wrapping <div> elements are assigned a column width using a CSS class
‣ Because these classes also float the elements, they simply fall into place on the page
class: grid-12
class: grid-8
class:grid-4
class:grid-4
class:grid-4
class: grid-6 class: grid-6
![Page 26: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/26.jpg)
What can grid systems look like?Examples of grid-based layouts
![Page 27: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/27.jpg)
Example based on 960.gs (12-column)
Layout A: Content left, sidebar right
![Page 28: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/28.jpg)
Example based on 960.gs (12-column)
Layout B: Content between sidebars
![Page 29: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/29.jpg)
Example based on 960.gs (12-column)
Layout C: Content right with two left sidebars
![Page 31: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/31.jpg)
Painting by Piet Mondriaan (later Mondrian)
Layout E: The Mondriaan
![Page 32: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/32.jpg)
How 960.gs works
![Page 33: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/33.jpg)
Source: 960.gs
What is 960.gs?
‣ 960.gs — also known as the 960 Grid System — was created by Nathan Smith in order to “streamline web development workflow”
‣ It’s both a prototyping and development framework
‣ “The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment.”
![Page 34: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/34.jpg)
Source: 960.gs
‣ Download it for free at http://960.gs
‣ GPL and MIT licensed
‣ The 960.gs download includes:
‣ Printable sketch sheets for doodling
‣ Design templates for all most applications: Photoshop, Illustrator, Inkscape, OmniGraffle, etc.
What’s in it
![Page 35: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/35.jpg)
Source: 960.gs
Technical specs
‣ 960px wide with a 940px usable area
‣ Two versions: 12- and 16-column
‣ These can be implemented separately or simultaneously
‣ Each column has a 10px margin on the left and right, which creates a 20px gutter between columns
![Page 36: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/36.jpg)
Source: 960.gs
12-column versionColumns are 60px wide Gutters are 20px wide
10px margin on the left and right prevents collision with browser chrome
Available working area is 940px wide
![Page 37: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/37.jpg)
Source: 960.gs
16-column versionColumns are 40px wide
Everything else remains the same
![Page 38: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/38.jpg)
Using both versions simultaneously ‣ You can use 12-column classes inside a 16-column
grid — and vice versa
‣ This is possible because 12 and 16 are both multiples of 2 and 4
‣ 2 * 6 = 12
‣ 2 * 8 = 16
‣ 4 * 3 = 12
‣ 4 * 4 = 16
![Page 39: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/39.jpg)
‣ In other words, when you divide the layout into halves and quarters, you can use 12- and 16-column version simultaneously
‣ Watch what happens when you lay one grid on top of the other:
Halves
Quarters
![Page 40: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/40.jpg)
‣ This flexibility allows designers to work with both 60px- and 40px-wide columns
‣ If 12 or 16 columns don’t suit you, 960 is also divisible by 2, 3, 4, 5, 6, 8, 10, 15, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480
![Page 41: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/41.jpg)
CSS and markupNote: 960.gs uses underscores in its CSS class names. To avoid confusion, the examples that follow will use hyphens instead, as this is The Drupal Way.
![Page 42: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/42.jpg)
Containers
‣ Grids must be wrapped in a container <div>
‣ Containers center the content and define which version of the grid will be implemented
.container-12,
.container-16 { margin-left: auto; margin-right: auto; width: 960px;}
![Page 43: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/43.jpg)
Grids
‣ Grids are held inside containers and are floated left so they fall into place automatically
‣ They also provide 10px margins on the left and right
.grid-1,
.grid-2,
.grid-3, ....grid-16 { display: inline; float: left; position: relative; margin-left: 10px; margin-right: 10px;}
![Page 44: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/44.jpg)
Grid widths
‣ The width of each grid is determined by the container that wraps it
‣ For example, a one-column grid is either 60px or 40px depending on whether it’s a 12- or 16-column layout
.container-12 .grid-1 { width: 60px;}
.container-16 .grid-1 { width: 40px;}
![Page 45: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/45.jpg)
‣ Note that grid width does not increase by 60px or 40px each time
‣ Each increase must account for the 20px gutter between grids
.container-12 .grid-1 { width: 60px;}
.container-12 .grid-2 { width: 140px;}
.container-12 .grid-3 { width: 300px;}
.container-16 .grid-1 { width: 40px;}
.container-16 .grid-2 { width: 100px;}
.container-16 .grid-3 { width: 160px;}
![Page 46: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/46.jpg)
Putting containers and grids together
.grid-3 .grid-6 .grid-3
.container-12
![Page 47: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/47.jpg)
Prefixes and suffixes
‣ If you want to leave space between columns, use a prefix or suffix class
‣ Prefix classes add padding to the left of a column
‣ Suffix classes add padding to the right
.container-12 .prefix-1 { padding-left: 80px;}
.container-12 .suffix-1 { padding-right: 80px;}
![Page 48: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/48.jpg)
Adding a prefix and suffix
.grid-3.grid-4
.prefix-1
.suffix-1.grid-3
.container-12
![Page 49: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/49.jpg)
Multiple rows
.grid-3.grid-4
.prefix-1
.suffix-1.grid-3
.container-12
.grid-12
![Page 50: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/50.jpg)
Multiple rows: markup<div class="container-12">
<!-- row 1 --><div class="grid-12">
This grid occupies the full width</div>
<!-- row 2 --><div class="grid-3">
One wide</div><div class="grid-4 prefix-1 suffix-1">
Four wide with a prefix and suffix of one each</div><div class="grid-3">
One wide</div>
</div> <!-- /container -->
No need to put each row in its own
wrapping <div>
The container <div> defines the layout
version in use
![Page 51: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/51.jpg)
Stack content vertically with nested grids
.grid-3.grid-6
.grid-3
.container-12
.grid-6
.grid-6
![Page 52: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/52.jpg)
‣ Here’s the catch: Because each grid includes a 10px left and right margin, nesting grids can break your layout
.grid-3.grid-6
.grid-3
.container-12
.grid-6
.grid-6
![Page 53: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/53.jpg)
Alpha and omega fix broken nesting‣ When nesting grids, use the alpha and omega
classes to remove the margins
‣ alpha removes the left margin. It’s the first nested grid.
‣ omega removes the right margin. It’s the last nested grid.
![Page 54: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/54.jpg)
.grid-3
.grid-3.alpha
.grid-3
.container-12
.grid-6.alpha .omega
.grid-3.omega
.grid-6
.alpha removed the left margin
.omega removed the right margin
![Page 55: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/55.jpg)
Additional resources
‣ 960 Gridder and bookmarklet
‣ Variable grid system generator
‣ Other grid systems based on 960.gs
‣ Fluid 960.gs
‣ Typogridphy: Typographical and grid layout CSS framework
‣ and...
![Page 56: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/56.jpg)
The NineSixty themeDrupal’s implementation of 960.gs is even better than the original
http://drupal.org/project/ninesixty
![Page 57: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/57.jpg)
Source: Drupal.org
About NineSixty
‣ NineSixty is the Drupal port of 960.gs
‣ Developed by Joon Park, aka dvessel on Drupal.org
‣ Intended to be used as a base theme
‣ Currently a candidate for Drupal 7 core
‣ Follow the debate on groups.drupal.org
![Page 58: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/58.jpg)
NineSixty’s improvements
‣ Content-first layout using “push” and “pull” classes
‣ Dynamic grid widths based on context
‣ Debugging tools and grid visualization
‣ Right-to-left (RTL) language support
![Page 59: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/59.jpg)
Content-first layout
‣ A design convention in which the content is output as close to the top of the markup as possible
‣ Content should be output before all sidebars
‣ Some designers believe it should be output before a site’s main navigation
‣ This can be very difficult to achieve on a site with one or more left columns
![Page 60: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/60.jpg)
Push and pull classes
‣ Content-first layout can be achieved in NineSixty by “pushing” the content grid to the right while “pulling” a sidebar to the left
‣ These classes use the same naming convention as .grid-X, .prefix-X, and .suffix-X, where X is the grid’s width:
‣ .push-X and .pull-X
![Page 61: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/61.jpg)
Source: NineSixty’s README.txt
‣ Push and pull values should match the grid value of the opposite grid
<div class="container-12"> <div id="content" class="grid-6 push-3"> Content </div>
<div id="sidebar-left" class="grid-3 pull-6"> Sidebar: Left </div>
<div id="sidebar-right" class="grid-3"> Sidebar: Right </div></div>
Match numbers to swap locations
![Page 62: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/62.jpg)
.container-12
.grid-3.grid-6 .grid-3
<div class="container-12"> <div id="content" class="grid-6"> Content </div> <div id="sidebar-left" class="grid-3"> Sidebar: Left </div> <div id="sidebar-right" class="grid-3"> Sidebar: Right </div></div>
Before adding push and pull
![Page 63: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/63.jpg)
<div class="container-12"> <div id="content" class="grid-6 push-3"> Content </div> <div id="sidebar-left" class="grid-3 pull-6"> Sidebar: Left </div> <div id="sidebar-right" class="grid-3"> Sidebar: Right </div></div>
After adding push and pull
.container-12
.grid-3
.pull-6.grid-6.push-3 .grid-3
![Page 64: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/64.jpg)
Dynamic grid widths
‣ In some cases, you may want grids to resize themselves when a region isn’t populated
‣ For example, a 3-6-3 layout should become 3-9 if the right column is empty
‣ Dynamic width assignment is handled using the ns() function
‣ Defined in template.php
![Page 65: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/65.jpg)
‣ X, Y, and Z are all width values
‣ class can be grid, prefix, suffix, push, or pull
‣ $region can be any theme region
‣ Use as many pairs as you like
Structure of ns()
ns('class-X', $region, Y, $region, Z, ...)
Default value
These “pairs” subtract from the
default value
![Page 66: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/66.jpg)
Source: NineSixty’s page.tpl.php
Implementing ns()
<div id="main" class="column <?php print ns('grid-16', $left, 4, $right, 3) . ' ' . ns('push-4', !$left, 4); ?>"> <?php print $content; ?></div>
<?php if ($left): ?> <div id="sidebar-left" class="column sidebar region grid-4 <?php print ns('pull-12', $right, 3); ?>"> <?php print $left; ?> </div><?php endif; ?>
<?php if ($right): ?> <div id="sidebar-right" class="column sidebar region grid-3"> <?php print $right; ?> </div><?php endif; ?>
From page.tpl.php:
![Page 67: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/67.jpg)
Source: NineSixty’s page.tpl.php
<?php print ns('grid-16', $left, 4, $right, 3). ' ' . ns('push-4', !$left, 4); ?>
From #main:
ns('grid-16', $left, 4, $right, 3)
ns('push-4', !$left, 4)
Default width
If left sidebar is present, subtract 4 from default width.
If right sidebar is present, subtract 3 from default width.
If left sidebar is not present, subtract 4 from the push value. This will result
in no push, as 4-4 = 0Default
push value
![Page 68: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/68.jpg)
Source: NineSixty’s page.tpl.php
<?php php print ns('pull-12', $right, 3); ?>
From #sidebar-left:
ns('pull-12', $right, 3)
Default pull value
If right sidebar is present, subtract 3
from default pull value
![Page 69: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/69.jpg)
NineSixty in action
‣ Visit http://ninesixty.fkdemos.com to see how NineSixty...
‣ uses push and pull classes to generate content-first layout
‣ dynamically assigns grid widths based on context
‣ can be used to create different layouts
![Page 70: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/70.jpg)
Implementing a grid-based layoutUsing NineSixty to build your site
![Page 71: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/71.jpg)
When not to use a grid
‣ Implementing a grid will probably be impossible if your site’s layout...
‣ uses irregular column sizes
‣ has irregular margins or gutters
‣ has a width that isn’t divisible by a sane number
![Page 72: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/72.jpg)
‣ Implementing a grid will be difficult — but not impossible — if your site’s layout...
‣ has gutter widths of odd numbers
‣ is fluid
‣ wasn’t designed on a grid
![Page 73: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/73.jpg)
Getting started
‣ Do not change the NineSixty theme on your site!
‣ Hacking NineSixty is like hacking core: It will make upgrading your site very difficult
‣ Instead, subtheme NineSixty or create a totally new theme based on NineSixty
![Page 74: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/74.jpg)
Subtheme
‣ This method is best if your site is (or can be) 960px wide and can utilize 12 or 16 columns
‣ Subtheming instructions and resources on Drupal.org:
‣ Subtheming quick and dirty
‣ Sub-themes, their structure and inheritance
![Page 75: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/75.jpg)
Build a new theme
‣ You should build a new theme when your site’s layout...
‣ isn’t 960px wide
‣ doesn’t use 12 or 16 columns
‣ It’s more efficient to use a new theme than to override virtually all of NineSixty’s CSS
![Page 76: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/76.jpg)
Image source: Client project
Do the math
‣ Be prepared to crunch numbers
‣ Building a new theme can be very confusing
‣ Spreadsheets can help you visualize column, margins, and gutters
![Page 77: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/77.jpg)
‣ Examples (remember that the true “canvas” size of 960.gs is actually 940px):
‣ (940 - ((12 - 1) x 20)) ÷ 12 = 60
‣ (940 - ((16 - 1) x 20)) ÷ 16 = 40
Source: Grids are Good by Khoi Vinh and Mark Boulton
The grid equation
(Canvas - ((Total units - 1) x Gutter)) ÷ Total units = Unit
![Page 78: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/78.jpg)
Four Kitchens’ company website
Case study
![Page 79: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/79.jpg)
Source: fourkitchens.com
‣ Subtheme of NineSixty
‣ 12-column version
![Page 81: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/81.jpg)
Source: fourkitchens.com/blog
Right columngrid-3
Header promosgrid-4
Content columngrid-8 Gutter
grid-1
![Page 83: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/83.jpg)
Source: fourkitchens.com
Right columngrid-3
Content columngrid-8
Guttergrid-1
Footer columnsgrid-3
Sub-footer right column
grid-3
Sub-footer content column
grid-8
Guttergrid-1
![Page 84: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/84.jpg)
Appendix
![Page 85: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/85.jpg)
Learn more about grids
‣ The Grid System
‣ “The ultimate resource in grid systems”
‣ The Grid System’s Flickr pool
‣ My bookmarks tagged “gridsystems”
![Page 86: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/86.jpg)
Downloads
‣ 960 grid system: 960.gs
‣ NineSixty theme for Drupal: drupal.org/project/ninesixty
‣ This and other presentations are available for download at fourkitchens.com/presentations
![Page 87: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/87.jpg)
Contact me
‣ Email: [email protected]
‣ also works for Google Chat and AIM
‣ Skype: toddatfk
‣ Twitter: twitter.com/toddross
![Page 88: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/88.jpg)
Credits‣ “History of the grid” slides were
borrowed heavily from Khoi Vinh and Mark Boulton’s presentation Grids are Good and from Wikipedia
‣ Piet Mondriaan painting was found somewhere online. Copyright holder is unknown
‣ The items listed above are exempt from this presentation’s Creative Commons license
‣ This presentation was created and delivered by Todd Ross Nienkerk, co-founder of Four Kitchens
![Page 89: Drupal theming using the 960.gs grid system - Four … 2009 | Todd Ross Nienkerk Drupal theming using the 960.gs grid system Originally presented at DrupalCamps Copenhagen, Helsinki,](https://reader036.vdocuments.us/reader036/viewer/2022062504/5b1872ad7f8b9a32258bc3e3/html5/thumbnails/89.jpg)
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2009 Four Kitchen Studios, LLC.