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

Personal introduction

Photo Kristin Hillery

Todd NienkerkCo-founder designer and developerFour Kitchens

toddfourkitchenscom

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 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

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

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

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

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

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

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

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 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)

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

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

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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Grid design tools

Screenshot from gridderandresshanssonse

960 Gridder gridderandreehanssonse

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

960gs as a prototyping and development system

Examples

Refresh Boston 16 columns

refreshbostonorg

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

Pepsi comp 16 columns

Credits

AAFES comp 12 columns

Credits

AAFES comp 12 columns

stopdesigncom 12 columns

stopdesigncom

Credits

AAFES comp 12 columns

Credits

AAFES comp 12 columns

stopdesigncom 12 columns

stopdesigncom

Credits

AAFES comp 12 columns

stopdesigncom 12 columns

stopdesigncom

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

Drupalorg redesign 12 columns

infrastructuredrupalorgdrupalorg-style-guideprototypehtml

Four Kitchens 12 columns

infrastructuredrupalorgdrupalorg-style-guideprototypehtmlfourkitchenscom

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

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

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