What Is A CSS Framework Anyway?

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Harry Roberts Consultant Front-end Architect – @csswizardry

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Disclaimer!

Slide 5

Slide 5 text

inuitcss.com

Slide 6

Slide 6 text

#wtf

Slide 7

Slide 7 text

#wtframework

Slide 8

Slide 8 text

A brief history of CSS frameworks Really, really brief…

Slide 9

Slide 9 text

Began in 2005. Possibly the ﬁrst CSS framework. (Actually more than just a CSS framework.)

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

I started looking at existing CSS frameworks, trying to ﬁnd 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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

bit.ly/O8vpy0

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

They try to be all things to all men Responsive. Mobile-ﬁrst. Flat design. 101 speciﬁc components. Sold as a ‘framework’.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

You’re now working in spite  of—rather than because of—a CSS framework.

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

We have very strong opinions about CSS frameworks…

Slide 36

Slide 36 text

…why?

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

xkcd.com/927

Slide 40

Slide 40 text

Who so many? Another day, another GitHub project…

Slide 41

Slide 41 text

Water, water, every where, Nor any drop to drink.”  — The Rime of the Ancient Mariner “ ! bit.ly/1hbvjwC

Slide 42

Slide 42 text

Or…

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Why so many? Opinionated developers. Subtle differences. Selﬁshness. Perception of inability.

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

This is a question of responsible development and foresight.

Slide 51

Slide 51 text

CSS Frameworks vs. UI Toolkits The differences.

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

frame·work  noun  a basic structure underlying a system, concept, or text.

Slide 54

Slide 54 text

UI Toolkits are often miss-sold as CSS Frameworks.

Slide 55

Slide 55 text

CSS Framework UI Toolkit

Slide 56

Slide 56 text

There is room for both.

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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.

Slide 59

Slide 59 text

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 ﬁne. @makeusabrew

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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.

Slide 62

Slide 62 text

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.

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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. Speciﬁcity negates all of the above.

Slide 65

Slide 65 text

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: speciﬁcity.

Slide 66

Slide 66 text

CSS frameworks should work to solve these problems.

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Don’t solve the fun bits,  solve the difﬁcult bits.

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

What a CSS framework should not be A ﬁnal solution. A UI toolkit. Designed. Prescriptive.

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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?

Slide 75

Slide 75 text

Recap

Slide 76

Slide 76 text

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.

Slide 77

Slide 77 text

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