View
104
Download
0
Category
Tags:
Preview:
DESCRIPTION
For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations
Citation preview
Todd NienkerkDrupalCon San Francisco | April 20 2010
Accelerated gridtheming using NineSixty
hearts+
Personal introduction
Photo Kristin Hillery
Todd NienkerkCo-founder designer and developerFour Kitchens
toddfourkitchenscom
What is a grid system
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
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
Source Grid (page layout) on Wikipedia
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
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
17 years after the invention of the web we are finally embracing a century-old design philosophy
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 ldquoreuseable abstraction of code wrapped in a well-defined APIrdquo1
A collection of tools and shortcuts designed to minimize code and make your life easier
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Personal introduction
Photo Kristin Hillery
Todd NienkerkCo-founder designer and developerFour Kitchens
toddfourkitchenscom
What is a grid system
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
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
Source Grid (page layout) on Wikipedia
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
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
17 years after the invention of the web we are finally embracing a century-old design philosophy
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 ldquoreuseable abstraction of code wrapped in a well-defined APIrdquo1
A collection of tools and shortcuts designed to minimize code and make your life easier
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Photo Kristin Hillery
Todd NienkerkCo-founder designer and developerFour Kitchens
toddfourkitchenscom
What is a grid system
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
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
Source Grid (page layout) on Wikipedia
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
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
17 years after the invention of the web we are finally embracing a century-old design philosophy
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 ldquoreuseable abstraction of code wrapped in a well-defined APIrdquo1
A collection of tools and shortcuts designed to minimize code and make your life easier
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
What is a grid system
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
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
Source Grid (page layout) on Wikipedia
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
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
17 years after the invention of the web we are finally embracing a century-old design philosophy
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 ldquoreuseable abstraction of code wrapped in a well-defined APIrdquo1
A collection of tools and shortcuts designed to minimize code and make your life easier
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
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
Source Grid (page layout) on Wikipedia
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
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
17 years after the invention of the web we are finally embracing a century-old design philosophy
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 ldquoreuseable abstraction of code wrapped in a well-defined APIrdquo1
A collection of tools and shortcuts designed to minimize code and make your life easier
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
Source Grid (page layout) on Wikipedia
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
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
17 years after the invention of the web we are finally embracing a century-old design philosophy
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 ldquoreuseable abstraction of code wrapped in a well-defined APIrdquo1
A collection of tools and shortcuts designed to minimize code and make your life easier
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source Grid (page layout) on Wikipedia
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
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
17 years after the invention of the web we are finally embracing a century-old design philosophy
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 ldquoreuseable abstraction of code wrapped in a well-defined APIrdquo1
A collection of tools and shortcuts designed to minimize code and make your life easier
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
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
17 years after the invention of the web we are finally embracing a century-old design philosophy
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 ldquoreuseable abstraction of code wrapped in a well-defined APIrdquo1
A collection of tools and shortcuts designed to minimize code and make your life easier
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
17 years after the invention of the web we are finally embracing a century-old design philosophy
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 ldquoreuseable abstraction of code wrapped in a well-defined APIrdquo1
A collection of tools and shortcuts designed to minimize code and make your life easier
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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 ldquoreuseable abstraction of code wrapped in a well-defined APIrdquo1
A collection of tools and shortcuts designed to minimize code and make your life easier
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Layout
When applied to web design grid systems are CSS frameworks that provides standardized rules and shortcuts for building a websitersquos layout
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
JeCroftcom | Whatrsquos not to love about CSS frameworks
ldquoIrsquom convinced that the people railing against CSS frameworks are just trying to drum up some false job securityrdquo
mdashJe Croft designer and author
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Why use a grid system
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
1) Saves time
2) Saves money
3) Reduces frustration
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Stop deconstructing CSS
Understanding someone elsersquos design is much easier when a standard grid system is used
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Photo Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
ldquoEmbrace constraintsrdquo
All modern displays support at least 1024768 resolution
Despite the many advances in web technology itrsquos alljust rectangles
mdash Mark Kraemer National UX Practice Lead EMCcom
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Photo jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Think Vitamin | Web development is moving on mdash Are you
ldquoOur craft is becoming a commodity and the people in charge donrsquot care about the quality of the markup CSS or how short our JavaScript is What matters is how fast you can get it to market how many people it reaches and how cheaply it can be builtrdquo
mdashChristian Heilmann Standards evangelist at Yahoo
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
How do grid systems work
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Example based on 960gs (12-column)
Columns
Grid systems are built using columns
Columns are a grid systemrsquos smallest unit of measurement
Most grid systems contain 12ndash16 columns
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Example based on 960gs (12-column)
Column width
Page regions (header content sidebars etc) are defined by column width
As in ldquoThe header is eight columns widerdquo
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Example based on 960gs (12-column)
Gutters (margins)
Margins or padding are used to create gutters between columns
These gutters provide margins between page regions
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Lean and versatile CSS
A grid systemrsquos CSS should
Be lean and ecient
Be versatile and reusable
Ensure consistent behavior across all common browsers mdash even IE6
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Wrapping ltdivgt elements In fixed-width grid systems the entire layout is
wrapped inside a single ltdivgt element
ltdivgt elements wrap the page regions and define their widths according to the number of columns they span
These ltdivgt elements may be nested to create regions within regions
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Example based on 960gs (12-column)
Floating ltdivgt elements The wrapping ltdivgt
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
classgrid-4
classgrid-4
classgrid-4
class grid-6 class grid-6
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
What can grid systems look likeExamples of grid-based layouts
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Example based on 960gs (12-column)
Layout A Content left sidebar right
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Example based on 960gs (12-column)
Layout B Content between sidebars
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Example based on 960gs (12-column)
Layout C Content right with two left sidebars
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Example based on 960gs (12-column)
Layout D Whatever
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Painting by Piet Mondriaan (later Mondrian)
Layout E The Mondriaan
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
How 960gs works
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source 960gs
What is 960gs
960gs mdash also known as the 960 Grid System mdash was created by Nathan Smith in order to ldquostreamline web development workflowrdquo
Itrsquos both a prototyping and development framework
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source 960gs
Download it for free at http960gs
GPL and MIT licensed
The 960gs download includes
Printable sketch sheets for doodling
Design templates for all most applications Photoshop Illustrator Inkscape OmniGrae etc
Whatrsquos in it
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source 960gs
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
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source 960gs
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
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source 960gs
16-column versionColumns are 40px wide
Everything else remains the same
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Halves
Quarters
Using both versions simultaneously 12- and 16-column layouts can be used on the
same page
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
This flexibility allows designers to work with both 60px- and 40px-wide columns
If 12 or 16 columns donrsquot 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
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
CSS and markupNote 960gs uses underscores in its CSS class names To avoid confusion the examples that follow will use hyphens instead as this is The Drupal Way
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Containers
Grids must be wrapped in a container ltdivgt
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
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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 itrsquos a 12- or 16-column layout
container-12 grid-1 width 60px
container-16 grid-1 width 40px
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Putting containers and grids together
grid-3 grid-6 grid-3
container-12
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Prefixes and suxes
If you want to leave space between columns use a prefix or sux class
Prefix classes add padding to the left of a column
Sux classes add padding to the right
container-12 prefix-1 padding-left 80px
container-12 suffix-1 padding-right 80px
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Adding a prefix and sux
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Multiple rows
grid-3grid-4
prefix-1
suffix-1grid-3
container-12
grid-12
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Multiple rows markupltdiv class=container-12gt
lt-- row 1 --gtltdiv class=grid-12gt
This grid occupies the full widthltdivgt
lt-- row 2 --gtltdiv class=grid-3gt
One wideltdivgtltdiv class=grid-4 prefix-1 suffix-1gt
Four wide with a prefix and suffix of one eachltdivgtltdiv class=grid-3gt
One wideltdivgt
ltdivgt lt-- container --gt
No need to put each row in its own
wrapping ltdivgt
The container ltdivgt defines the layout
version in use
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Stack content vertically with nested grids
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Herersquos the catch Because each grid includes a 10px left and right margin nesting grids can break your layout
grid-3grid-6
grid-3
container-12
grid-6
grid-6
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Alpha and omega fix broken nesting When nesting grids use the alpha and omega
classes to remove the margins
alpha removes the left margin Itrsquos the first nested grid
omega removes the right margin Itrsquos the last nested grid
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
grid-3
grid-3alpha
grid-3
container-12
grid-6alpha omega
grid-3omega
grid-6
alpha removed the left margin
omega removed the right margin
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Grid design tools
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Screenshot from gridderandresshanssonse
960 Gridder gridderandreehanssonse
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Screenshot from Drupalorg
960 Gridder module for Drupal drupalorgprojectgridder
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Screenshots from spry-softcomgrids
Variable grid system generator spry-softcomgrids
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Grid systems based on 960gs
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Fluid 960gs designinfluencescomfluid960gs
Variable-width version of 960gs
Screenshot from designinfluencescomfluid960gs
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Typogridphy csswizardrycomtypogridphy
Typographical and grid layout CSS framework
Screenshot from csswizardrycomtypogridphy
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
And
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
The NineSixty themehttpdrupalorgprojectninesixty
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source Drupalorg
About NineSixty
NineSixty is the Drupal port of 960gs
Developed by Joon Park aka dvessel on Drupalorg
Intended to be used as a base theme
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Screenshot from ninesixtyfkdemoscom
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
NineSixtyrsquos improvements
Content-first layout using ldquopushrdquo and ldquopullrdquo classes
Now part of 960gs proper
Dynamic grid widths based on context using ns()
Debugging tools and grid visualization
Right-to-left (RTL) language support
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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
This can be very dicult to achieve on a site with one or more left columns
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Push and pull classes
Content-first layout can be achieved in NineSixty by ldquopushingrdquo the content grid to the right while ldquopullingrdquo a sidebar to the left
These classes use the same naming convention as grid-X prefix-X and suffix-X where X is the gridrsquos width
push-X and pull-X
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source NineSixtyrsquos READMEtxt
Push and pull values should match the grid value of the opposite grid
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt
ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt
ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Match numbers to swap locations
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
container-12
sidebar-leftgrid-3
contentgrid-6
sidebar-rightgrid-3
ltdiv class=container-12gt ltdiv id=content class=grid-6gt Content ltdivgt ltdiv id=sidebar-left class=grid-3gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
Before adding push and pull
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
ltdiv class=container-12gt ltdiv id=content class=grid-6 push-3gt Content ltdivgt ltdiv id=sidebar-left class=grid-3 pull-6gt Sidebar Left ltdivgt ltdiv id=sidebar-right class=grid-3gt Sidebar Right ltdivgtltdivgt
After adding push and pull
container-12
sidebar-leftgrid-3pull-6
contentgrid-6push-3
sidebar-rightgrid-3
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Dynamic grid widths
In some cases you may want grids to resize themselves when a region isnrsquot 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 templatephp
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
class can be grid prefix suffix push or pull
X Y and Z are all width values
$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 ldquopairsrdquo subtract from the
default value
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source NineSixtyrsquos pagetplphp
Implementing ns()
ltdiv id=main class=column ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gtgt ltphp print $content gtltdivgt
ltphp if ($left) gt ltdiv id=sidebar-left class=column sidebar region grid-4 ltphp print ns(pull-12 $right 3) gtgt ltphp print $left gt ltdivgtltphp endif gt
ltphp if ($right) gt ltdiv id=sidebar-right class=column sidebar region grid-3gt ltphp print $right gt ltdivgtltphp endif gt
From pagetplphp
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source NineSixtyrsquos pagetplphp
ltphp print ns(grid-16 $left 4 $right 3) ns(push-4 $left 4) gt
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
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Source NineSixtyrsquos pagetplphp
ltphp php print ns(pull-12 $right 3) gt
From sidebar-left
ns(pull-12 $right 3)
Default pull value
If right sidebar is present subtract 3
from default pull value
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
NineSixty in action
Visit httpninesixtyfkdemoscom 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 di$erent layouts
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Implementing a grid-based layoutUsing NineSixty to build your site
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
When not to use a grid
Implementing a grid will probably be impossible if your sitersquos layout
uses irregular column sizes
has irregular margins or gutters
has a width that isnrsquot divisible by a sane number
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Implementing a grid will be dicult mdash but not impossible mdash if your sitersquos layout
has gutter widths of odd numbers
is fluid
wasnrsquot designed on a grid
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Getting started
Do not change the NineSixty theme on your site
Hacking NineSixty is like hacking core It will make upgrading your site very dicult
Instead subtheme NineSixty or create a totally new theme based on NineSixty
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
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 Drupalorg
Subtheming quick and dirty
Sub-themes their structure and inheritance
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Build a new theme
You should build a new theme when your sitersquos layout
isnrsquot 960px wide
doesnrsquot use 12 or 16 columns
Itrsquos more ecient to use a new theme than to override virtually all of NineSixtyrsquos CSS
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Image source Client project
Do the math
Be prepared to crunch numbers
Building a new grid can be very confusing
Spreadsheets can help you visualize columns margins and gutters
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
960gs as a prototyping and development system
Examples
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Refresh Boston 16 columns
refreshbostonorg
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Refresh Boston 16 columns
refreshbostonorg
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Convertbot 16 columns
tapbotscomconvertbot
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Convertbot 16 columns
tapbotscomconvertbot
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Pepsi comp 16 columns
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Pepsi comp 16 columns
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Credits
AAFES comp 12 columns
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Credits
AAFES comp 12 columns
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
stopdesigncom 12 columns
stopdesigncom
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
stopdesigncom 12 columns
stopdesigncom
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Drupalorg redesign 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtml
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Four Kitchens 12 columns
infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Appendix
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Learn more about grids
The Grid System thegridsystemorg
ldquoThe ultimate resource in grid systemsrdquo
The Grid Systemrsquos Flickr pool
My bookmarks tagged ldquogridsystemsrdquo deliciouscomtoddrossgridsystems
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Downloads
960 grid system 960gs
NineSixty theme for Drupal drupalorgprojectninesixty
This and other presentations are available for download at fourkitchenscompresentations
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Contact Todd
Email toddfourkitchenscom
also works for Google Chat and AIM
Skype toddatfk
Twitter twittercomtoddross
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Questions
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Credits ldquoHistory of the gridrdquo slides were
borrowed heavily from Khoi Vinh and Mark Boultonrsquos 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 presentationrsquos Creative Commons license
This presentation was created by Nathan Smith of Fellowship Tech and Todd Ross Nienkerk co-founder of Four Kitchens and delivered by Todd Ross Nienkerk
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
All content in this presentation except where noted otherwise is Creative Commons Attribution-ShareAlike 30 licensed and copyright 2010 Four Kitchen Studios LLC
Recommended