Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco

8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco

1/111

Todd NienkerkDrupalCon San Francisco | April 20, 2010

Accelerated grid

theming using NineSixty

+


2/111

Personal introduction


3/111

Photo: Kristin Hillery

Todd NienkerkCo-founder, designer, and developerFour Kitchens

[email protected]
mailto:[email protected]:[email protected]


4/111

What is a grid system?


5/111

Source: Grids are Good by Khoi Vinh and Mark Boulton

History of the grid

The practice of using a grid to guide design andpage layout is nearly a century old

In the 1910s and 1920s, ornamental design gaveway 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
http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/


6/111

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), questionedthe relevance of the conventional page layout ofthe time

They devised a flexible system to help designersachieve coherency in organizing the page

Typographic grids
http://en.wikipedia.org/wiki/Grid_(page_layout)http://en.wikipedia.org/wiki/Grid_(page_layout)http://en.wikipedia.org/wiki/Grid_(page_layout)


7/111

Source: Grid (page layout) on Wikipedia
http://en.wikipedia.org/wiki/Grid_(page_layout)http://en.wikipedia.org/wiki/Grid_(page_layout)


8/111


Nearly a century ago

Modernists looked to build a new aesthetic by...

deriving beauty from the innate qualities of themachine

championing standardization

Sound familiar?


9/111


Today

Web designers have turned to grid-based designin order to...

derive beauty from the innate qualities of thebrowser

champion standardization

17 years after the invention of the web, we arefinally embracing a century-old design philosophy


10/111

1 Source: Software framework on Wikipedia

Grid systems on the web

On the web, grid systems usually take the form ofCSS frameworks

A framework is a reuseable abstraction of codewrapped in a well-defined API1

A collection of tools and shortcuts designed to

minimize code and make your life easier
http://en.wikipedia.org/wiki/Software_frameworkhttp://en.wikipedia.org/wiki/Software_frameworkhttp://en.wikipedia.org/wiki/Software_framework


11/111

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


12/111

CSS frameworks

Apply the principles of software frameworks toweb design

They provide standardized rules and shortcuts for:

browser resets

typography

navigation

print style

and...


13/111

Layout

When applied to web design, grid systems are CSSframeworks that provides standardized rules and

shortcuts for building a websites layout


14/111

JeCroft.com | Whats not to love about CSS frameworks?

Im convinced that the people railing

against CSS frameworks are just trying todrum up some false job security.

JeCroft, designer and author
http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks/


15/111

Why use a grid system?


16/111

1) Saves time

2) Saves money

3) Reduces frustration


17/111

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 howto implement layouts


18/111

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 sourceof your problems


19/111

Stop deconstructing CSS

Understanding someone elses design is mucheasier when a standard grid system is used


20/111

Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)

Embrace constraints

All modern displayssupport at least

1024768 resolution

Despite the manyadvances in webtechnology, its all

just rectangles

Mark Kraemer, National UX Practice Lead, EMC.com
http://www.flickr.com/photos/aaronschmidt/1490074519/http://www.flickr.com/photos/aaronschmidt/1490074519/http://www.flickr.com/photos/aaronschmidt/1490074519/


21/111

Photo: jontidmarsh on Flickr (Creative Commons BY-SA)

Enforcing a grid canaccelerate design whilemaintaining order
http://www.flickr.com/photos/--jon--/2633072122http://www.flickr.com/photos/--jon--/2633072122


22/111

Think Vitamin | Web development is moving on Are you?

Our craft is becoming a commodity, and thepeople in charge dont care about the quality ofthe markup, CSS, or how short our JavaScript is.

What matters is how fast you can get it tomarket, how many people it reaches, and howcheaply it can be built.

Christian Heilmann, Standards evangelist at Yahoo
http://thinkvitamin.com/dev/web-development-is-moving-on-are-you/http://thinkvitamin.com/dev/web-development-is-moving-on-are-you/http://thinkvitamin.com/dev/web-development-is-moving-on-are-you/


