Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accelerated Grid Theming

Nathan Smith
March 02, 2012

Accelerated Grid Theming

Talk I gave with Todd Nienkerk at Design 4 Drupal, on using the 960 Grid System in Drupal themes.

Nathan Smith

March 02, 2012
Tweet

More Decks by Nathan Smith

Other Decks in Design

Transcript

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

    +

    View full-size slide

  2. Personal introductions

    View full-size slide

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

    View full-size slide

  4. What is a grid system?

    View full-size slide

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

    View full-size slide

  6. Source: Grid (page layout) on Wikipedia
    ‣ 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
    Typographic grids

    View full-size slide

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

    View full-size slide

  8. 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
    finally embracing a century-old design philosophy

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. JeffCroft.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.”
    —Jeff Croft, designer and author

    View full-size slide

  14. Why use a grid system?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. How do grid systems
    work?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Lean and versatile CSS
    ‣ A grid system’s CSS should:
    ‣ Be lean and efficient
    ‣ Be versatile and reusable
    ‣ Ensure consistent behavior across all common
    browsers — even IE6

    View full-size slide

  28. Wrapping elements
    ‣ In fixed-width grid systems, the entire layout is
    wrapped inside a single element
    ‣ elements wrap the page regions and define
    their widths according to the number of columns
    they span
    ‣ These elements may be nested to create
    regions within regions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. How 960.gs works

    View full-size slide

  37. 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
    ‣ “The premise of the system is ideally suited to
    rapid prototyping, but it would work equally well
    when integrated into a production environment.”

    View full-size slide

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

    View full-size slide

  39. Cameron Moll | Gridding the 960
    Inspiration: Cameron Moll

    View full-size slide

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

    View full-size slide

  41. 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, OmniGraffle, etc.
    What’s in it

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. Containers
    ‣ Grids must be wrapped
    in a container
    ‣ 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;
    }

    View full-size slide

  49. 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;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. Adding a prefix and suffix
    .grid-3
    .grid-4
    .prefix-1
    .suffix-1
    .grid-3
    .container-12

    View full-size slide

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

    View full-size slide

  56. 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
    defines the layout
    version in use

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  65. NineSixty’s improvements
    ‣ Content-first 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

    View full-size slide

  66. 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
    ‣ Some designers believe it should be output
    before a site’s main navigation
    ‣ This can be very difficult to achieve on a site with
    one or more left columns

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    Content


    Sidebar: Left


    Sidebar: Right


    Before adding push and pull

    View full-size slide



  70. Content


    Sidebar: Left


    Sidebar: Right


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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













    From page.tpl.php:

    View full-size slide

  74. Source: NineSixty’s page.tpl.php
    . ' ' . ns('push-4', !$left, 4); ?>
    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

    View full-size slide

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

    View full-size slide

  76. 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 different layouts

    View full-size slide

  77. ‣ Split 12- and 16-column CSS into separate files
    ‣ 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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  80. ‣ Implementing a grid will be difficult — but not
    impossible — if your site’s layout...
    ‣ has gutter widths of odd numbers
    ‣ is fluid
    ‣ wasn’t designed on a grid

    View full-size slide

  81. Getting started
    ‣ Do not change the NineSixty theme on your site!
    ‣ Hacking NineSixty is like hacking core: It will
    make upgrading your site very difficult
    ‣ Instead, subtheme NineSixty or create a totally
    new theme based on NineSixty

    View full-size slide

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

    View full-size slide

  83. 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 efficient to use a new theme than to
    override virtually all of NineSixty’s CSS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  86. 960.gs as a development
    and prototyping system
    Examples

    View full-size slide

  87. Refresh Boston: 16 columns
    refreshboston.org

    View full-size slide

  88. Convertbot: 16 columns
    tapbots.com/convertbot

    View full-size slide

  89. Pepsi comp: 16 columns

    View full-size slide

  90. Credits
    AAFES comp: 12 columns

    View full-size slide

  91. stopdesign.com 12 columns
    stopdesign.com

    View full-size slide

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

    View full-size slide

  93. Four Kitchens’ company
    website
    Case study

    View full-size slide

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

    View full-size slide

  95. Source: fourkitchens.com/blog

    View full-size slide

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

    View full-size slide

  97. Source: fourkitchens.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  104. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-
    ShareAlike 3.0 licensed and copyright 2009 Four Kitchen Studios, LLC.

    View full-size slide