Professional Documents
Culture Documents
Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
Accelerated Grid Theming 2010-04-20 Drupalcon San Francisco
♥
+
Todd Nienkerk
DrupalCon San Francisco | April 20, 2010
Personal introduction
Todd Nienkerk
Co-founder, designer, and developer
Four Kitchens
todd@fourkitchens.com
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 else’s design is much
easier when a standard grid system is used
“Embrace constraints”
— Mark Kraemer, National UX Practice Lead, EMC.com
Source: 960.gs
What’s in it
‣ Download it for free at http://960.gs
‣ GPL and MIT licensed
‣ The 960.gs download includes:
‣ Printable sketch sheets for doodling
‣ Design templates for all most applications:
Photoshop, Illustrator, Inkscape, OmniGraffle, etc.
Source: 960.gs
Technical specs
‣ 960px wide with a 940px usable area
‣ Two versions: 12- and 16-column
‣ These can be implemented separately or
simultaneously
‣ Each column has a 10px margin on the left and
right, which creates a 20px gutter between
columns
Source: 960.gs
12-column version
Columns are 60px wide Gutters are 20px wide
Source: 960.gs
16-column version
Columns are 40px wide
Source: 960.gs
Using both versions
simultaneously
‣ 12- and 16-column layouts can be used on the
same page
Halves
Quarters
‣ This flexibility allows designers to work with both
60px- and 40px-wide columns
implemented
Grids
‣ Grids are held inside .grid-1,
.grid-2,
containers and are .grid-3,
floated left so they fall ...
into place .grid-16 {
display: inline;
automatically float: left;
position: relative;
‣ They also provide 10px margin-left: 10px;
margins on the left and margin-right: 10px;
}
right
Grid widths
‣ The width of each grid
is determined by the .container-12 .grid-1 {
container that wraps it width: 60px;
}
‣ For example, a one-
.container-16 .grid-1 {
column grid is either width: 40px;
60px or 40px }
depending on whether
it’s a 12- or 16-column
layout
‣ 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 .suffix-1 {
‣ Prefix classes add padding-right: 80px;
padding to the left of a }
column
‣ Suffix classes add
padding to the right
Adding a prefix and suffix
.container-12
.grid-4
.grid-3 .prefix-1 .grid-3
.suffix-1
Multiple rows
.container-12
.grid-12
.grid-4
.grid-3 .prefix-1 .grid-3
.suffix-1
Multiple rows: markup
<div class="container-12">
The container <div>
defines the layout <!-- row 1 -->
<div class="grid-12">
version in use
This grid occupies the full width
</div>
.grid-6
.grid-3 .grid-3
.grid-6
‣ Here’s the catch: Because each grid includes a
10px left and right margin, nesting grids can break
your layout
.grid-6
.container-12
.grid-6
.grid-3
.grid-6
.grid-3
Alpha and omega fix
broken nesting
‣ When nesting grids, use the alpha and omega
classes to remove the margins
‣ alpha removes the left margin. It’s the first nested
grid.
‣ omegaremoves the right margin. It’s the last
nested grid.
.grid-6
.container-12
.grid-3 .grid-3
.alpha .omega
.grid-3 .grid-3
.grid-6
.alpha .omega
.grid-6
.container-12
.grid-3 .grid-3
.alpha .omega
.grid-3 .grid-3
.grid-6
.alpha .omega
.alpha removed
the left margin
.grid-6
.container-12
.grid-3 .grid-3
.alpha .omega
.grid-3 .grid-3
.grid-6
.alpha .omega
Source: Drupal.org
Screenshot from ninesixty.fkdemos.com
NineSixty’s 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
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 difficult to achieve on a site with
one or more left columns
Push and pull classes
‣ Content-first layout can be achieved in NineSixty
by “pushing” the content grid to the right while
“pulling” a sidebar to the left
‣ These classes use the same naming convention
as .grid-X, .prefix-X, and .suffix-X, where X is the
grid’s width:
‣ .push-X and .pull-X
‣ Push and pull values should match the grid value
of the opposite grid
<div class="container-12">
<div id="content" class="grid-6 push-3">
Match numbers to
Content
swap locations
</div>
<div class="container-12">
<div id="content" class="grid-6">
Content
</div>
<div id="sidebar-left" class="grid-3">
Sidebar: Left
</div>
<div id="sidebar-right" class="grid-3">
Sidebar: Right
</div>
</div>
After adding push and pull
.container-12
#sidebar-left #content
#sidebar-right
.grid-3 .grid-6
.grid-3
.pull-6 .push-3
<div class="container-12">
<div id="content" class="grid-6 push-3">
Content
</div>
<div id="sidebar-left" class="grid-3 pull-6">
Sidebar: Left
</div>
<div id="sidebar-right" class="grid-3">
Sidebar: Right
</div>
</div>
Dynamic grid widths
‣ In some cases, you may want grids to resize
themselves when a region isn’t populated
‣ For example, a 3-6-3 layout should become 3-9 if
the right column is empty
‣ Dynamic width assignment is handled using the
ns() function
‣ Defined in template.php
Structure of ns()
These “pairs”
Default subtract from the
value default value
ns('push-4', !$left, 4)
If right sidebar is
Default present, subtract 3
pull value from default pull value
ns('pull-12', $right, 3)
960.gs as a prototyping
and development system
Refresh Boston: 16 columns
refreshboston.org
Refresh Boston: 16 columns
refreshboston.org
Convertbot: 16 columns
tapbots.com/convertbot
Convertbot: 16 columns
tapbots.com/convertbot
Pepsi comp: 16 columns
Pepsi comp: 16 columns
AAFES comp: 12 columns
Credits
AAFES comp: 12 columns
Credits
stopdesign.com 12 columns
stopdesign.com
stopdesign.com 12 columns
stopdesign.com
Drupal.org redesign: 12 columns
infrastructure.drupal.org/drupal.org-style-guide/prototype.html
Drupal.org redesign: 12 columns
infrastructure.drupal.org/drupal.org-style-guide/prototype.html
Four Kitchens: 12 columns
fourkitchens.com
infrastructure.drupal.org/drupal.org-style-guide/prototype.html
Four Kitchens: 12 columns
fourkitchens.com
infrastructure.drupal.org/drupal.org-style-guide/prototype.html
Appendix
Learn more about grids
‣ The Grid System: thegridsystem.org
‣ “The ultimate resource in grid systems”
‣ The Grid System’s Flickr pool
‣ My bookmarks tagged “gridsystems”:
delicious.com/toddross/gridsystems
Downloads
‣ 960 grid system: 960.gs
‣ NineSixty theme for Drupal: drupal.org/project/
ninesixty
‣ This and other presentations are available for
download at fourkitchens.com/presentations
Contact Todd
‣ Email: todd@fourkitchens.com
‣ also works for Google Chat and AIM
‣ Skype: toddatfk
‣ Twitter: twitter.com/toddross
Questions?
Credits
‣ “History of the grid” slides were ‣ This presentation was created by
borrowed heavily from Khoi Vinh Nathan Smith of Fellowship Tech
and Mark Boulton’s presentation and Todd Ross Nienkerk, co-
Grids are Good and from founder of Four Kitchens, and
Wikipedia delivered by Todd Ross Nienkerk