6. MULTIPLE INTERNAL
& EXTERNAL
REQUIREMENTS
1 x App
Styles need to be able to
compile to be compatible
with native languages
2 x Websites
One internally managed and
one externally managed
∞ Internal Apps
Multiple apps of multiple
ages using anything from
jQuery to Kendo UI
9. BURNING
PLATFORM
BURNING
DESIRE
"Append Only" Stylesheets from 18
years of different developers
500kb bundled CSS file
Complete reimplimentations of visibly
similar functionality instead of reuse
Inconsistent code
Full site regression tests required for
any code change
No coding standards
Impossible to update branding
Multiple L&Fs and styles
IE6 - 10 vendor prefixes and hacks
Sad UX people, hacking away at stuff
Quick! Easy!
Declare once, apply everywhere
Consistency
Build pipeline with full optimisation and
autoformatting
Component isolation and test suites
IDE automated coding standards
(Prettier & StyleLint)
Update branding from one file
Up front implementation
Happy UX people!
12. "DESIGN SYSTEM,
RIGHT AHEAD!"
Page Layout Templates
Elements Reacting to Other Elements
Internationalisation
Futureproofing
Documentation Automation
Accessibility
The easy stuff is the tip of the iceberg
Font Formats
Packaging & Hosting
Build Pipelines
Platform Requirements
Enforcing Constraints
Linting
Readmes
Baseline Grids
Library Architecture
Language & Approach
16. YO DAWG
I HEARD YOU LIKE
LAYERS...
Components
JavaScript implementations
importing styles
Sandbox
Scenario-Driven component
development environment
Guide
Documentation built from
comments and readme files
Styles
CSS styles which can be
imported and reused
Configs
Agreed base colours and
spacing multipliers
17. VALUABLE LESSON #4
Pick your approach, live it, breathe it,
learn how to explain it to a 5 year old
20. AUTOMATE ALL
THE THINGS
Sandboxing
StoryBook.js
Angular Playground
Documentation
JSDoc
SassDoc
CompoDoc
Calculations or building code blocks
SASS functions
Mixins
Webpack helpers
Asset copying and packaging
Bash Scripts
NPM Packages
Pipeline Builds
Choosing which npm script to run
ntl