Your SlideShare is downloading. ×
0
Accelerated grid
 theming using NineSixty


                                      +

Todd Nienkerk
Drupal Design Camp Bost...
Personal introduction
Todd Nienkerk
                         Co-founder, designer, and developer
                         Four Kitchens

       ...
What is a grid system?
History of the grid
 ‣   The practice of using a grid to guide design and
     page layout is nearly a century old
 ‣   In...
Photo: kmaraj on Flickr (Creative Commons BY-NC-ND)
Photo: dalydose on Flickr (Creative Commons BY-NC-SA)
‣   This shift in design was part of a much larger
     movement towards function over form




Source: Grids are Good by ...
Photo: s.alt on Flickr (Creative Commons BY-NC-ND)
Photo: J. Kleyn on Flickr (Creative Commons BY-ND)
Typographic grids
 ‣   After World War II, a number of graphic designers,
     influenced by the modernist ideas of Die neu...
Source: Grid (page layout) on Wikipedia
Nearly a century ago
 ‣   Modernists looked to build a new aesthetic by...
     ‣   deriving beauty from the innate qualit...
Nearly a century ago
 ‣   Modernists looked to build a new aesthetic by...
     ‣   deriving beauty from the innate qualit...
Today
 ‣   Web designers have turned to grid-based design
     in order to...
     ‣   derive beauty from the innate quali...
Grid systems on the web
    ‣   On the web, grid systems usually take the form of
        CSS frameworks
    ‣   A framewo...
Examples of frameworks
‣   Ruby on Rails is a well-known Ruby framework
‣   jQuery is a JavaScript framework
‣   Drupal it...
CSS frameworks
‣   Apply the principles of software frameworks to
    web design
‣   They provide standardized rules and s...
Layout
‣   When applied to web design, grid systems are CSS
    frameworks that provides standardized rules and
    shortc...
“I’m convinced that the people railing
         against CSS frameworks are just trying to
         drum up some false job ...
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 projec...
Stop fixing and start
designing
‣   Shortens testing phases by providing built-in
    support for noncompliant browsers
   ...
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


 ‣   All modern ...
Enforcing a grid can
    accelerate design while
    maintaining order
