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

What Is A CSS Framework Anyway?

Harry Roberts
September 23, 2014

What Is A CSS Framework Anyway?

What Is A CSS Framework Anyway? at SmartWeb Conference, Bucharest. September 2014.

VIDEO: https://vimeo.com/95734680

Harry Roberts

September 23, 2014
Tweet

More Decks by Harry Roberts

Other Decks in Design

Transcript

  1. What is a CSS Framework Anyway?
    SmartWeb—Bucharest, 2014

    View full-size slide

  2. Harry Roberts
    Consultant Front-end Architect – @csswizardry

    View full-size slide

  3. inuitcss.com

    View full-size slide

  4. #wtframework

    View full-size slide

  5. A brief history of CSS frameworks
    Really, really brief…

    View full-size slide

  6. Began in 2005.
    Possibly the first CSS framework.
    (Actually more than just a CSS framework.)

    View full-size slide

  7. August, 2007.
    Wasn’t all-singing, all-dancing.
    Solved actual problems.

    View full-size slide

  8. I started looking at existing CSS frameworks,
    trying to find one that was right for me […]
    the only viable option was the Yahoo UI
    Library, but […] YUI is just way too bloated
    for what I want from a framework.”

    — Olav Bjørkøy, 2007

    !
    !
    !
    !
    bit.ly/P9RWf1

    View full-size slide

  9. What’s wrong with CSS frameworks?
    According to you…

    View full-size slide

  10. bit.ly/O8vpy0

    View full-size slide

  11. Why people don’t use CSS frameworks
    Far too bloated.
    Most projects are unique—how can standard CSS
    accommodate bespoke UIs?
    Far too prescriptive and opinionated.
    They try to be all things to all men.
    They get in your way.

    View full-size slide

  12. Bloat
    Size over the wire is bad for performance (i.e. users).
    Size on the filesystem is bad for developers.

    View full-size slide

  13. Unique projects
    This is the problem with (conf)using UI Toolkits.
    Fully designed components aren’t reusable cross-project.
    This is where OOCSS is a GoodIdea™.

    View full-size slide

  14. Opinionated
    To an extent, they need to be…
    …but only in the right places.

    View full-size slide

  15. They try to be all things to all men
    Responsive.
    Mobile-first.
    Flat design.
    101 specific components.
    Sold as a ‘framework’.

    View full-size slide

  16. They get in your way
    All of the above problems compound.
    Now left with something that makes you less productive.

    View full-size slide

  17. You’re now working in spite

    of—rather than because of—a
    CSS framework.

    View full-size slide

  18. inuitcss.com
    *Ahem*
    *Cough*
    *Hint*
    *Cough*
    *Hint*

    View full-size slide

  19. We have very
    strong opinions about
    CSS frameworks…

    View full-size slide

  20. Why the strong opinions?
    It’s something we can all do ourselves—we don’t need any
    help, right?
    It’s ‘easy’, so it’s easy to have an opinion.
    As things get more complex, we have less opinions.

    View full-size slide

  21. xkcd.com/927

    View full-size slide

  22. Who so many?
    Another day, another GitHub project…

    View full-size slide

  23. Water, water, every where,
    Nor any drop to drink.”

    — The Rime of the Ancient Mariner

    !
    bit.ly/1hbvjwC

    View full-size slide

  24. How on Earth do we have so many
    frameworks, yet still can’t pick one we might
    actually use?!”

    !

    View full-size slide

  25. Why so many?
    Opinionated developers.
    Subtle differences.
    Selfishness.
    Perception of inability.

    View full-size slide

  26. CSS frameworks vs. ‘others’
    How do we keep getting them so wrong?

    View full-size slide

  27. CSS frameworks vs. ‘others’
    Everyone loves jQuery, Symfony, AngularJS, etc.
    Everyone hates CSS frameworks.

    View full-size slide

  28. Release date Current version
    inuitcss April, 2011 ~6.0.0
    Foundation October, 2011 5.2.1
    Bootstrap April, 2011 3.1.1
    CSS frameworks releases

    View full-size slide

  29. Release date Current version
    jQuery August, 2006 2.1.0
    Symfony October, 2005 2.4.2
    WordPress May, 2003 3.8.1
    ‘Other’ frameworks releases

    View full-size slide

  30. If even the tiniest backwards incompatible
    changes to the public API require a major
    version bump, won't I end up at version
    42.0.0 very rapidly?

    !
    !
    semver.org

    View full-size slide

  31. This is a question of
    responsible development
    and foresight.

    View full-size slide

  32. CSS Frameworks vs. UI Toolkits
    The differences.

    View full-size slide

  33. frame·work

    noun

    a basic structure underlying a system,
    concept, or text.

    View full-size slide

  34. UI Toolkits are often miss-sold
    as CSS Frameworks.

    View full-size slide

  35. CSS
    Framework
    UI
    Toolkit

    View full-size slide

  36. There is room for both.

    View full-size slide

  37. UI Toolkit
    A full-on product.
    Implemented, not worked upon.
    Does the majority of the work.

    View full-size slide

  38. UI Toolkit
    Great if you need a full UI out of the box.
    If you’re not great with either design or front-end dev.
    Fantastic for prototyping.
    Not suited to client work, or working with bespoke designs.

    View full-size slide

  39. Nick Payne
    Software Engineer.
    Much cooler than I am.
    Keep Open-Sourcerer.
    Doesn’t want to be bogged down by UI.
    Needs something off-the-shelf.
    Needs a quick win.
    That’s fine.
    @makeusabrew

    View full-size slide

  40. CSS Framework
    A helping hand.
    Should guide and lead decisions.
    More of a concept than a product.
    Makes up the minority of a project.

    View full-size slide

  41. CSS Framework
    Good if you need help with scalability or architecture.
    Good if you aren’t particularly good with CSS…
    …but do have your own designs.

    View full-size slide

  42. UI Toolkit CSS Framework
    Does the work for you. Offers a helping hand.
    Quick-win. Major commitment.
    Answers the ‘what?’ Answers the ‘how?’
    Gets the job done. Gets the job started.

    View full-size slide

  43. What is wrong with CSS?
    Unfortunately, almost all of it…

    View full-size slide

  44. What is wrong with CSS?
    It’s old. Really old.
    It can’t be changed.
    It operates in a global namespace.
    It’s based on inheritance.
    It’s very, very loose.
    Source order is critical.
    The cascade needs managing.
    Specificity negates all of the above.

    View full-size slide

  45. Where does that leave us?
    With an old, loose, leaky, globally-operating, inheritance-based
    language which is entirely dependent on source-order, except
    when you introduce its own worst feature: specificity.

    View full-size slide

  46. CSS frameworks should
    work to solve these
    problems.

    View full-size slide

  47. What a CSS framework should be
    A humble, helpful hint.

    View full-size slide

  48. What a CSS framework should be
    An enabler.
    A helping hand.
    A school-of-thought.
    Highly configurable.
    Design-free.
    Ignorant/agnostic.

    View full-size slide

  49. Don’t solve the fun bits,

    solve the difficult bits.

    View full-size slide

  50. What a CSS framework should not be
    Prescriptive, cumbersome, designed.

    View full-size slide

  51. What a CSS framework should not be
    A final solution.
    A UI toolkit.
    Designed.
    Prescriptive.

    View full-size slide

  52. A [CSS] framework should not
    do your work for you, it should
    allow you to do

    your own work faster.

    View full-size slide

  53. Should I write my own?
    Perhaps, but let’s see…

    View full-size slide

  54. Should I write my own?
    What is its reason for being?
    Will it be similar to anything that already exists?
    Will it be a Framework or a UI Toolkit?
    Will you open-source it?
    Do you expect people to use it?

    View full-size slide

  55. Recap
    Do we really mean framework?
    Do very little, if not less.
    Solve the tricky bits.
    Get out of the way.
    Let people do the fun stuff because of you.
    Get a goal, purpose, and roadmap in place.

    View full-size slide

  56. Thank you
    Harry Roberts
    csswizardry.com
    @csswizardry
    speakerdeck.com/csswizardry/what-is-a-css-framework-
    anyway

    View full-size slide