Accelerated Grid Theming

Slide 1

Slide 1 text

Nathan Smith and Todd Nienkerk DrupalCamp Dallas | August 2, 2009 Accelerated grid theming using NineSixty — +

Slide 2

Slide 2 text

Personal introductions

Slide 3

Slide 3 text

Photo of Nathan: Travis Isaacs; Photo of Todd: Kristin Hillery Todd Nienkerk Co-founder, designer, and developer Four Kitchens Drupal skill level: Expert(-ish)! Nathan Smith Designer and developer Fellowship Technologies Drupal skill level: N00b

Slide 4

Slide 4 text

What is a grid system?

Slide 5

Slide 5 text

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 ‣ This shift in design was part of a much larger movement towards function over form ‣ Helvetica typeface and Bauhaus architecture

Slide 6

Slide 6 text

Source: Grid (page layout) on Wikipedia ‣ After World War II, a number of graphic designers, inﬂuenced 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 ﬂexible system to help designers achieve coherency in organizing the page Typographic grids

Slide 7

Slide 7 text

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?

Slide 8

Slide 8 text

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 ‣ 16 years after the invention of the web, we are ﬁnally embracing a century-old design philosophy

Slide 9

Slide 9 text

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-deﬁned API”1 ‣ A collection of tools and shortcuts designed to minimize code and make your life easier

Slide 10

Slide 10 text

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, ﬁelds, and web forms

Slide 11

Slide 11 text

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...

Slide 12

Slide 12 text

Layout ‣ When applied to web design, grid systems are CSS frameworks that provides standardized rules and shortcuts for building a website’s layout

Slide 13

Slide 13 text

JeﬀCroft.com | What’s not to love about CSS frameworks? “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

Slide 14

Slide 14 text

Why use a grid system?

Slide 15

Slide 15 text

1) Saves time 2) Saves money 3) Reduces frustration

Slide 16

Slide 16 text

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 ﬁgure out how to implement layouts

Slide 17

Slide 17 text

Photo from Lernaean Hydra on Wikipedia Multi-bodied hydra ‣ Many “dragons” share the same facade ‣ To render in a browser, all data has to pass through HTML ‣ .NET, ColdFusion, Java, Perl, PHP, Ruby, Python, etc.

Slide 18

Slide 18 text

Stop ﬁxing 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

Slide 19

Slide 19 text

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 all just rectangles — Mark Kraemer, National UX Practice Lead, EMC.com

Slide 20

Slide 20 text

Stop deconstructing CSS ‣ Understanding someone else’s design is much easier when a standard grid system is used

Slide 21

Slide 21 text

Photo: jontidmarsh on Flickr (Creative Commons BY-SA) Enforcing a grid can accelerate design while maintaining order

Slide 22

Slide 22 text

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, Standards evangelist at Yahoo

Slide 23

Slide 23 text

How do grid systems work?

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Example based on 960.gs (12-column) Column width ‣ Page regions (header, content, sidebars, etc.) are deﬁned by column width ‣ As in: “The header is eight columns wide”

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Wrapping

elements ‣ In ﬁxed-width grid systems, the entire layout is wrapped inside a single

element ‣

elements wrap the page regions and deﬁne their widths according to the number of columns they span ‣ These

elements may be nested to create regions within regions

Slide 29

Slide 29 text

Example based on 960.gs (12-column) Floating

elements ‣ The wrapping

elements are assigned a column width using a CSS class ‣ Because these classes also ﬂoat 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

Slide 30

Slide 30 text

What can grid systems look like? Examples of grid-based layouts

Slide 31

Slide 31 text

Example based on 960.gs (12-column) Layout A: Content left, sidebar right

Slide 32

Slide 32 text

Example based on 960.gs (12-column) Layout B: Content between sidebars

Slide 33

Slide 33 text

Example based on 960.gs (12-column) Layout C: Content right with two left sidebars

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Painting by Piet Mondriaan (later Mondrian) Layout E: The Mondriaan

Slide 36

Slide 36 text

How 960.gs works

Slide 37

Slide 37 text

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 workﬂow” ‣ It’s both a prototyping and development framework ‣ “The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment.”

Slide 38

Slide 38 text

Subtraction.com | Grid Computing… and Design Inspiration: Khoi Vinh

Slide 39

Slide 39 text