Photo: jontidmarsh on Flickr (Creative Commons BY-S...
“Our craft is becoming a commodity, and the
   people in charge don’t care about the quality of
   the markup, CSS, or how...
How do grid systems
work?
Columns
 ‣   Grid systems are built
     using columns
     ‣   Columns are a grid
         system’s smallest unit
       ...
Column width
 ‣   Page regions (header,
     content, sidebars, etc.)
     are defined by column
     width
 ‣   As in: “Th...
Gutters (margins)
 ‣   Margins or padding are
     used to create gutters
     between columns
 ‣   These gutters provide
...
Lean and versatile CSS
‣   A grid system’s CSS should:
    ‣   Be lean and e cient
    ‣   Be versatile and reusable
    ‣...
Wrapping <div> elements
‣   In fixed-width grid systems, the entire layout is
    wrapped inside a single <div> element
‣  ...
Floating <div> elements
 ‣   The wrapping <div>                         class: grid-12
     elements are assigned
     a c...
What can grid systems
look like?
Examples of grid-based layouts
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




Example based on 960.gs (12-column)
Layout D: Whatever




Example based on 960.gs (12-column)
Layout E: The Mondriaan




Painting by Piet Mondriaan (later Mondrian)
How 960.gs works
What is 960.gs?
 ‣   960.gs — also known as the 960 Grid System —
     was created by Nathan Smith in order to
     “strea...
What’s in it
 ‣   Download it for free at http://960.gs
 ‣   GPL and MIT licensed
 ‣   The 960.gs download includes:
     ...
Technical specs
 ‣   960px wide with a 940px usable area
 ‣   Two versions: 12- and 16-column
     ‣   These can be implem...
12-column version
     Columns are 60px wide              Gutters are 20px wide




      10px margin on the left and     ...
16-column version
     Columns are 40px wide




                      Everything else remains the same



Source: 960.gs
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 s...
CSS and markup
Note: 960.gs uses underscores in its CSS class names. To avoid confusion, the
examples that follow will use...
Containers
‣   Grids must be wrapped
    in a container <div>
                            .container-12,
‣   Containers ce...
Grids
‣   Grids are held inside      .grid-1,
                               .grid-2,
    containers and are         .grid...
Grid widths
‣   The width of each grid
    is determined by the      .container-12 .grid-1 {
    container that wraps it  ...
‣   Note that grid width does not increase by 60px or
    40px each time
‣   Each increase must account for the 20px gutte...
Putting containers and
grids together
.container-12



 .grid-3        .grid-6   .grid-3
Prefixes and su xes
‣   If you want to leave
    space between              .container-12 .prefix-1 {
    columns, use a pr...
Adding a prefix and su x

.container-12

                 .grid-4
 .grid-3        .prefix-1   .grid-3
                .suff...
Multiple rows
.container-12

                .grid-12



                 .grid-4
 .grid-3        .prefix-1   .grid-3
    ...
Multiple rows: markup
                      <div class="container-12">
The container <div>
 defines the layout      <!-- ro...
Stack content vertically
with nested grids
                          .grid-6
.container-12

                .grid-6
 .grid...
‣   Here’s the catch: Because each grid includes a
    10px left and right margin, nesting grids can break
    your layout...
Alpha and omega fix
broken nesting
‣   When nesting grids, use the alpha and omega
    classes to remove the margins
    ‣ ...
.grid-6
.container-12

               .grid-3      .grid-3
               .alpha       .omega
 .grid-3                    ...
Grid design tools
‣   960 Gridder: gridder.andreehansson.se




Screenshot from gridder.andresshansson.se
‣   960 Gridder module for Drupal:
     drupal.org/project/gridder




Screenshot from Drupal.org
‣   Variable grid system generator:
     spry-soft.com/grids




Screenshots from spry-soft.com/grids
Grid systems based on
960.gs
‣   Fluid 960.gs: designinfluences.com/fluid960gs
     ‣   Variable-width version of 960.gs




Screenshot from designinfluen...
‣   Typogridphy: csswizardry.com/typogridphy
     ‣   Typographical and grid layout CSS framework




Screenshot from cssw...
And...
The NineSixty theme
http://drupal.org/project/ninesixty
About NineSixty
 ‣   NineSixty is the Drupal port of 960.gs
 ‣   Developed by Joon Park, aka dvessel on
     Drupal.org
 ‣...
Screenshot from ninesixty.fkdemos.com
NineSixty’s improvements
‣   Content-first layout using “push” and “pull” classes
    ‣   Now part of 960.gs proper
‣   Dyn...
Content-first layout
‣   A design convention in which the content is output
    as close to the top of the markup as possib...
Push and pull classes
‣   Content-first layout can be achieved in NineSixty
    by “pushing” the content grid to the right ...
‣   Push and pull values should match the grid value
     of the opposite grid

      <div class="container-12">
        <...
Before adding push and pull
.container-12


           #content               #sidebar-left      #sidebar-right
          ...
After adding push and pull
.container-12

 #sidebar-left              #content
                                           ...
Dynamic grid widths
‣   In some cases, you may want grids to resize
    themselves when a region isn’t populated
    ‣   F...
Structure of ns()
                          These “pairs”
         Default        subtract from the
          value       ...
Implementing ns()
               From page.tpl.php:
               <div id="main" class="column <?php print ns('grid-16', ...
From #main:
                   <?php print ns('grid-16', $left, 4, $right, 3)
                   . ' ' . ns('push-4', !$le...
From #sidebar-left:
                   <?php php print ns('pull-12', $right, 3); ?>



                                   ...
NineSixty in action
‣   Visit http://ninesixty.fkdemos.com to see how
    NineSixty...
    ‣   uses push and pull classes ...
Implementing a grid-
based layout
Using NineSixty to build your site
When not to use a grid
‣   Implementing a grid will probably be impossible if
    your site’s layout...
    ‣   uses irreg...
‣   Implementing a grid will be di cult — but not
    impossible — if your site’s layout...
    ‣   has gutter widths of o...
Getting started
‣   Do not change the NineSixty theme on your site!
    ‣   Hacking NineSixty is like hacking core: It wil...
Subtheme
‣   This method is best if your site is (or can be)
    960px wide and can utilize 12 or 16 columns
‣   Subthemin...
Build a new theme
‣   You should build a new theme when your site’s
    layout...
    ‣   isn’t 960px wide
    ‣   doesn’t...
Do the math
 ‣   Be prepared to crunch numbers
 ‣   Building a new grid can be very confusing
     ‣   Spreadsheets can he...
Examples

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 ...
Downloads
‣   960 grid system: 960.gs
‣   NineSixty theme for Drupal: drupal.org/project/
    ninesixty
‣   This and other...
Contact Todd
‣   Email: todd@fourkitchens.com
    ‣   also works for Google Chat and AIM
‣   Skype: toddatfk
‣   Twitter: ...
Questions?
Credits
‣   “History of the grid” slides were   ‣   This presentation was created by
    borrowed heavily from Khoi Vinh  ...
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-
ShareAlike 3.0 licensed a...
Upcoming SlideShare
Loading in...5
×

Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)

8,575

Published on

For more Four Kitchens presentations, please visit http://fourkitchens.com/presentations

Published in: Design, Technology
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,575
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
193
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2010)"

  1. 1. Accelerated grid theming using NineSixty + Todd Nienkerk Drupal Design Camp Boston | June 19, 2010
  2. 2. Personal introduction
  3. 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com Photo: Kristin Hillery
  4. 4. What is a grid system?
  5. 5. 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 Source: Grids are Good by Khoi Vinh and Mark Boulton
  6. 6. Photo: kmaraj on Flickr (Creative Commons BY-NC-ND)
  7. 7. Photo: dalydose on Flickr (Creative Commons BY-NC-SA)
  8. 8. ‣ This shift in design was part of a much larger movement towards function over form Source: Grids are Good by Khoi Vinh and Mark Boulton
  9. 9. Photo: s.alt on Flickr (Creative Commons BY-NC-ND)
  10. 10. Photo: J. Kleyn on Flickr (Creative Commons BY-ND)
  11. 11. Typographic grids ‣ 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 Source: Grid (page layout) on Wikipedia
  12. 12. Source: Grid (page layout) on Wikipedia
  13. 13. Nearly a century ago ‣ Modernists looked to build a new aesthetic by... ‣ deriving beauty from the innate qualities of the machine ‣ championing standardization Source: Grids are Good by Khoi Vinh and Mark Boulton
  14. 14. 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
  15. 15. 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 Source: Grids are Good by Khoi Vinh and Mark Boulton
  16. 16. 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 1 Source: Software framework on Wikipedia
  17. 17. 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
  18. 18. 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...
  19. 19. Layout ‣ When applied to web design, grid systems are CSS frameworks that provides standardized rules and shortcuts for building a website’s layout
  20. 20. “I’m convinced that the people railing against CSS frameworks are just trying to drum up some false job security.” —Je Croft, designer and author Je Croft.com | What’s not to love about CSS frameworks?
  21. 21. Why use a grid system?
  22. 22. 1) Saves time 2) Saves money 3) Reduces frustration
  23. 23. 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
  24. 24. 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
  25. 25. Stop deconstructing CSS ‣ Understanding someone else’s design is much easier when a standard grid system is used
  26. 26. “Embrace constraints” — Mark Kraemer, National UX Practice Lead, EMC.com ‣ All modern displays support at least 1024×768 resolution ‣ Despite the many advances in web technology, it’s all just rectangles Photo: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
  27. 27. Enforcing a grid can accelerate design while maintaining order Photo: jontidmarsh on Flickr (Creative Commons BY-SA)
  28. 28. “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, Standards evangelist at Yahoo Think Vitamin | Web development is moving on — Are you?
  29. 29. How do grid systems work?
  30. 30. 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)
  31. 31. 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)
  32. 32. Gutters (margins) ‣ Margins or padding are used to create gutters between columns ‣ These gutters provide margins between page regions Example based on 960.gs (12-column)
  33. 33. 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
  34. 34. 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
  35. 35. Floating <div> elements ‣ The wrapping <div> class: grid-12 elements are assigned a column width using a class: class: CSS class grid-4 grid-4 class: grid-4 ‣ Because these classes class: grid-8 also float the elements, they simply fall into class: grid-6 class: grid-6 place on the page Example based on 960.gs (12-column)
  36. 36. What can grid systems look like? Examples of grid-based layouts
  37. 37. Layout A: Content left, sidebar right Example based on 960.gs (12-column)
  38. 38. Layout B: Content between sidebars Example based on 960.gs (12-column)
  39. 39. Layout C: Content right with two left sidebars Example based on 960.gs (12-column)
  40. 40. Layout D: Whatever Example based on 960.gs (12-column)
  41. 41. Layout E: The Mondriaan Painting by Piet Mondriaan (later Mondrian)
  42. 42. How 960.gs works
  43. 43. 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
  44. 44. 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, OmniGra e, etc. Source: 960.gs
  45. 45. 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
  46. 46. 12-column version Columns are 60px wide Gutters are 20px wide 10px margin on the left and Available right prevents collision with working area browser chrome is 940px wide Source: 960.gs
  47. 47. 16-column version Columns are 40px wide Everything else remains the same Source: 960.gs
  48. 48. Using both versions simultaneously ‣ 12- and 16-column layouts can be used on the same page Halves Quarters
  49. 49. ‣ 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
  50. 50. CSS and markup Note: 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.
  51. 51. Containers ‣ Grids must be wrapped in a container <div> .container-12, ‣ Containers center the .container-16 { margin-left: auto; content and define margin-right: auto; which version of the width: 960px; grid will be } implemented
  52. 52. 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
  53. 53. 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
  54. 54. ‣ 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 { .container-16 .grid-1 { width: 60px; width: 40px; } } .container-12 .grid-2 { .container-16 .grid-2 { width: 140px; width: 100px; } } .container-12 .grid-3 { .container-16 .grid-3 { width: 300px; width: 160px; } }
  55. 55. Putting containers and grids together .container-12 .grid-3 .grid-6 .grid-3
  56. 56. Prefixes and su xes ‣ If you want to leave space between .container-12 .prefix-1 { columns, use a prefix padding-left: 80px; or su x class } .container-12 .suffix-1 { ‣ Prefix classes add padding-right: 80px; padding to the left of a } column ‣ Su x classes add padding to the right
  57. 57. Adding a prefix and su x .container-12 .grid-4 .grid-3 .prefix-1 .grid-3 .suffix-1
  58. 58. Multiple rows .container-12 .grid-12 .grid-4 .grid-3 .prefix-1 .grid-3 .suffix-1
  59. 59. 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> <!-- row 2 --> <div class="grid-3"> One wide No need to put </div> each row in its own <div class="grid-4 prefix-1 suffix-1"> wrapping <div> Four wide with a prefix and suffix of one each </div> <div class="grid-3"> One wide </div> </div> <!-- /container -->
  60. 60. Stack content vertically with nested grids .grid-6 .container-12 .grid-6 .grid-3 .grid-3 .grid-6
  61. 61. ‣ 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
  62. 62. 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.
  63. 63. .grid-6 .container-12 .grid-3 .grid-3 .alpha .omega .grid-3 .grid-3 .grid-6 .alpha .omega .alpha removed .omega removed the left margin the right margin
  64. 64. Grid design tools
  65. 65. ‣ 960 Gridder: gridder.andreehansson.se Screenshot from gridder.andresshansson.se
  66. 66. ‣ 960 Gridder module for Drupal: drupal.org/project/gridder Screenshot from Drupal.org
  67. 67. ‣ Variable grid system generator: spry-soft.com/grids Screenshots from spry-soft.com/grids
  68. 68. Grid systems based on 960.gs
  69. 69. ‣ Fluid 960.gs: designinfluences.com/fluid960gs ‣ Variable-width version of 960.gs Screenshot from designinfluences.com/fluid960gs
  70. 70. ‣ Typogridphy: csswizardry.com/typogridphy ‣ Typographical and grid layout CSS framework Screenshot from csswizardry.com/typogridphy
  71. 71. And...
  72. 72. The NineSixty theme http://drupal.org/project/ninesixty
  73. 73. 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 Source: Drupal.org
  74. 74. Screenshot from ninesixty.fkdemos.com
  75. 75. 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
  76. 76. 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
  77. 77. 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
  78. 78. ‣ 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 id="sidebar-left" class="grid-3 pull-6"> Sidebar: Left </div> <div id="sidebar-right" class="grid-3"> Sidebar: Right </div> </div> Source: NineSixty’s README.txt
  79. 79. Before adding push and pull .container-12 #content #sidebar-left #sidebar-right .grid-6 .grid-3 .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>
  80. 80. 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>
  81. 81. 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
  82. 82. Structure of ns() These “pairs” Default subtract from the value default value ns('class-X', $region, Y, $region, Z, ...) ‣ 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
  83. 83. Implementing ns() From page.tpl.php: <div id="main" class="column <?php print ns('grid-16', $left, 4, $right, 3) . ' ' . ns('push-4', !$left, 4); ?>"> <?php print $content; ?> </div> <?php if ($left): ?> <div id="sidebar-left" class="column sidebar region grid-4 <? php print ns('pull-12', $right, 3); ?>"> <?php print $left; ?> </div> <?php endif; ?> <?php if ($right): ?> <div id="sidebar-right" class="column sidebar region grid-3"> <?php print $right; ?> </div> <?php endif; ?> Source: NineSixty’s page.tpl.php
  84. 84. From #main: <?php print ns('grid-16', $left, 4, $right, 3) . ' ' . ns('push-4', !$left, 4); ?> If left sidebar is If right sidebar is Default present, subtract 4 present, subtract 3 width from default width. from default width. ns('grid-16', $left, 4, $right, 3) If left sidebar is not present, subtract Default 4 from the push value. This will result push value in no push, as 4-4 = 0 ns('push-4', !$left, 4) Source: NineSixty’s page.tpl.php
  85. 85. From #sidebar-left: <?php php print ns('pull-12', $right, 3); ?> If right sidebar is Default present, subtract 3 pull value from default pull value ns('pull-12', $right, 3) Source: NineSixty’s page.tpl.php
  86. 86. NineSixty in action ‣ Visit http://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
  87. 87. Implementing a grid- based layout Using NineSixty to build your site
  88. 88. 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
  89. 89. ‣ 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
  90. 90. 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
  91. 91. 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: ‣ Subtheming quick and dirty ‣ Sub-themes, their structure and inheritance
  92. 92. 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
  93. 93. 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 Image source: Client project
  94. 94. Examples 960.gs as a prototyping and development system
  95. 95. Refresh Boston: 16 columns refreshboston.org
  96. 96. Refresh Boston: 16 columns refreshboston.org
  97. 97. Convertbot: 16 columns tapbots.com/convertbot
  98. 98. Convertbot: 16 columns tapbots.com/convertbot
  99. 99. Pepsi comp: 16 columns
  100. 100. Pepsi comp: 16 columns
  101. 101. AAFES comp: 12 columns Credits
  102. 102. AAFES comp: 12 columns Credits
  103. 103. stopdesign.com 12 columns stopdesign.com
  104. 104. stopdesign.com 12 columns stopdesign.com
  105. 105. Drupal.org redesign: 12 columns infrastructure.drupal.org/drupal.org-style-guide/prototype.html
  106. 106. Drupal.org redesign: 12 columns infrastructure.drupal.org/drupal.org-style-guide/prototype.html
  107. 107. Four Kitchens: 12 columns fourkitchens.com infrastructure.drupal.org/drupal.org-style-guide/prototype.html
  108. 108. Four Kitchens: 12 columns fourkitchens.com infrastructure.drupal.org/drupal.org-style-guide/prototype.html
  109. 109. Appendix
  110. 110. 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
  111. 111. 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
  112. 112. Contact Todd ‣ Email: todd@fourkitchens.com ‣ also works for Google Chat and AIM ‣ Skype: toddatfk ‣ Twitter: twitter.com/toddross
  113. 113. Questions?
  114. 114. 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 ‣ Piet Mondriaan painting was found somewhere online. Copyright holder is unknown ‣ The items listed above are exempt from this presentation’s Creative Commons license
  115. 115. All content in this presentation, except where noted otherwise, is Creative Commons Attribution- ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×