23/111

How do grid systemswork?


24/111

Example based on 960.gs (12-column)

Columns

Grid systems are builtusing columns

Columns are a gridsystems smallest unitof measurement

Most grid systemscontain 1216 columns
http://960.gs/http://960.gs/http://960.gs/


25/111


Column width

Page regions (header,content, sidebars, etc.)

are defined by columnwidth

As in: The header iseight columns wide


26/111


Gutters (margins)

Margins or padding areused to create gutters

between columns

These gutters providemargins between pageregions


27/111

Lean and versatile CSS

A grid systems CSS should:

Be lean and ecient

Be versatile and reusable

Ensure consistent behavior across all common

browsers even IE6


28/111

Wrapping elements

In fixed-width grid systems, the entire layout is

wrapped inside a single element

elements wrap the page regions and define

their widths according to the number of columnsthey span

These elements may be nested to createregions within regions


29/111


Floating elements

The wrapping

elements are assigned

a column width using aCSS class

Because these classesalso float the elements,they simply fall intoplace on the page

class: grid-12

class: grid-8

class:

grid-4

class:grid-4

class:grid-4

class: grid-6 class: grid-6


30/111

What can grid systems

look like?Examples of grid-based layouts


31/111


Layout A: Content left, sidebar right


32/111


Layout B: Content between sidebars


33/111


Layout C: Content right with two left sidebars


34/111


Layout D: Whatever


35/111

Painting by Piet Mondriaan (later Mondrian)

Layout E: The Mondriaan


36/111

How 960.gs works


37/111

Source: 960.gs

What is 960.gs?

960.gs also known as the 960 Grid System was created by Nathan Smith in order to

streamline web development workflow Its both a prototyping and development

framework
http://960.gs/http://sonspring.com/http://sonspring.com/http://960.gs/http://960.gs/


38/111

Source: 960.gs

Download it for free at http://960.gs

GPL and MIT licensed

The 960.gs download includes:

Printable sketch sheets for doodling

Design templates for all most applications:Photoshop, Illustrator, Inkscape, OmniGrae, etc.

Whats in it
http://960.gs/http://960.gs/http://960.gs/http://960.gs/http://960.gs/


39/111

Source: 960.gs

Technical specs

960px wide with a 940px usable area

Two versions: 12- and 16-column

These can be implemented separately orsimultaneously

Each column has a 10px margin on the left andright, which creates a 20px gutter betweencolumns


40/111

Source: 960.gs

12-column version

Columns are 60px wide Gutters are 20px wide

10px margin on the left andright prevents collision withbrowser chrome

Availableworking areais 940px wide
http://960.gs/http://960.gs/http://960.gs/http://960.gs/http://960.gs/http://960.gs/


41/111

Source: 960.gs

16-column version

Columns are 40px wide

Everything else remains the same


42/111

Halves

Quarters

Using both versions

simultaneously 12- and 16-column layouts can be used on the

same page


43/111

This flexibility allows designers to work with both60px- and 40px-wide columns

If 12 or 16 columns dont 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


44/111

CSS and markupNote: 960.gs uses underscores in its CSS class names. To avoid confusion, theexamples that follow will use hyphens instead, as this is The Drupal Way.


45/111

Containers

Grids must be wrapped

in a container

Containers center thecontent and definewhich version of thegrid will be

implemented

.container-12,

.container-16 {margin-left: auto;margin-right: auto;width: 960px;

}


46/111

Grids

Grids are held insidecontainers and are

floated left so they fallinto placeautomatically

They also provide 10px

margins on the left andright

.grid-1,

.grid-2,

.grid-3,

....grid-16 {display: inline;float: left;position: relative;margin-left: 10px;

margin-right: 10px;}


47/111

Grid widths

The width of each gridis determined by the

container that wraps it For example, a one-

