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

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 Slide

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

    View Slide

  3. View Slide

  4. Disclaimer!

    View Slide

  5. inuitcss.com

    View Slide

  6. #wtf

    View Slide

  7. #wtframework

    View Slide

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

    View Slide

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

    View Slide

  10. View Slide

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

    View Slide

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

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

    View Slide

  14. bit.ly/O8vpy0

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

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

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  31. You’re now working in spite

    of—rather than because of—a
    CSS framework.

    View Slide

  32. View Slide

  33. inuitcss.com
    *Ahem*
    *Cough*
    *Hint*
    *Cough*
    *Hint*

    View Slide

  34. View Slide

  35. We have very
    strong opinions about
    CSS frameworks…

    View Slide

  36. …why?

    View Slide

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

  38. View Slide

  39. xkcd.com/927

    View Slide

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

    View Slide

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

    — The Rime of the Ancient Mariner

    !
    bit.ly/1hbvjwC

    View Slide

  42. Or…

    View Slide

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

    !

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

    View Slide

  51. CSS Frameworks vs. UI Toolkits
    The differences.

    View Slide

  52. View Slide

  53. frame·work

    noun

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

    View Slide

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

    View Slide

  55. CSS
    Framework
    UI
    Toolkit

    View Slide

  56. There is room for both.

    View Slide

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

    View Slide

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

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

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

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

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

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

    View Slide

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

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

  66. CSS frameworks should
    work to solve these
    problems.

    View Slide

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

    View Slide

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

    View Slide

  69. Don’t solve the fun bits,

    solve the difficult bits.

    View Slide

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

    View Slide

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

    View Slide

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

    your own work faster.

    View Slide

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

    View Slide

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

  75. Recap

    View Slide

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

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

    View Slide