Your SlideShare is downloading. ×
0
Accelerated grid theming using NineSixty                                 +Todd NienkerkDrupalCamp LA | August 6, 2011
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 th...
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 formSource: Grids are Good by Khoi V...
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, many graphic designers     questioned the relevance of the conventional page    ...
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)
Nearly a century ago ‣   Modernists looked to build a new aesthetic by...     ‣   deriving beauty from the innate qualitie...
Today ‣   Web designers have turned to grid-based design     in order to...     ‣   derive beauty from the innate qualitie...
Grid systems on the web    ‣   On the web, grid systems usually take the form of        CSS frameworks    ‣   A framework ...
Examples of frameworks‣   Ruby on Rails is a well-known Ruby framework‣   jQuery is a JavaScript framework‣   Drupal itsel...
CSS frameworks‣   Apply the principles of software frameworks to    web design‣   They provide standardized rules and shor...
Layout‣   When applied to web design, grid systems are CSS    frameworks that provides standardized rules and    shortcuts...
Why use a grid system?
1) Saves time2) Saves money3) Reduces frustration
Stop reinventing thewheel‣   Reduces the amount of CSS and markup you need    to duplicate each time you start a project‣ ...
Stop fixing and startdesigning‣   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, Credera management consulting ‣   All modern disp...
Enforcing a grid can    accelerate design while    maintaining orderPhoto: jontidmarsh on Flickr (Creative Commons BY-SA)
“Our craft is becoming a commodity, and the   people in charge don’t care about the quality of   the markup, CSS, or how s...
How do grid systemswork?
Columns ‣   Grid systems are built     using columns     ‣   Columns are a grid         system’s smallest unit         of ...
Column width ‣   Page regions (header,     content, sidebars, etc.)     are defined by column     width ‣   As in: “The hea...
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    ‣   E...
Wrapping <div> elements‣   In fixed-width grid systems, the entire layout is    wrapped inside a single <div> element‣   <d...
Floating <div> elements ‣   The wrapping <div>                         class: grid-12     elements are assigned     a colu...
What can grid systemslook like?Examples of grid-based layouts
Layout A: Content left, sidebar rightExample based on 960.gs (12-column)
Layout B: Content between sidebarsExample based on 960.gs (12-column)
Layout C: Content right with two left sidebarsExample based on 960.gs (12-column)
Layout D: WhateverExample based on 960.gs (12-column)
Layout E: The MondriaanPainting 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     “streamli...
What’s in it ‣   Download it for free at 960.gs ‣   GPL and MIT licensed ‣   The 960.gs download includes:     ‣   Printab...
Technical specs ‣   960px wide with a 940px usable area ‣   Two versions: 12- and 16-column     ‣   These can be implement...
12-column version     Columns are 60px wide              Gutters are 20px wide      10px margin on the left and     Availa...
16-column version     Columns are 40px wide                      Everything else remains the sameSource: 960.gs
Using both versionssimultaneously‣   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 yo...
CSS and markupNote: 960.gs uses underscores in its CSS class names. To avoid confusion, theexamples that follow will use h...
Containers‣   Grids must be wrapped    in a container <div>                            .container-12,‣   Containers center...
Grids‣   Grids are held inside      .grid-1,    containers and are         .grid-2,                               .grid-3,...
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 gutter ...
Putting containers andgrids 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 prefix...
Adding a prefix and su x.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             ...
Multiple rows: markup                      <div class="container-12">The container <div> defines the layout      <!-- row 1...
Stack content verticallywith nested grids                          .grid-6.container-12                .grid-6 .grid-3    ...
‣   Here’s the catch: Because each grid includes a    10px left and right margin, nesting grids can break    your layout  ...
Alpha and omega fixbroken nesting‣   When nesting grids, use the alpha and omega    classes to remove the margins    ‣   al...
.grid-6.container-12               .grid-3      .grid-3               .alpha       .omega .grid-3                         ...
The NineSixty themedrupal.org/project/ninesixty
About NineSixty ‣   NineSixty is the Drupal port of 960.gs ‣   Developed by Joon Park, aka dvessel on     Drupal.org ‣   I...
Screenshot from ninesixty.fkdemos.com
NineSixty’s improvements‣   Content-first layout using “push” and “pull” classes    ‣   Now part of 960.gs proper‣   Dynami...
Content-first layout‣   A design convention in which the content is output    as close to the top of the markup as possible...
Push and pull classes‣   Content-first layout can be achieved in NineSixty    by “pushing” the content grid to the right wh...
‣   Push and pull values should match the grid value     of the opposite grid      <div class="container-12">        <div ...
Before adding push and pull.container-12           #content               #sidebar-left      #sidebar-right           .gri...
.container-12           #content   #sidebar-left   #sidebar-right           .grid-6       .grid-3         .grid-3
.container-12#sidebar-left   #content                           #sidebar-right   .grid-3      .grid-6                     ...
After adding push and pull.container-12 #sidebar-left              #content                                               ...
NineSixty in action‣   Visit ninesixty.fkdemos.com to see how NineSixty...    ‣   uses push and pull classes to generate c...
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 irregula...
‣   Implementing a grid will be di cult — but not    impossible — if your site’s layout...    ‣   has gutter widths of odd...
Getting started‣   Do not change the NineSixty theme on your site!    ‣   Hacking NineSixty is like hacking core: It will ...
Subtheme‣   This method is best if your site is (or can be)    960px wide and can utilize 12 or 16 columns‣   Subtheming i...
Build a new theme‣   You should build a new theme when your site’s    layout...    ‣   isn’t 960px wide    ‣   doesn’t use...
Do the math ‣   Be prepared to crunch numbers ‣   Building a new grid can be very confusing     ‣   Spreadsheets can help ...
Examples960.gs as a prototypingand development system
Refresh Boston: 16 columnsrefreshboston.org
Refresh Boston: 16 columnsrefreshboston.org
Tapbots: 12 columnstapbots.com
Tapbots: 12 columnstapbots.com
Twitter Media blog: 12 columnsmedia.twitter.com
Twitter Media blog: 12 columnsmedia.twitter.com
AAFES comp: 12 columnsCredits
AAFES comp: 12 columnsCredits
stopdesign.com 12 columnsstopdesign.com
stopdesign.com 12 columnsstopdesign.com
Drupal.org redesign: 12 columnsinfrastructure.drupal.org/drupal.org-style-guide/prototype.html
Drupal.org redesign: 12 columnsinfrastructure.drupal.org/drupal.org-style-guide/prototype.html
Questions?
Credits‣   “History of the grid” slides were   ‣   This presentation was created and    borrowed heavily from Khoi Vinh   ...
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed an...
Upcoming SlideShare
Loading in...5
×