Cameron Moll | Gridding the 960 Inspiration: Cameron Moll

Slide 40

Slide 40 text

Adaptive Path | Sketchboards: Discover Better + Faster UX Solutions Inspiration: Brandon Schauer

Slide 41

Slide 41 text

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, OmniGraﬄe, etc. What’s in it

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Source: 960.gs 12-column version Columns 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

Slide 44

Slide 44 text

Source: 960.gs 16-column version Columns are 40px wide Everything else remains the same

Slide 45

Slide 45 text

Halves Quarters Using both versions simultaneously ‣ 12- and 16-column layouts can be used on the same page

Slide 46

Slide 46 text

‣ This ﬂexibility 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

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

Containers ‣ Grids must be wrapped in a container

‣ Containers center the content and deﬁne which version of the grid will be implemented .container-12, .container-16 { margin-left: auto; margin-right: auto; width: 960px; }

Slide 49

Slide 49 text

Grids ‣ Grids are held inside containers and are ﬂoated 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; position: relative; margin-left: 10px; margin-right: 10px; }

Slide 50

Slide 50 text

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; }

Slide 51

Slide 51 text

‣ 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; }

Slide 52

Slide 52 text

Putting containers and grids together .grid-3 .grid-6 .grid-3 .container-12

Slide 53

Slide 53 text

Prefixes and suffixes ‣ If you want to leave space between columns, use a prefix or suffix class ‣ Prefix classes add padding to the left of a column ‣ Suffix classes add padding to the right .container-12 .prefix-1 { padding-left: 80px; } .container-12 .suffix-1 { padding-right: 80px; }

Slide 54

Slide 54 text

Adding a preﬁx and suﬃx .grid-3 .grid-4 .prefix-1 .suffix-1 .grid-3 .container-12

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

deﬁnes the layout version in use

Slide 57

Slide 57 text

Stack content vertically with nested grids .grid-3 .grid-6 .grid-3 .container-12 .grid-6 .grid-6

Slide 58

Slide 58 text

‣ 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

Slide 59

Slide 59 text

Alpha and omega ﬁx broken nesting ‣ When nesting grids, use the alpha and omega classes to remove the margins ‣ alpha removes the left margin. It’s the ﬁrst nested grid. ‣ omega removes the right margin. It’s the last nested grid.

Slide 60

Slide 60 text

.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

Slide 61

Slide 61 text

Onehub.com | Why We Chose 960.gs for Our CSS Framework “In the time you could argue the relevance of naming conventions like these, I just built a 16 column layout.” —Matthew Anderson, designer at OneHub.com

Slide 62

Slide 62 text

Additional resources ‣ 960 Gridder and bookmarklet ‣ Variable grid system generator ‣ Other grid systems based on 960.gs ‣ Fluid 960.gs ‣ Typogridphy: Typographical and grid layout CSS framework ‣ and...

Slide 63

Slide 63 text

The NineSixty theme http://drupal.org/project/ninesixty

Slide 64

Slide 64 text

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 ‣ Currently a candidate for Drupal 7 core ‣ Follow the debate on groups.drupal.org

Slide 65

Slide 65 text

NineSixty’s improvements ‣ Content-ﬁrst layout using “push” and “pull” classes ‣ These classes have been added back to 960.gs ‣ Dynamic grid widths based on context ‣ Debugging tools and grid visualization ‣ Right-to-left (RTL) language support

Slide 66

Slide 66 text

Content-ﬁrst 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 ‣ Some designers believe it should be output before a site’s main navigation ‣ This can be very diﬃcult to achieve on a site with one or more left columns

Slide 67

Slide 67 text

Push and pull classes ‣ Content-ﬁrst 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

Slide 68

Slide 68 text

Source: NineSixty’s README.txt ‣ Push and pull values should match the grid value of the opposite grid

Content

Sidebar: Left

Sidebar: Right

Match numbers to swap locations

Slide 69

Slide 69 text

.container-12 .grid-3 .grid-6 .grid-3

Content

Sidebar: Left

Sidebar: Right

Before adding push and pull

Slide 70

Slide 70 text

Content

Sidebar: Left

Sidebar: Right

After adding push and pull .container-12 .grid-3 .pull-6 .grid-6 .push-3 .grid-3

Slide 71

Slide 71 text

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 ‣ Deﬁned in template.php