column grid is either60px or 40px

depending on whetherits a 12- or 16-columnlayout

.container-12 .grid-1 {

width: 60px;}

.container-16 .grid-1 {width: 40px;

}


48/111

Note that grid width does not increase by 60px or40px each time

Each increase must account for the 20px gutterbetween grids


width: 60px;}


}


}


width: 40px;}


}


}


49/111

Putting containers and

grids together

.grid-3 .grid-6 .grid-3

.container-12


50/111

Prefixes and suxes

If you want to leavespace between

columns, use a prefixor sux class

Prefix classes addpadding to the left of a

column

Sux classes addpadding to the right

.container-12 .prefix-1 {

padding-left: 80px;}

.container-12 .suffix-1 {padding-right: 80px;

}


51/111

Adding a prefix and sux

.grid-3

.grid-4

.prefix-1

.suffix-1.grid-3

.container-12


52/111

Multiple rows

.grid-3

.grid-4

.prefix-1

.suffix-1

.grid-3

.container-12

.grid-12


53/111

Multiple rows: markup

This grid occupies the full width

One wide

Four wide with a prefix and suffix of one each

One wide

No need to put

each row in its own

wrapping

The container

defines the layout

version in use


54/111

Stack content vertically

with nested grids

.grid-3

.grid-6

.grid-3

.container-12

.grid-6

.grid-6


55/111

Heres the catch: Because each grid includes a10px left and right margin, nesting grids can break

your layout

.grid-3

.grid-6

.grid-3

.container-12

.grid-6

.grid-6


56/111

Alpha and omega fix

broken nesting When nesting grids, use the alpha and omega

classes to remove the margins

alpha removes the left margin. Its the first nested

grid.

omega removes the right margin. Its the last

nested grid.


57/111

.grid-3

.grid-3

.alpha

.grid-3

.container-12

.grid-6

.alpha .omega

.grid-3

.omega

.grid-6


58/111

.grid-3

.grid-3

.alpha

.grid-3

.container-12

.grid-6

.alpha .omega

.grid-3

.omega

.grid-6

.alpharemoved

the left margin


59/111

.grid-3

.grid-3

.alpha

.grid-3

.container-12

.grid-6

.alpha .omega

.grid-3

.omega

.grid-6

.alpharemoved

the left margin

.omegaremoved

the right margin


60/111

Grid design tools


61/111

Screenshot from gridder.andresshansson.se

960 Gridder: gridder.andreehansson.se
http://gridder.andresshansson.se/http://gridder.andreehansson.se/http://gridder.andreehansson.se/http://gridder.andresshansson.se/http://gridder.andresshansson.se/


62/111

Screenshot from Drupal.org

960 Gridder module for Drupal: drupal.org/project/gridder
http://drupal.org/node/501490http://drupal.org/project/gridderhttp://drupal.org/project/gridderhttp://drupal.org/project/gridderhttp://drupal.org/project/gridderhttp://drupal.org/node/501490http://drupal.org/node/501490


63/111

Screenshots from spry-soft.com/grids

Variable grid system generator: spry-soft.com/grids
http://www.%20spry-soft.com/grids/http://spry-soft.com/grids/http://spry-soft.com/grids/http://spry-soft.com/grids/http://spry-soft.com/grids/http://www.%20spry-soft.com/grids/http://www.%20spry-soft.com/grids/


64/111

Grid systems based on960.gs


65/111

Fluid 960.gs: designinfluences.com/fluid960gs

Variable-width version of 960.gs

Screenshot from designinfluences.com/fluid960gs
http://designinfluences.com/fluid960gs/http://designinfluences.com/fluid960gs/http://designinfluences.com/fluid960gs/http://www.designinfluences.com/fluid960gs/http://www.designinfluences.com/fluid960gs/


66/111

Typogridphy: csswizardry.com/typogridphy

Typographical and grid layout CSS framework