Accelerated grid theming using NineSixty (DrupalCamp LA 2011)

1,189

Published on

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

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,189
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Accelerated grid theming using NineSixty (DrupalCamp LA 2011)"

  1. 1. Accelerated grid theming using NineSixty +Todd NienkerkDrupalCamp LA | August 6, 2011
  2. 2. Personal introduction
  3. 3. Todd Nienkerk Co-founder, designer, and developer Four Kitchens todd@fourkitchens.com Twitter: @toddrossPhoto: 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 ObjectivitySource: 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 formSource: 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, 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 pageSource: Grid (page layout) on Wikipedia
  12. 12. Source: Grid (page layout) on Wikipedia
  13. 13. Unigrid system by Massimo Vignelli; image source: AisleOne
  14. 14. Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)
  15. 15. Unigrid system by Massimo Vignelli; image source: Alki1 on Flickr (Creative Commons BY-NC-ND)
  16. 16. 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
  17. 17. 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 philosophySource: Grids are Good by Khoi Vinh and Mark Boulton
  18. 18. 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 easier1 Source: Software framework on Wikipedia
  19. 19. 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
  20. 20. 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...
  21. 21. Layout‣ When applied to web design, grid systems are CSS frameworks that provides standardized rules and shortcuts for building a website’s layout
  22. 22. Why use a grid system?
  23. 23. 1) Saves time2) Saves money3) Reduces frustration
  24. 24. Stop reinventing thewheel‣ 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
  25. 25. Stop fixing and startdesigning‣ 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
  26. 26. Stop deconstructing CSS‣ Understanding someone else’s design is much easier when a standard grid system is used
  27. 27. “Embrace constraints” — Mark Kraemer, Credera management consulting ‣ All modern displays support at least 1024×768 resolution ‣ Despite the many advances in web technology, it’s all just rectanglesPhoto: Aaron Schmidt on Flickr (Creative Commons BY-NC-SA)
  28. 28. Enforcing a grid can accelerate design while maintaining orderPhoto: jontidmarsh on Flickr (Creative Commons BY-SA)
  29. 29. “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 YahooThink Vitamin | Web development is moving on — Are you?
  30. 30. How do grid systemswork?
  31. 31. Columns ‣ Grid systems are built using columns ‣ Columns are a grid system’s smallest unit of measurement ‣ Most grid systems contain 12–16 columnsExample based on 960.gs (12-column)
  32. 32. 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)
  33. 33. Gutters (margins) ‣ Margins or padding are used to create gutters between columns ‣ These gutters provide margins between page regionsExample based on 960.gs (12-column)
  34. 34. 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
  35. 35. 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
  36. 36. 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 pageExample based on 960.gs (12-column)
  37. 37. What can grid systemslook like?Examples of grid-based layouts
  38. 38. Layout A: Content left, sidebar rightExample based on 960.gs (12-column)
  39. 39. Layout B: Content between sidebarsExample based on 960.gs (12-column)
  40. 40. Layout C: Content right with two left sidebarsExample based on 960.gs (12-column)
  41. 41. Layout D: WhateverExample based on 960.gs (12-column)
  42. 42. Layout E: The MondriaanPainting by Piet Mondriaan (later Mondrian)
  43. 43. How 960.gs works
  44. 44. 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 frameworkSource: 960.gs
  45. 45. What’s in it ‣ 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.Source: 960.gs
  46. 46. 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 columnsSource: 960.gs
  47. 47. 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 wideSource: 960.gs
  48. 48. 16-column version Columns are 40px wide Everything else remains the sameSource: 960.gs
  49. 49. Using both versionssimultaneously‣ 12- and 16-column layouts can be used on the same page Halves Quarters
  50. 50. ‣ 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
  51. 51. 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.
  52. 52. 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
  53. 53. Grids‣ Grids are held inside .grid-1, containers and are .grid-2, .grid-3, floated left so they fall ... into place .grid-16 { automatically display: inline; float: left; margin-left: 10px;‣ They also provide 10px margin-right: 10px; margins on the left and } right
  54. 54. 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
  55. 55. ‣ 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; } }
  56. 56. Putting containers andgrids together.container-12 .grid-3 .grid-6 .grid-3
  57. 57. 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
  58. 58. Adding a prefix and su x.container-12 .grid-4 .grid-3 .prefix-1 .grid-3 .suffix-1
  59. 59. Multiple rows.container-12 .grid-12 .grid-4 .grid-3 .prefix-1 .grid-3 .suffix-1
  60. 60. 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 -->
  61. 61. Stack content verticallywith nested grids .grid-6.container-12 .grid-6 .grid-3 .grid-3 .grid-6
  62. 62. ‣ 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
  63. 63. Alpha and omega fixbroken 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.
  64. 64. .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
  65. 65. The NineSixty themedrupal.org/project/ninesixty
  66. 66. 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 themeSource: Drupal.org
  67. 67. Screenshot from ninesixty.fkdemos.com
  68. 68. 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
  69. 69. 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
  70. 70. 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
  71. 71. ‣ 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
  72. 72. 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>
  73. 73. .container-12 #content #sidebar-left #sidebar-right .grid-6 .grid-3 .grid-3
  74. 74. .container-12#sidebar-left #content #sidebar-right .grid-3 .grid-6 .grid-3 .pull-6 .push-3
  75. 75. 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>
  76. 76. 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
  77. 77. Implementing a grid-based layoutUsing NineSixty to build your site
  78. 78. 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
  79. 79. ‣ 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
  80. 80. 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
  81. 81. 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
  82. 82. 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
  83. 83. Do the math ‣ Be prepared to crunch numbers ‣ Building a new grid can be very confusing ‣ Spreadsheets can help you visualize columns, margins, and guttersImage source: Client project
  84. 84. Examples960.gs as a prototypingand development system
  85. 85. Refresh Boston: 16 columnsrefreshboston.org
  86. 86. Refresh Boston: 16 columnsrefreshboston.org
  87. 87. Tapbots: 12 columnstapbots.com
  88. 88. Tapbots: 12 columnstapbots.com
  89. 89. Twitter Media blog: 12 columnsmedia.twitter.com
  90. 90. Twitter Media blog: 12 columnsmedia.twitter.com
  91. 91. AAFES comp: 12 columnsCredits
  92. 92. AAFES comp: 12 columnsCredits
  93. 93. stopdesign.com 12 columnsstopdesign.com
  94. 94. stopdesign.com 12 columnsstopdesign.com
  95. 95. Drupal.org redesign: 12 columnsinfrastructure.drupal.org/drupal.org-style-guide/prototype.html
  96. 96. Drupal.org redesign: 12 columnsinfrastructure.drupal.org/drupal.org-style-guide/prototype.html
  97. 97. Questions?
  98. 98. Credits‣ “History of the grid” slides were ‣ This presentation was created and borrowed heavily from Khoi Vinh delivered Todd Nienkerk, co- and Mark Boulton’s presentation founder of Four Kitchens, with lots Grids are Good and from of guidance from Nathan Smith, Wikipedia creator of the 960 Grid System‣ Piet Mondriaan painting was found somewhere online. Copyright holder is unknown‣ The items listed above are exempt from this presentation’s Creative Commons license
  99. 99. 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.

×