An introduction to the aims and design of the SUIT framework
CSS Application Architecture@necolas
View Slide
What’s the difference between“Architecture”, “Framework”,and “Toolkit”?
Architecture…a plan about how to structure anapplication.
Framework…an implementation of an architecture thatsomeone can use as the basis for aworking application.
Toolkit / Library…a collection of pre-built patterns that canbe assembled to create an application.
Making architectural decisions
Client / Agency work
I don’t need an architecture!
Long-lived product work
No clients to blame :(
Find the right problems
Clean code! …no
“Does he ever think of anythingrbut himself?”
Dealing with change
Reducing helplessness
Communicate ways of thinking
The freest human is the onewho never has to choose
1. Single responsibility2. Extension over modification3. Composition over inheritance4. Low coupling5. Encapsulation6. Documentation
Home Sidebar Tweetbox.home .sidebar .tweetbox { ... }.home .footer .listbox { ... }Footer Listbox
Home Sidebar Tweetbox.tweetbox { ... }.listbox { ... }Footer Listbox
SUIT frameworkgithub.com/suitcss/suit
Web Component-y.tweet { /* make it look good */ }.avatar { ... }.text { ... }.........
# utilitiesu-utilityName# componentsComponentNameComponentName--modifierNameComponentName-descendantName# js utilitiesjs-hookName
HTML example.........
.Tweet { ... } /* Component */.Tweet.is-favorited { ... } /* State */.........
.Tweet { ... } /* Component */.Tweet-text { ... } /* Descendant */.........
.Avatar { ... } /* Component */.Avatar--large { ... } /* Modifier */.........
...{user.name}{user.screenname}......
{{>partials/tweet_useridentity}}{{>partials/tweet_text}}{{>partials/tweet_media}}{{>partials/tweet_actions}}
user-fullname="{{user.fullname}}"user-screenname="{{user.screenname}}"user-avatar="{{user.avatar}}"show-actionsshow-media>{{text}}
What about RWD?
bostonglobe.com
92 separate @media directives27 different width values3804804816006206396407007507687887998008098109009309319609801024105011001200121012201400
Restraint required
@import“component/grid-v1.css”;@import“component/grid-v2.css”(min-width: 20em);@import“component/grid-v3.css”(min-width: 50em);
.v1-u-size1of2 { ... }.v2-u-size1of4 { ... }.v3-u-size1of6 { ... }
Tooling
bower.io
# bower.json{"name": "my-app","dependencies": {"normalize-css": "~2.1.0","suit-utils": "~0.6.0","suit-button": "~2.0.0”,"suit-grid": "~0.2.0",...}}
CSS preprocessing
Automatic vendor prefixes
.Button {background: linear-gradient(…);}
.Button {background: -webkit-linear-gradient(…);background: linear-gradient(…);}
CSS variables
:root {var-button-bg: linear-gradient(…);}.Button {background: var(button-bg);}
Conformance checking
Nothing is perfectNothing lastsNothing is finished
Accept transience andimperfection
End