Screenshot from csswizardry.com/typogridphy
http://csswizardry.com/typogridphy/http://csswizardry.com/typogridphy/http://csswizardry.com/typogridphy/http://csswizardry.com/typogridphy/http://csswizardry.com/typogridphy/


67/111

And...


68/111

The NineSixty themehttp://drupal.org/project/ninesixty
http://drupal.org/project/ninesixtyhttp://drupal.org/project/ninesixty


69/111

Source: Drupal.org

About NineSixty

NineSixty is the Drupal port of 960.gs

Developed by Joon Park, aka dvessel on

Drupal.org

Intended to be used as a base theme
http://drupal.org/project/ninesixtyhttp://drupal.org/user/56782http://drupal.org/user/56782http://drupal.org/project/ninesixtyhttp://drupal.org/project/ninesixty


70/111

Screenshot from ninesixty.fkdemos.com
http://ninesixty.fkdemos.com/http://ninesixty.fkdemos.com/


71/111

NineSixtys improvements

Content-first layout using push and pull classes

Now part of 960.gs proper

Dynamic grid widths based on context using ns()

Debugging tools and grid visualization

Right-to-left (RTL) language support


72/111

Content-first layout

A design convention in which the content is outputas 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 withone or more left columns


73/111

Push and pull classes

Content-first layout can be achieved in NineSixtyby pushing the content grid to the right while

pulling a sidebar to the left These classes use the same naming convention

as .grid-X, .prefix-X, and .suffix-X, where X is the

grids width:

.push-X and .pull-X


74/111

Source: NineSixtys README.txt

Push and pull values should match the grid valueof the opposite grid

Content

Sidebar: Left

Sidebar: Right

Match numbers to

swap locations

Before adding push and pull


75/111

.container-12

#sidebar-left.grid-3

#content.grid-6

#sidebar-right.grid-3

Content

Sidebar: Left

Sidebar: Right

Before adding push and pull

After adding push and pull


76/111

Content

Sidebar: Left

Sidebar: Right

After adding push and pull

.container-12

#sidebar-left.grid-3.pull-6

#content.grid-6.push-3

#sidebar-right.grid-3


77/111

Dynamic grid widths

In some cases, you may want grids to resizethemselves when a region isnt populated

For example, a 3-6-3 layout should become 3-9 ifthe right column is empty

Dynamic width assignment is handled using the

ns() function

Defined in template.php

Structure of ns()


78/111

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 pairs

subtract from the

default value

Implementing ns()


79/111

Source: NineSixtys page.tpl.php

Implementing ns()


80/111


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 notpresent, subtract

4 from the push value. This will result

in no push, as 4-4 = 0

Default

push value

From #sidebar-left:


81/111


ns('pull-12', $right, 3)

Default

pull value

If right sidebar is

present, subtract 3

from default pull value


82/111

NineSixty in action

Visit http://ninesixty.fkdemos.com to see howNineSixty...

uses push and pull classes to generate content-first layout

dynamically assigns grid widths based on

context can be used to create dierent layouts
http://ninesixty.fkdemos.com/http://ninesixty.fkdemos.com/


83/111

Implementing a grid-based layoutUsing NineSixty to build your site


84/111

When notto use a grid

Implementing a grid will probably be impossible ifyour sites layout...

uses irregular column sizes

has irregular margins or gutters

has a width that isnt divisible by a sane number


85/111

Implementing a grid will be dicult but notimpossible if your sites layout...

has gutter widths of odd numbers

is fluid

wasnt designed on a grid


86/111

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 totallynew theme based on NineSixty


87/111

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 onDrupal.org:

Subtheming quick and dirty

Sub-themes, their structure and inheritance
http://drupal.org/node/225125http://drupal.org/node/441088http://drupal.org/node/225125http://drupal.org/node/225125http://drupal.org/node/441088http://drupal.org/node/441088


88/111

Build a new theme

