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
+
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
2/111
Personal introduction
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
3/111
Photo: Kristin Hillery
Todd NienkerkCo-founder, designer, and developerFour Kitchens
mailto:[email protected]:[email protected]8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
4/111
What is a grid system?
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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)8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
8/111
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 themachine
championing standardization
Sound familiar?
http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
9/111
Source: Grids are Good by Khoi Vinh and Mark Boulton
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
http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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_framework8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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...
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
13/111
Layout
When applied to web design, grid systems are CSSframeworks that provides standardized rules and
shortcuts for building a websites layout
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
15/111
Why use a grid system?
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
16/111
1) Saves time
2) Saves money
3) Reduces frustration
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
19/111
Stop deconstructing CSS
Understanding someone elses design is mucheasier when a standard grid system is used
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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--/26330721228/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
23/111
How do grid systemswork?
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
25/111
Example based on 960.gs (12-column)
Column width
Page regions (header,content, sidebars, etc.)
are defined by columnwidth
As in: The header iseight columns wide
http://960.gs/http://960.gs/http://960.gs/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
26/111
Example based on 960.gs (12-column)
Gutters (margins)
Margins or padding areused to create gutters
between columns
These gutters providemargins between pageregions
http://960.gs/http://960.gs/http://960.gs/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
29/111
Example based on 960.gs (12-column)
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
http://960.gs/http://960.gs/http://960.gs/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
30/111
What can grid systems
look like?Examples of grid-based layouts
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
31/111
Example based on 960.gs (12-column)
Layout A: Content left, sidebar right
http://960.gs/http://960.gs/http://960.gs/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
32/111
Example based on 960.gs (12-column)
Layout B: Content between sidebars
http://960.gs/http://960.gs/http://960.gs/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
33/111
Example based on 960.gs (12-column)
Layout C: Content right with two left sidebars
http://960.gs/http://960.gs/http://960.gs/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
34/111
Example based on 960.gs (12-column)
Layout D: Whatever
http://960.gs/http://960.gs/http://960.gs/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
35/111
Painting by Piet Mondriaan (later Mondrian)
Layout E: The Mondriaan
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
36/111
How 960.gs works
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
http://960.gs/http://960.gs/http://960.gs/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
41/111
Source: 960.gs
16-column version
Columns are 40px wide
Everything else remains the same
http://960.gs/http://960.gs/http://960.gs/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
42/111
Halves
Quarters
Using both versions
simultaneously 12- and 16-column layouts can be used on the
same page
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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.
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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;
}
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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;}
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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;
}
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
48/111
Note that grid width does not increase by 60px or40px each time
Each increase must account for the 20px gutterbetween 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;
}
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
49/111
Putting containers and
grids together
.grid-3 .grid-6 .grid-3
.container-12
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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;
}
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
51/111
Adding a prefix and sux
.grid-3
.grid-4
.prefix-1
.suffix-1.grid-3
.container-12
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
52/111
Multiple rows
.grid-3
.grid-4
.prefix-1
.suffix-1
.grid-3
.container-12
.grid-12
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
54/111
Stack content vertically
with nested grids
.grid-3
.grid-6
.grid-3
.container-12
.grid-6
.grid-6
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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.
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
57/111
.grid-3
.grid-3
.alpha
.grid-3
.container-12
.grid-6
.alpha .omega
.grid-3
.omega
.grid-6
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
58/111
.grid-3
.grid-3
.alpha
.grid-3
.container-12
.grid-6
.alpha .omega
.grid-3
.omega
.grid-6
.alpharemoved
the left margin
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
60/111
Grid design tools
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/5014908/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
64/111
Grid systems based on960.gs
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
67/111
And...
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
68/111
The NineSixty themehttp://drupal.org/project/ninesixty
http://drupal.org/project/ninesixtyhttp://drupal.org/project/ninesixty8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/ninesixty8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
70/111
Screenshot from ninesixty.fkdemos.com
http://ninesixty.fkdemos.com/http://ninesixty.fkdemos.com/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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()
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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()
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
79/111
Source: NineSixtys page.tpl.php
Implementing ns()
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
80/111
Source: NineSixtys page.tpl.php
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:
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
81/111
Source: NineSixtys page.tpl.php
ns('pull-12', $right, 3)
Default
pull value
If right sidebar is
present, subtract 3
from default pull value
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
83/111
Implementing a grid-based layoutUsing NineSixty to build your site
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/4410888/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
90/111
960.gs as a prototypingand development system
Examples
Refresh Boston: 16 columns
http://refreshboston.org/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
91/111
Refresh Boston: 16 columns
http://refreshboston.org/http://refreshboston.org/http://refreshboston.org/http://refreshboston.org/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
92/111
Convertbot: 16 columns
http://refreshboston.org/http://refreshboston.org/http://tapbots.com/convertbot8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
93/111
Convertbot: 16 columns
http://tapbots.com/convertbothttp://tapbots.com/convertbothttp://tapbots.com/convertbot8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
94/111
Pepsi comp: 16 columns
http://tapbots.com/convertbothttp://tapbots.com/convertbot8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
95/111
Pepsi comp: 16 columns
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
96/111
AAFES comp: 12 columns
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
97/111
Credits
AAFES comp: 12 columns
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
98/111
Credits
stopdesign.com 12 columns
http://stopdesign.com/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
99/111
stopdesign.com 12 columns
http://stopdesign.com/http://stopdesign.com/http://stopdesign.com/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
100/111
Drupal.org redesign: 12 columns
http://stopdesign.com/http://stopdesign.com/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
101/111
Drupal.org redesign: 12 columns
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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.html8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
104/111
http://fourkitchens.com/http://fourkitchens.com/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
105/111
Appendix
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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]8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
109/111
Questions?
8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
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/8/8/2019 Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
111/111