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

More Decks by Harry Roberts

Other Decks in Design


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

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

  3. None
  4. Disclaimer!

  5. inuitcss.com

  6. #wtf

  7. #wtframework

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

  9. Began in 2005. Possibly the first CSS framework. (Actually more

    than just a CSS framework.)
  10. None
  11. August, 2007. Wasn’t all-singing, all-dancing. Solved actual problems.

  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
  13. What’s wrong with CSS frameworks? According to you…

  14. bit.ly/O8vpy0

  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  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.
  26. Bloat Size over the wire is bad for performance (i.e.

    users). Size on the filesystem is bad for developers.
  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™.
  28. Opinionated To an extent, they need to be… …but only

    in the right places.
  29. They try to be all things to all men Responsive.

    Mobile-first. Flat design. 101 specific components. Sold as a ‘framework’.
  30. They get in your way All of the above problems

    compound. Now left with something that makes you less productive.
  31. You’re now working in spite
 of—rather than because of—a CSS

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

  34. None
  35. We have very strong opinions about CSS frameworks…

  36. …why?

  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.
  38. None
  39. xkcd.com/927

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

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

    The Rime of the Ancient Mariner “ ! bit.ly/1hbvjwC
  42. Or…

  43. How on Earth do we have so many frameworks, yet

    still can’t pick one we might actually use?!” “ !
  44. Why so many? Opinionated developers. Subtle differences. Selfishness. Perception of

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

    so wrong?
  46. CSS frameworks vs. ‘others’ Everyone loves jQuery, Symfony, AngularJS, etc.

    Everyone hates CSS frameworks.
  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
  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
  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
  50. This is a question of responsible development and foresight.

  51. CSS Frameworks vs. UI Toolkits The differences.

  52. None
  53. frame·work
 a basic structure underlying a system, concept, or

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

  55. CSS Framework UI Toolkit

  56. There is room for both.

  57. UI Toolkit A full-on product. Implemented, not worked upon. Does

    the majority of the work.
  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.
  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
  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.
  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.
  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.
  63. What is wrong with CSS? Unfortunately, almost all of it…

  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.
  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.
  66. CSS frameworks should work to solve these problems.

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

  68. What a CSS framework should be An enabler. A helping

    hand. A school-of-thought. Highly configurable. Design-free. Ignorant/agnostic.
  69. Don’t solve the fun bits,
 solve the difficult bits.

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

  71. What a CSS framework should not be A final solution.

    A UI toolkit. Designed. Prescriptive.
  72. A [CSS] framework should not do your work for you,

    it should allow you to do
 your own work faster.
  73. Should I write my own? Perhaps, but let’s see…

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

  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.
  77. Thank you Harry Roberts csswizardry.com @csswizardry speakerdeck.com/csswizardry/what-is-a-css-framework- anyway