You should build a new theme when your siteslayout...

isnt 960px wide

doesnt use 12 or 16 columns

Its more ecient to use a new theme than tooverride virtually all of NineSixtys CSS


89/111

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


90/111

960.gs as a prototypingand development system

Examples

Refresh Boston: 16 columns
http://refreshboston.org/


91/111

Refresh Boston: 16 columns
http://refreshboston.org/http://refreshboston.org/http://refreshboston.org/http://refreshboston.org/


92/111

Convertbot: 16 columns
http://refreshboston.org/http://refreshboston.org/http://tapbots.com/convertbot


93/111

Convertbot: 16 columns
http://tapbots.com/convertbothttp://tapbots.com/convertbothttp://tapbots.com/convertbot


94/111

Pepsi comp: 16 columns
http://tapbots.com/convertbothttp://tapbots.com/convertbot


95/111

Pepsi comp: 16 columns


96/111

AAFES comp: 12 columns


97/111

Credits

AAFES comp: 12 columns


98/111

Credits

stopdesign.com 12 columns
http://stopdesign.com/


99/111

stopdesign.com 12 columns
http://stopdesign.com/http://stopdesign.com/http://stopdesign.com/


100/111

Drupal.org redesign: 12 columns
http://stopdesign.com/http://stopdesign.com/


101/111

Drupal.org redesign: 12 columns


102/111

Four Kitchens: 12 columns
http://fourkitchens.com/http://infrastructure.drupal.org/drupal.org-style-guide/prototype.htmlhttp://infrastructure.drupal.org/drupal.org-style-guide/prototype.html


103/111

Four Kitchens: 12 columns
http://fourkitchens.com/http://fourkitchens.com/http://infrastructure.drupal.org/drupal.org-style-guide/prototype.htmlhttp://infrastructure.drupal.org/drupal.org-style-guide/prototype.htmlhttp://fourkitchens.com/


104/111
http://fourkitchens.com/http://fourkitchens.com/


105/111

Appendix


106/111

Learn more about grids

The Grid System: thegridsystem.org

The ultimate resource in grid systems

The Grid Systems Flickr pool

My bookmarks tagged gridsystems:delicious.com/toddross/gridsystems
http://www.flickr.com/groups/thegridsystem/pool/http://delicious.com/toddross/gridsystemshttp://delicious.com/toddross/gridsystemshttp://www.flickr.com/groups/thegridsystem/pool/http://www.flickr.com/groups/thegridsystem/pool/http://thegridsystem.org/http://thegridsystem.org/


107/111

Downloads

960 grid system: 960.gs

NineSixty theme for Drupal: drupal.org/project/

ninesixty

This and other presentations are available fordownload at fourkitchens.com/presentations
http://fourkitchens.com/presentations/http://fourkitchens.com/presentations/http://fourkitchens.com/presentations/http://drupal.org/project/ninesixty/http://drupal.org/project/ninesixty/http://drupal.org/project/ninesixty/http://drupal.org/project/ninesixty/http://960.gs/http://960.gs/


108/111

Contact Todd

Email: [email protected]

also works for Google Chat and AIM

Skype: toddatfk

Twitter: twitter.com/toddross
http://twitter.com/toddross/http://twitter.com/toddross/http://twitter.com/toddross/mailto:[email protected]:[email protected]


109/111

Questions?


110/111

Credits

History of the grid slides wereborrowed heavily from Khoi Vinhand Mark Boultons presentationGrids are Good and from

Wikipedia

Piet Mondriaan painting was foundsomewhere online. Copyrightholder is unknown

The items listed above are exemptfrom this presentations CreativeCommons license

This presentation was created byNathan Smith of Fellowship Techand Todd Ross Nienkerk, co-founder of Four Kitchens, and

delivered by Todd Ross Nienkerk
http://livepage.apple.com/http://livepage.apple.com/


111/111

Documents

Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco