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

Think Vitamin - CSS Frameworks

Nathan Smith
March 02, 2012

Think Vitamin - CSS Frameworks

Online talk I gave for Think Vitamin's online HTML & CSS conference, on the topic of "The Why, How, and When?" of CSS Frameworks.

http://thinkvitamin.com/online-conferences/html-css

Nathan Smith

March 02, 2012
Tweet

More Decks by Nathan Smith

Other Decks in Design

Transcript

  1. of
    THE WHY, HOW, AND WHEN?
    CSS FRAMEWORKS
    http://thinkvitamin.com/online-conferences/

    View Slide

  2. Just a brief intro, then we’ll
    dig right into the good stuff...
    I’m Nathan. I am a designer
    (slash) front-end developer
    at Fellowship Technologies.
    http://fellowshiptech.com/

    View Slide

  3. You probably know me as
    the guy who made this...
    http://960.gs/

    View Slide

  4. But I’m not (entirely) one dimensional.
    Today, I we are going to discuss some
    of the benefits (and drawbacks) of
    using CSS frameworks such as...

    View Slide

  5. Blueprint, YUI 3,
    960.gs, 1kb Grid

    View Slide

  6. http://en.wikipedia.org/wiki/Clarke's_three_laws
    “Any sufficiently advanced technology
    is indistinguishable from magic.”
    — Arthur C. Clarke
    this scares me

    View Slide

  7. You know why? CSS frameworks are
    not magic. Because CSS itself isn’t.
    Let’s not treat code like it’s mystical.
    (Same for jQuery. But that’s another soapbox entirely.)

    View Slide

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

  9. WHY use a Framework?
    + Increase efficiency
    + Code consistency
    + Browser tested
    + Ease of maintenance
    + Repeatable process
    + CMS driven templates

    View Slide

  10. WHY not?
    – Learning curve
    – Bloated HTML
    – Bloated CSS
    – Code feels foreign
    – Longhand is quicker?
    – Unsemantic classes

    View Slide

  11. I have found that many of those who cry “bloat” (as a reason not to use
    frameworks) are themselves guilty of not doing all they can to reduce
    client-side latency. For instance, referencing multiple CSS files of the
    same media type is wasteful because it necessitates an HTTP request
    for each file, thereby delaying page rendering until all the files have
    been downloaded and parsed. Additionally, whitespace can quickly
    add up: newline characters, tabbed (or spaced) indentation, etc...
    — Nathan Smith (.Net Magazine July 2010)

    View Slide

  12. ... Regardless of if you are using a CSS framework, you can and
    should be using techniques to mitigate the impact of CSS
    downloads, including minification and concatenation – two fancy
    terms that simply refer to the removal of unnecessary whitespace,
    and combining multiple CSS files into one... If you want to minify
    your CSS manually, I would recommend CSS Drive’s compressor.
    — Nathan Smith (.Net Magazine July 2010)
    http://www.cssdrive.com/index.php/main/csscompressor/

    View Slide

  13. “Unsemantic”
    __________

    View Slide

  14. http://www.w3.org/TR/html401/struct/global.html#h-7.5.4
    The div and span elements, in conjunction with the id
    and class attributes, offer a generic mechanism for
    adding structure to documents. These elements define
    content to be inline (span) or block-level (div) but
    impose no other presentational idioms on the content.
    — World Wide Web Consortium (W3C)
    DIV + SPAN ARE SEMANTICALLY MEANINGLESS (aka NEUTRAL)

    View Slide

  15. http://www.w3.org/DesignIssues/Semantic.html
    “Semantic Web” doesn’t involve CSS

    View Slide

  16. http://www.w3.org/standards/semanticweb/
    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)
    SORRY CSS... YOU WEREN’T INVITED TO THIS PARTY. WE STILL — YOU.

    View Slide


  17. ...


    ...


    ...


    ...


    ...


    ...


    ...


    ...

    DIV + ID / CLASS = ZERO SEMANTIC VALUE HTML5 TAGS = RICH SEMANTIC VALUE

    View Slide

  18. Yummy content
    Semantics live here
    Not here

    View Slide

  19. If semantics keep you up at night... try SASS!
    http://sass-lang.com/

    View Slide

  20. Now that the ranting is done...
    HOW
    do I use a CSS framework?

    View Slide

  21. Grid Typography PSD files Form styles Print styles “Plugins” RTL lang
    Blueprint ✓ ✓ ✓ ✓ ✓ ✓ ✓
    YUI ✓ ✓ ✓ ✓ ✓ ✓
    960.gs ✓ ✓ ✓ * ✓
    1KB Grid ✓
    CSS Framework Comparison Matrix – Sounds really official, huh?

    View Slide

  22. http://960.gs/
    + Acorn
    + Adobe Fireworks
    + Adobe Flash
    + Adobe InDesign
    + Adobe Illustrator
    + Adobe Photoshop
    + Corel DRAW
    + Expression Design
    + GIMP
    + InkScape
    + OmniGraffle
    + Visio
    ... and printable PDF sketch sheets.
    The 960 Grid System has templates for...
    *

    View Slide



  23. 1/3 width


    1/3 width


    1/3 width



    1/8 width


    1/4 width




    1/4 width



    Example of Blueprint HTML
    http://blueprintcss.org/

    View Slide

  24. http://960.gs/


    1/3 width


    1/3 width


    1/3 width



    1/8 width


    1/4 width




    1/4 width



    Comparable example of 960.gs HTML (24-col)

    View Slide

  25. .span-1,
    .span-2,
    ... {
    float: left;
    margin-right: 10px;
    }
    .span-1 {
    width: 30px;
    }
    .prepend-1 {
    padding-left: 40px;
    }
    .append-1 {
    padding-right: 40px;
    }
    .last {
    margin-right: 0;
    }
    Example of Blueprint CSS
    http://blueprintcss.org/
    .pull-1,
    .pull-2,
    ... {
    float: left;
    position:relative;
    }
    .pull-1 {
    margin-left: -40px;
    }
    .push-1,
    .push-2,
    ... {
    float: right;
    position:relative;
    }
    .push-1 {
    margin: 0 -40px 1.5em 40px;
    }

    View Slide

  26. .container_24 .grid_1,
    .container_24 .grid_2,
    ... {
    display: inline;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    }
    .container_24 .grid_1 {
    width: 30px;
    }
    .container_24 .prefix_1 {
    padding-left: 40px;
    }
    .container_24 .suffix_1 {
    padding-right: 40px;
    }
    .alpha {
    margin-left: 0;
    }
    .omega {
    margin-right: 0;
    }
    Example of 960.gs CSS (24-col)
    .push_1,
    .pull_1,
    .push_2,
    .pull_2 {
    position: relative;
    }
    .container_24 .push_1 {
    left: 40px;
    }
    .container_24 .pull_1 {
    right: 40px;
    }
    Note: Whereas Blueprint’s push + pull
    classes are used for content (offset
    images / quotes), the push + pull classes
    in 960.gs are used to rearrange entire
    columns, independent of source order.
    This has practical implications for SEO.
    http://960.gs/

    View Slide

  27. BLUEPRINT GRID DIMENSIONS

    View Slide

  28. 960 (24-COL) GRID DIMENSIONS – What’s the difference? Glad you asked...

    View Slide

  29. Blueprint’s text can touch left / right edge of browser. Troublesome on mobile.

    View Slide

  30. 960.gs has a 5px (24-col) or 10px (12, 16-col) buffer on left / right side.

    View Slide

  31. http://developer.yahoo.com/yui/3/



    1/2 width


    1/2 width




    1/24 width


    23/24 width



    YUI 3’s grid is fluid. It doesn’t use any floats. WHAT!?

    View Slide

  32. .yui3-g {
    /* webkit: collapse white-space
    between units */
    letter-spacing: -0.31em;
    /* reset IE < 8 */
    *letter-spacing: normal;
    /* IE < 8 && gecko: collapse
    white-space between units */
    word-spacing: -0.43em;
    }
    .yui3-u,
    .yui3-u-1,
    .yui3-u-1-2,
    ... {
    display: inline-block;
    /* IE < 8: fake inline-block */
    zoom: 1; *display: inline;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    }
    .yui3-u-1 {
    display: block;
    }
    .yui3-u-1-2 {
    width: 50%;
    }
    .yui3-u-1-3 {
    width: 33.33333%;
    }
    Example of YUI 3 Grid CSS
    Note: Because nothing is floated in YUI,
    this means that no additional files are
    needed in order to support languages that
    read right-to-left (Hebrew, Arabic, etc).
    But because everything is essentially
    display: inline-block, and is fluid width,
    this also means columns cannot be
    rearranged for SEO purposes. Additionally,
    an extra wrapping is required to
    create gutters between content areas.
    http://developer.yahoo.com/yui/3/

    View Slide

  33. BROWSER ROUNDING
    % INCONSISTENCIES
    http://host.sonspring.com/yui3_grid/

    View Slide

  34. http://1kbgrid.com/

    View Slide

  35. http://1kbgrid.com/
    .grid_1 { width:60px; }
    .grid_2 { width:140px; }
    .grid_3 { width:220px; }
    .grid_4 { width:300px; }
    .grid_5 { width:380px; }
    .grid_6 { width:460px; }
    .grid_7 { width:540px; }
    .grid_8 { width:620px; }
    .grid_9 { width:700px; }
    .grid_10 { width:780px; }
    .grid_11 { width:860px; }
    .grid_12 { width:940px; }
    .column {
    margin: 0 10px;
    overflow: hidden;
    float: left;
    display: inline;
    }
    .row {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
    }
    .row .row {
    margin: 0 -10px;
    width: auto;
    display: inline-block;
    }
    1KB Grid – Entire CSS file!
    The 1KB Grid has everything you
    need, and nothing you don’t.
    Okay, maybe it doesn’t have everything
    you need. It is – after all – less than 1
    kilobyte of code, so it can’t do it all.
    No right-to-left support. No SEO column
    re-ordering. But it is incredibly efficient!
    The 960 Grid System is 5.5KB. You can
    think of the 1KB Grid as a “lite” version.

    View Slide





  36. 1/2 width




    1/6 width


    1/6 width


    1/6 width




    1/2 width


    Example of 1KB Grid HTML
    http://1kbgrid.com/

    View Slide

  37. So which CSS framework is the best? It depends...
    + What size site are you building?
    + Are you working alone or with a team?
    + Is pixel precision a make-or-break factor?
    + Do you need right-to-left language support?
    + Is your layout complex enough to merit SEO?
    + Do you want ready-made design or just a grid?

    View Slide

  38. Pros:
    + Fluid (or fixed) Width
    + Easy RTL support
    + Tested by Yahoo! devs
    + Part of a larger ecosystem
    YUI 3.0 Grid
    Cons:
    – Source dependent layout
    – No gutters by default
    – Rounding % inconsistencies
    Use when:
    You need a flexible layout, and when a margin of error ± a few pixels is acceptable.
    http://developer.yahoo.com/yui/3/

    View Slide

  39. Pros:
    + Ruby build scripts
    + Form, button, tab “plugins”
    + Extensive typography
    + Print stylesheet
    Blueprint
    Cons:
    – Source dependent layout
    – No outer gutters by default
    – Design presuppositions
    (could be a positive though)
    Use when:
    You want a design that is ready to go “out of the box” with many of the default
    details handled for you by default. You want to generate grids via Ruby scripts.
    http://blueprintcss.org/

    View Slide

  40. Pros:
    + 12, 16, or 24 column grids
    + PS + FW plugins, templates
    + Possible SEO benefits
    + IA, Designer, Dev friendly
    960.gs
    Cons:
    – Less features than YUI / BP
    – Focuses solely on grids
    (could be a positive though)
    Use when:
    Building a site with layouts driven by a CMS. If you are doing rapid prototyping
    or have IA > Designer > Dev workflow. Want layout to differ from source order.
    http://960.gs/

    View Slide

  41. Pros:
    + Handy grid generator tool
    + Easy to get started
    + Lightweight code
    + No extra nesting classes
    1KB Grid
    Cons:
    – Source dependent layout
    – Features < than YUI / BP / 960
    – Focuses solely on grids
    (could be a positive though)
    Use when:
    You are building a site that needs a grid layout, but the site’s requirements do not
    necessitate the overhead of a robust CSS framework. Or code size is a concern.
    http://1kbgrid.com/

    View Slide

  42. So, others’ frameworks are fine, but...
    WHEN
    should I roll my own framework?

    View Slide

  43. When to build your own...
    ✓ You have a specific need no other framework addresses
    ✓ You require a grid that is atypical of common frameworks
    ✓ To try your hand at architecting something others may use
    Pros:
    + 100% control over code
    + Build only what you need
    Cons:
    – Debugging is all your burden
    – Re-inventing the wheel?

    View Slide

  44. Some
    Helpful
    Resources...

    View Slide

  45. 5 Simple Steps to Designing Grid Systems
    A five-part series by Mark Boulton.
    http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1

    View Slide

  46. http://fivesimplesteps.com/
    Mark Boulton’s publishing company – Five Simple Steps

    View Slide

  47. http://www.subtraction.com/2004/12/31/grid-computi
    “Grid computing... and Design” – by Khoi Vinh

    View Slide

  48. http://www.cameronmoll.com/archives/2006/12/gridding_the_960/

    View Slide

  49. http://www.cameronmoll.com/archives/2006/12/gridding_the_960/

    View Slide

  50. http://keynotekungfu.com/

    View Slide

  51. FURTHER READING...
    Frameworks for Designers – Jeff Croft
    — http://alistapart.com/articles/frameworksfordesigners
    Smart CSS ain’t always sexy CSS – Martin Ringlein
    — http://digital-web.com/articles/smart_CSS_aint_always_sexy_CSS/
    Object Oriented CSS – Nicole Sullivan
    — http://wiki.github.com/stubbornella/oocss/

    View Slide

  52. Questions?
    — http://twitter.com/nathansmith
    — http://sonspring.com/contact
    Get the slides...
    — http://slideshare.net/nathansmith/think-vitamin-css

    View Slide