$30 off During Our Annual Pro Sale. View Details »

960 Grid System

Nathan Smith
March 01, 2012

960 Grid System

Slides from on the 960 Grid System, from a talk I gave at Refresh Oklahoma City.

Nathan Smith

March 01, 2012
Tweet

More Decks by Nathan Smith

Other Decks in Design

Transcript

  1. Refresh Oklahoma City
    http://refreshokc.org — http://960.gs

    View Slide

  2. Relax. Please don’t try to take notes feverishly.
    Email — http://sonspring.com/contact
    Twitter — http://twitter.com/nathansmith
    Slides — http://slideshare.net/nathansmith/refresh-okc
    Feel free to email me later, and download these
    slides as well. These links are at the end, too.

    View Slide

  3. An important discipline when using any
    framework is striving to understand the
    underlying language. In other words,
    use it as a tool – Not a black box.
    Before we get started, let’s agree: Code is not magic

    View Slide

  4. Veteran “ninjas” master a variety of tools – Not just one.
    Use a framework as an extension
    of yourself – Not just as a crutch.
    BY HAND
    FRAMEWORK
    http://imdb.com/title/tt1046173

    View Slide

  5. “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 — developer evangelist at Mozilla
    http://thinkvitamin.com/code/web-development-is-moving-on-are-you

    View Slide

  6. “Point being, choose
    your battles wisely. 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
    http://onehub.com/past/2009/5/13/why-we-chose-960gs-css-framework

    View Slide

  7. Truth be told, I don’t really care if you
    use the 960 Grid System or not.
    I tell people who get all emotional over
    “semantics” (ID & classes have none)
    that it takes less energy to not use
    something than to argue about it.
    It also takes considerably more energy to do
    research. Being ignorant is blissful and easy!
    Allow me to clear up a (potential) misconception...

    View Slide

  8. Semantics can reside in microformats’ class names,
    because parsers are built to look for them specifically
    http://microformats.org

    View Slide

  9. The W3C’s “Semantic Web” doesn’t involve CSS
    http://www.w3.org/DesignIssues/Semantic.html

    View Slide

  10. The term “Semantic Web” refers to W3C’s
    vision of the Web of linked data. Semantic
    Web technologies enable people to create
    data stores on the Web, build vocabularies,
    and write rules for handling data. Linked
    data are empowered by technologies such
    as RDF, SPARQL, OWL, and SKOS.
    — World Wide Web Consortium (W3C)
    CSS gets no — at the Semantic Web party
    http://www.w3.org/standards/semanticweb

    View Slide

  11. Yummy content
    Semantics live here
    Not here
    So let’s get this straight...
    ... Except in the case of microformats.

    View Slide

  12. Jeff Croft’s “Frameworks for Designers” article
    http://www.alistapart.com/articles/frameworksfordesigners

    View Slide

  13. Jeff Croft was never one to mince words...
    http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks

    View Slide

  14. Don’t be a Luddite (Note: I was with Sass/SCSS)
    http://en.wikipedia.org/wiki/Luddite
    The Luddites were a social
    movement of British textile
    artisans in the nineteenth
    century who protested –
    often by destroying
    mechanized looms – against
    the changes produced by
    the Industrial Revolution,
    which they felt were leaving
    them without work and
    changing their way of life.

    View Slide

  15. Added semantics via role="..." & HTML5 tags

    ...



    ...

    ...


    ...

    http://adactio.com/journal/4267 — http://dev.w3.org/html5/html4-differences/#new-elements

    View Slide

  16. Added semantics via role="..." & HTML5 tags

    ...



    ...

    ...


    ...

    http://adactio.com/journal/4267 — http://dev.w3.org/html5/html4-differences/#new-elements

    View Slide

  17. Um, okay, but
    why grids?
    “My design skillz are so awesome,
    I’ve never needed to use grids.”
    #anyways #whatevs #whocares #sobored

    View Slide

  18. For design that’s really, really, ridiculously good looking
    http://en.wikipedia.org/wiki/Zoolander
    Also, to do other
    things good too.

    View Slide

  19. The reason I create and use CSS
    frameworks is because I hate doing
    mundane tasks repeatedly (yawn).
    I’d rather be working in JavaScript.
    FYI: I don’t especially love CSS.

    View Slide

  20. Co-author
    Tech editor Tech editor
    jQueryEnlightenment.com
    oreilly.com/catalog/9780596159788
    JavaScriptEnlightenment.com
    JavaScript books I’ve worked on...
    All involving Cody Lindley, who has been a JavaScript mentor to me: http://codylindley.com

    View Slide

  21. There are many “dragons”
    sharing the same public
    facade in web development:
    ColdFusion, Java, .NET,
    Perl, PHP, Ruby, Python...
    To render in a browser, it all
    has to pass through HTML.
    So, I think that front-end
    is a good place to be! :)
    Front-end is the opposite of a mythological hydra
    http://en.wikipedia.org/wiki/Lernaean_Hydra

    View Slide

  22. But I digress.
    I’ll forever be known as “the 960 guy.”
    But I guess that’s not so bad... Right?
    #anyways #whatevs #whocares #sobored

    View Slide

  23. The premise of the system is ideally suited to rapid
    prototyping, but it would work equally well when
    integrated into a production environment. There
    are printable sketch sheets, design templates, and
    CSS files that have identical measurements.
    What’s this whole 960.gs thing all about?

    View Slide

  24. 960 SHIps WITH PrINtABlE *.PDf SKeTCH
    SHeEts, BeCAUSe sOmEtIMeS THe BeSt
    DEsIGn ToOl IS No ToOl At ALl!
    WE OfTeN JUMp RIgHT INtO DEsIGn Or
    CODe SoFtWARe, BUt SKeTCHInG THIngS
    OUt CAN Be MUCH mOrE eFfICIEnT.
    WHEn I WOrKED AS AN InFoRmATIoN
    ARCHItECt, SoMe Of mY BeSt WOrK WAS
    DOnE SImPlY USInG PeN AnD PApEr.

    View Slide

  25. The 960 Grid System is an effort to streamline
    web development by providing commonly used
    dimensions, based on a width of 960 pixels.
    There are two variants: 12 and 16 columns,
    which can be used separately or in tandem.
    If you like, there’s also a 24-column version.
    “Dogfooding” = When you use your own product
    NOM, NOM, NOM — I use 960 regularly! :)

    View Slide

  26. The 12-column grid is divided into portions that
    are 60 pixels wide. The 16-column grid consists
    of 40 pixel increments. Each column has 10
    pixels of margin on the left and right, which
    create 20 pixel wide gutters between columns.
    The 24-column grid is also included. It consists
    of columns 30 pixels wide, with 10 pixel gutters,
    and a 5 pixel buffer on each side of the container.
    12, 16, and 24 columns available by default

    View Slide

  27. Show me
    teh codez!
    #anyways #whatevs #whocares #sobored

    View Slide

  28. Typical use case for a 12-column grid


    I am 1/3 wide.


    I am 1/3 wide.


    Me too!



    I am 1/2 wide.


    I am 1/2 wide.


    View Slide

  29. Typical use case for a 12-column grid


    I am 1/3 wide.


    I am 1/3 wide.


    Me too!



    I am 1/2 wide.


    I am 1/2 wide.


    View Slide

  30. Nested grids & Column rearrangement



    First nested grid.


    Middle. No special class.


    Last nested grid.



    Last in markup, first visually.


    View Slide

  31. Nested grids: alpha = first, omega = last (per row)



    First nested grid.


    Middle. No special class.


    Last nested grid.



    Last in markup, first visually.


    View Slide

  32. Column rearrangement (SEO maybe)



    First nested grid.


    Middle. No special class.


    Last nested grid.



    Last in markup, first visually.


    View Slide

  33. http://960.gs/demo.html

    View Slide

  34. http://960.gs/demo.html

    View Slide

  35. Have fixed-width grids become too pervasive?
    http://twitter.com/jcroft/status/49880667374354433

    View Slide

  36. Have fixed-width grids become too pervasive?
    http://twitter.com/nathansmith/status/49882179379015680

    View Slide

  37. http://grids.heroku.com
    Many more possibilities via grid generators

    View Slide

  38. Templates available for your weapon of choice...
    Acorn Fireworks Flash
    InDesign GIMP Inkscape
    Illustrator OmniGraffle Photoshop
    QuarkXPress Visio
    Expression
    Design

    View Slide

  39. Adobe Fireworks 960.gs extension (Photoshop too)

    View Slide

  40. Grids can accelerate progress while maintaining order
    http://www.flickr.com/photos/meckert75/3732780382

    View Slide

  41. Michael Phelps following a painted line at the bottom
    of a pool doesn’t make him a less talented swimmer.
    http://livinggallery.oneindia.in/main.php?g2_itemId=32903

    View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. “Our best practices are killing us” – Nicole Sullivan
    http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
    Three best practice myths...
    1. Don’t add any extra elements
    2. Don’t add classes
    3. Use descendent selectors exclusively

    View Slide

  49. “Our best practices are killing us” – Nicole Sullivan
    http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
    Three best practice myths...
    1. Don’t add any extra elements
    2. Don’t add classes
    3. Use descendent selectors exclusively

    View Slide

  50. Take all “rules” in development with a grain of salt
    Sensibly revised...
    1. Add extra elements sparingly
    2. Add classes thoughtfully
    3. Avoid descendent selector kludge...

    View Slide

  51. How would you style these links?


    Home


    About


    View Slide

  52. Use only the selectors that are necessary.
    .menu a {
    /* Terse = Get ‘er done! */
    }
    ul.menu li a {
    /* Too heavy = Overkill. */
    }

    View Slide

  53. http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS
    Still true: “Smart CSS ain’t always sexy CSS”

    View Slide

  54. Inspiration: Khoi Vinn
    http://www.subtraction.com/2004/12/31/grid-computi

    View Slide

  55. http://www.cameronmoll.com/archives/2006/12/gridding_the_960
    Inspiration: Cameron Moll

    View Slide

  56. http://www.cameronmoll.com/archives/2006/12/gridding_the_960
    Inspiration: Cameron Moll

    View Slide

  57. Inspiration: Olav Bjørkøy
    http://bjorkoy.com/2007/08/launch-blueprint-a-css-framework

    View Slide

  58. http://www.adaptivepath.com/ideas/e000863
    Inspiration: Brandon Schauer

    View Slide

  59. http://www.adaptivepath.com/ideas/e000863

    View Slide

  60. http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1
    Inspiration: Mark Boulton

    View Slide

  61. Frameworks are kind of like sheet music. They are
    organized, and can keep teams on the same page.
    http://www.flickr.com/photos/avlxyz/3280803912

    View Slide

  62. Like jazz, responsive design is contextual.
    No two approaches are exactly the same.

    View Slide

  63. Responsive Web Design - using @media queries
    http://www.alistapart.com/articles/responsive-web-design

    View Slide

  64. http://hicksdesign.co.uk
    Hicksdesign.co.uk = Beautiful responsive web design

    View Slide

  65. http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold
    Media queries for mobile aren’t a magic bullet

    View Slide

  66. LifeChurch.tv - Separate site for mobile & desktop
    http://m.lifechurch.tv — http://www.lifechurch.tv

    View Slide

  67. Percentage-based grid, screenshot in Firefox 4.0
    310px
    150px
    http://host.sonspring.com/yui3_grid

    View Slide

  68. 309px
    149px
    Percentage-based grid, screenshot in Chrome 10.0
    http://host.sonspring.com/yui3_grid

    View Slide

  69. http://960.gs/demo_24_col.html
    960’s 24 column grid = Exact multiples of 10

    View Slide

  70. Whither: Grid framework or Responsive design?
    Doing a fixed-width design using a grid framework is
    relatively easy. Whereas, doing a responsive design
    that looks solid at every resolution is multivariate and
    there is not (yet) an automated, foolproof solution.
    VS

    View Slide

  71. Pet peeve: “Use tomorrow’s technology, today!”
    The mere fact we’re even able to use it
    today makes it today’s technology.
    As designers and developers, it’s easy to
    get so caught up in wanting to use the
    latest and greatest (to a fault) that we
    forget to try and tackle present-day
    problems with proven technologies.

    View Slide

  72. http://twitter.com/igorskee/status/52152273178079232
    Where media queries fall short, JavaScript shines

    View Slide

  73. Smart JS hackers = Context-aware image sizing
    http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing

    View Slide

  74. Symphony + Jazz = Crazy ~ Like playing jazz flute
    http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy

    View Slide

  75. Adapt.js - Serve 960’s (or any) CSS dynamically
    http://adapt.960.gs

    View Slide

  76. Note: Not an endorsement, just a Twitter link...
    http://twitter.com/zeldman/status/59432011693166592

    View Slide

  77. For what it’s worth, a lot of people linked to it...

    View Slide

  78. How to use Adapt.js = A human-readable config
    <br/>// Edit to suit your needs.<br/>var ADAPT_CONFIG = {<br/>// Where is your CSS?<br/>path: 'assets/css/',<br/>// false = Only run once, when page first loads.<br/>// true = Change on window resize and page tilt.<br/>dynamic: true,<br/>// Optional callback... myCallback(i, width)<br/>callback: myCallback,<br/>// First range entry is the minimum.<br/>// Last range entry is the maximum.<br/>// Separate ranges by "to" keyword.<br/>range: [<br/>'0px to 760px = mobile.css',<br/>'760px to 980px = 720.css',<br/>'980px to 1280px = 960.css',<br/>'1280px to 1600px = 1200.css',<br/>'1600px to 1920px = 1560.css',<br/>'1920px = fluid.css'<br/>]<br/>};<br/>

    View Slide

  79. How to use Adapt.js = A human-readable config
    <br/>// Edit to suit your needs.<br/>var ADAPT_CONFIG = {<br/>// Where is your CSS?<br/>path: 'assets/css/',<br/>// false = Only run once, when page first loads.<br/>// true = Change on window resize and page tilt.<br/>dynamic: true,<br/>// Optional callback... myCallback(i, width)<br/>callback: myCallback,<br/>// First range entry is the minimum.<br/>// Last range entry is the maximum.<br/>// Separate ranges by "to" keyword.<br/>range: [<br/>'0px to 760px = mobile.css',<br/>'760px to 980px = 720.css',<br/>'980px to 1280px = 960.css',<br/>'1280px to 1600px = 1200.css',<br/>'1600px to 1920px = 1560.css',<br/>'1920px = fluid.css'<br/>]<br/>};<br/>

    View Slide

  80. 845 bytes
    Minified, Adapt.js is less than 1 KB.
    (Allow me to put into perspective)
    What about adding JavaScript page-weight?

    View Slide

  81. 60 × 40 pixel JPG @ 70% quality = 908 bytes
    My son, figuring out that the wind can spin pinwheels
    908 bytes
    http://www.flickr.com/photos/nathansmith/5625332824

    View Slide

  82. Or, as my dad used to tell me as a kid...
    “Don’t worry about problems
    smaller than a gnat’s backside.”
    Note: If the extra HTTP request for JS is a
    concern, the file size is small enough to just
    include inline in the document’s .

    View Slide

  83. Not to go all “Ron Burgundy” on you, but...
    “Kind of a [small] deal”
    I didn’t set out to write a
    terse snippet of JavaScript.
    That’s just how easy the
    problem was to solve.
    Seriously though, consider
    what will be best for your
    project. Nothing is a magic
    bullet. Code is just code.
    http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy

    View Slide

  84. In fact, here’s a slew of alternatives
    you might like better. You should
    explore every option, and choose
    one that makes sense to you.
    Or, if nothing seems like a good fit,
    I’d encourage you to create one!
    To reiterate: I don’t care if you use 960.gs or Adapt.js

    View Slide

  85. Sencha Touch
    http://sencha.com/touch

    View Slide

  86. http://dojotoolkit.org/features/mobile
    Dojo Mobile

    View Slide

  87. jQuery Mobile
    http://jquerymobile.com

    View Slide

  88. http://jeromeetienne.github.com/jquery-mobile-960

    View Slide

  89. Blueprint CSS Framework
    http://blueprintcss.org

    View Slide

  90. HTML5 Boilerplate - Mobile
    http://html5boilerplate.com/mobile

    View Slide

  91. Less Framework 4
    http://lessframework.com

    View Slide

  92. http://cssgrid.net
    1140 CSS Grid

    View Slide

  93. The Square Grid
    http://thesquaregrid.com

    View Slide

  94. Respond.js - Parses CSS3 @media queries
    https://github.com/scottjehl/Respond

    View Slide

  95. And the list
    goes on...
    But you get the point. There are plenty
    of options out there to choose from.
    (I just want to mention two more things)

    View Slide

  96. To prevent developers from
    wasting countless hours on
    styling dumb form elements
    Note: I wasted countless hours styling dumb form elements, so you don’t have to!
    Forms = Quite possibly, the worst part of web design

    View Slide

  97. “Future plans include a tutorial on how
    to use jQuery to add styling hooks to
    form elements, since I know from
    experience that is no cup of tea.”
    — Source = Me when announcing 960.gs in 2008!
    — Excuse = New HTML5 elements set me back :)
    It’s been awhile in the making...
    http://sonspring.com/journal/960-grid-system

    View Slide

  98. http://formalize.me
    I finally distilled my approach to forms

    View Slide

  99. View Slide

  100. http://sass-lang.com
    I prefer using Sass to expedite writing CSS
    I didn’t think I would like Sass, but I do. Oh, and
    if you’re going to use Sass, use Sass, not SCSS.

    View Slide

  101. Questions? Comments? Hate mail? :)
    Email — http://sonspring.com/contact
    Twitter — http://twitter.com/nathansmith
    Slides — http://slideshare.net/nathansmith/refresh-okc
    Thanks for attending my presentation!
    Feel free to email or say “hi” on Twitter.

    View Slide