Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
101
Todd Nienkerk and Nathan Smith Dallas Drupal Days | July 9, 2011 Accelerated grid theming using NineSixty ♥ +
-
Upload
four-kitchens -
Category
Design
-
view
105 -
download
2
description
For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations
Transcript of Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Todd Nienkerk and Nathan SmithDallas Drupal Days | July 9, 2011
Accelerated gridtheming using NineSixty
♥+
Personal introductions
Photo: Kristin Hillery
Todd NienkerkCo-founder, designer, and developerFour Kitchens
Twitter: @toddross
Photo: Travis Isaacs
Nathan SmithCreator of the 960 Grid SystemFront-end dev at HP Cloud Services
Twitter: @nathansmith
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
Photo: kmaraj on Flickr (Creative Commons BY-NC-ND)
Photo: dalydose on Flickr (Creative Commons BY-NC-SA)
Source: Grids are Good by Khoi Vinh and Mark Boulton
‣ This shift in design was part of a much larger movement towards function over form
Photo: s.alt on Flickr (Creative Commons BY-NC-ND)
Photo: J. Kleyn on Flickr (Creative Commons BY-ND)
Source: Grid (page layout) on Wikipedia
‣ After World War II, many graphic designers 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
Unigrid system by Massimo Vignelli; image source: AisleOne
Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)
Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)
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
‣ 18 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 “reuseable abstraction of code wrapped in a well-defined API”1
‣ 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 website’s layout
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 else’s design is much easier when a standard grid system is used
Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
“Embrace constraints”
‣ All modern displays support at least 1024!768 resolution
‣ Despite the many advances in web technology, it’s alljust rectangles
— Mark Kraemer, Credera management consulting
Photo: jontidmarsh on Flickr (Creative Commons BY-SA)
Enforcing a grid can accelerate design while maintaining order
Think Vitamin | Web development is moving on — Are you?
“Our craft is becoming a commodity, and the people in charge don’t 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 built.”
—Christian Heilmann, (then) standards evangelist at Yahoo
How do grid systems work?
Example based on 960.gs (12-column)
Columns
‣ Grid systems are built using columns
‣ Columns are a grid system’s smallest unit of measurement
‣ Most grid systems contain 12–16 columns
Example based on 960.gs (12-column)
Column width
‣ Page regions (header, content, sidebars, etc.) are defined by column width
‣ As in: “The header is eight columns wide”
Example based on 960.gs (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 system’s CSS should:
‣ Be lean and e"cient
‣ Be versatile and reusable
‣ Ensure consistent behavior across all common browsers — even IE6
Wrapping <div> elements‣ In fixed-width grid systems, the entire layout is
wrapped inside a single <div> element
‣ <div> elements wrap the page regions and define their widths according to the number of columns they span
‣ These <div> elements may be nested to create regions within regions
Example based on 960.gs (12-column)
Floating <div> elements‣ The wrapping <div>
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
class:grid-4
class:grid-4
class:grid-4
class: grid-6 class: grid-6
What can grid systems look like?Examples of grid-based layouts
Example based on 960.gs (12-column)
Layout A: Content left, sidebar right
Example based on 960.gs (12-column)
Layout B: Content between sidebars
Example based on 960.gs (12-column)
Layout C: Content right with two left sidebars
Painting by Piet Mondriaan (later Mondrian)
Layout E: The Mondriaan
How 960.gs works
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”
‣ It’s both a prototyping and development framework
Source: 960.gs
‣ Download it for free at 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, OmniGra#e, etc.
What’s in it
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 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: 960.gs
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 don’t 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: 960.gs 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 <div>
‣ 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; 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 it’s 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 su!xes
‣ If you want to leave space between columns, use a prefix or su"x class
‣ Prefix classes add padding to the left of a column
‣ Su"x classes add padding to the right
.container-12 .prefix-1 { padding-left: 80px;}
.container-12 .suffix-1 { padding-right: 80px;}
Adding a prefix and su!x
.grid-3.grid-4
.prefix-1
.suffix-1.grid-3
.container-12
Multiple rows
.grid-3.grid-4
.prefix-1
.suffix-1.grid-3
.container-12
.grid-12
Multiple rows: markup<div class="container-12">
<!-- row 1 --><div class="grid-12">
This grid occupies the full width</div>
<!-- row 2 --><div class="grid-3">
One wide</div><div class="grid-4 prefix-1 suffix-1">
Four wide with a prefix and suffix of one each</div><div class="grid-3">
One wide</div>
</div> <!-- /container -->
No need to put each row in its own
wrapping <div>
The container <div> defines the layout
version in use
Stack content vertically with nested grids
.grid-3.grid-6
.grid-3
.container-12
.grid-6
.grid-6
‣ Here’s the catch: Because each grid includes a 10px left and right margin, nesting grids can break your layout
.grid-3.grid-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. It’s the first nested grid.
‣ omega removes the right margin. It’s the last nested grid.
.grid-3
.grid-3.alpha
.grid-3
.container-12
.grid-6.alpha .omega
.grid-3.omega
.grid-6
.alpha removed the left margin
.omega removed the right margin
The NineSixty themedrupal.org/project/ninesixty
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
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 di"cult 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
Source: NineSixty’s README.txt
‣ 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"> 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>
Match numbers to swap locations
.container-12
#sidebar-left.grid-3
#content.grid-6
#sidebar-right.grid-3
<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>
Before adding push and pull
.container-12
#sidebar-left.grid-3
#content.grid-6
#sidebar-right.grid-3
.container-12
#sidebar-left.grid-3.pull-6
#content.grid-6.push-3
#sidebar-right.grid-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>
After adding push and pull
.container-12
#sidebar-left.grid-3.pull-6
#content.grid-6.push-3
#sidebar-right.grid-3
NineSixty in action
‣ Visit ninesixty.fkdemos.com 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 site’s layout...
‣ uses irregular column sizes
‣ has irregular margins or gutters
‣ has a width that isn’t divisible by a sane number
‣ Implementing a grid will be di!cult — but not impossible — if your site’s layout...
‣ has gutter widths of odd numbers
‣ is fluid
‣ wasn’t 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 di"cult
‣ 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 Drupal.org: drupal.org/node/225125
Build a new theme
‣ You should build a new theme when your site’s layout...
‣ isn’t 960px wide
‣ doesn’t use 12 or 16 columns
‣ It’s more e"cient to use a new theme than to override virtually all of NineSixty’s 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
960.gs as a prototyping and development system
Examples
Twitter Media blog: 12 columns
media.twitter.com
Twitter Media blog: 12 columns
media.twitter.com
Credits
AAFES comp: 12 columns
Credits
AAFES comp: 12 columns
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
Questions?
Credits‣ “History of the grid” slides were
borrowed heavily from Khoi Vinh and Mark Boulton’s 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 presentation’s Creative Commons license
‣ This presentation was created and delivered by Nathan Smith of HP Cloud Services and Todd Ross Nienkerk, co-founder of Four Kitchens
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.