Slide 72

Slide 72 text

‣ X, Y, and Z are all width values ‣ class can be grid, prefix, suffix, push, or pull ‣ $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

Slide 73

Slide 73 text

Source: NineSixty’s page.tpl.php Implementing ns()

From page.tpl.php:

Slide 74

Slide 74 text

Source: NineSixty’s page.tpl.php From #main: 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 not present, subtract 4 from the push value. This will result in no push, as 4-4 = 0 Default push value

Slide 75

Slide 75 text

Source: NineSixty’s page.tpl.php From #sidebar-left: ns('pull-12', $right, 3) Default pull value If right sidebar is present, subtract 3 from default pull value

Slide 76

Slide 76 text

NineSixty in action ‣ Visit http://ninesixty.fkdemos.com to see how NineSixty... ‣ uses push and pull classes to generate content- ﬁrst layout ‣ dynamically assigns grid widths based on context ‣ can be used to create diﬀerent layouts

Slide 77

Slide 77 text

‣ Split 12- and 16-column CSS into separate ﬁles ‣ Slimmer CSS and faster page loads ‣ Add vertical rhythm ‣ Standardized, more professional typesetting ‣ See A List Apart’s “Setting type on the web” Planned improvements to NineSixty Source: Joon Park's Twitter feed (@dvessel)

Slide 78

Slide 78 text

Implementing a grid- based layout Using NineSixty to build your site

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

‣ Implementing a grid will be diﬃcult — but not impossible — if your site’s layout... ‣ has gutter widths of odd numbers ‣ is ﬂuid ‣ wasn’t designed on a grid

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Image source: Client project Do the math ‣ Be prepared to crunch numbers ‣ Building a new theme can be very confusing ‣ Spreadsheets can help you visualize column, margins, and gutters

Slide 85

Slide 85 text

‣ Examples (remember that the true “canvas” size of 960.gs is actually 940px): ‣ (940 - ((12 - 1) x 20)) ÷ 12 = 60 ‣ (940 - ((16 - 1) x 20)) ÷ 16 = 40 Source: Grids are Good by Khoi Vinh and Mark Boulton The grid equation (Canvas - ((Total units - 1) x Gutter)) ÷ Total units = Unit

Slide 86

Slide 86 text

960.gs as a development and prototyping system Examples

Slide 87

Slide 87 text

Refresh Boston: 16 columns refreshboston.org

Slide 88

Slide 88 text

Convertbot: 16 columns tapbots.com/convertbot

Slide 89

Slide 89 text

Pepsi comp: 16 columns

Slide 90

Slide 90 text

Credits AAFES comp: 12 columns

Slide 91

Slide 91 text

stopdesign.com 12 columns stopdesign.com

Slide 92

Slide 92 text

Drupal.org redesign: 12 columns infrastructure.drupal.org/drupal.org-style-guide/prototype.html

Slide 93

Slide 93 text

Four Kitchens’ company website Case study

Slide 94

Slide 94 text

Source: fourkitchens.com ‣ Subtheme of NineSixty ‣ 12-column version

Slide 95

Slide 95 text

Source: fourkitchens.com/blog

Slide 96

Slide 96 text

Source: fourkitchens.com/blog Right column grid-3 Header promos grid-4 Content column grid-8 Gutter grid-1

Slide 97

Slide 97 text

Source: fourkitchens.com

Slide 98

Slide 98 text

Source: fourkitchens.com Right column grid-3 Content column grid-8 Gutter grid-1 Footer columns grid-3 Sub-footer right column grid-3 Sub-footer content column grid-8 Gutter grid-1

Slide 99

Slide 99 text

Appendix

Slide 100

Slide 100 text

Learn more about grids ‣ The Grid System ‣ “The ultimate resource in grid systems” ‣ The Grid System’s Flickr pool ‣ My bookmarks tagged “gridsystems”

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

Contact Nathan ‣ Email: [email protected] ‣ Twitter: twitter.com/nathansmith

Slide 103

Slide 103 text

Contact Todd ‣ Email: [email protected] ‣ also works for Google Chat and AIM ‣ Skype: toddatfk ‣ Twitter: twitter.com/toddross

Slide 104

Slide 104 text

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 Fellowship Tech and Todd Ross Nienkerk, co-founder of Four Kitchens