@sturobson | l-i-v-i-n | @redevelopconf October 2016
A presentation at re:develop conference 2016 in October 2016 in Bournemouth, UK by Stuart Robson
@sturobson | l-i-v-i-n | @redevelopconf October 2016
L-I-V-I-N Pattern Libraries, Styleguides and a Design Language @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Stuart Robson @sturobson www.alwaystwisted.com @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
designsystems.curated.co @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
why am i here? @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
L-I-V-I-N @sturobson | l-i-v-i-n | @redevelopconf October 2016
pattern Libraries Styleguides Design Language @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
pattern libraries @sturobson | l-i-v-i-n | @redevelopconf October 2016
the what @sturobson | l-i-v-i-n | @redevelopconf October 2016
styleguides @sturobson | l-i-v-i-n | @redevelopconf October 2016
the how @sturobson | l-i-v-i-n | @redevelopconf October 2016
the where @sturobson | l-i-v-i-n | @redevelopconf October 2016
the design language @sturobson | l-i-v-i-n | @redevelopconf October 2016
the why @sturobson | l-i-v-i-n | @redevelopconf October 2016
pattern Libraries @sturobson | l-i-v-i-n | @redevelopconf October 2016
pattern Libraries Styleguides @sturobson | l-i-v-i-n | @redevelopconf October 2016
pattern Libraries Styleguides Design Language @sturobson | l-i-v-i-n | @redevelopconf October 2016
a design system @sturobson | l-i-v-i-n | @redevelopconf October 2016
There is so much more to it @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Why do we need them? @sturobson | l-i-v-i-n | @redevelopconf October 2016
“We’re not designing pages, we’re designing systems of components. Stephen Hay @sturobson | l-i-v-i-n | @redevelopconf October 2016
“Tiny Bootstraps Dave Rupert @sturobson | l-i-v-i-n | @redevelopconf October 2016
consistency @sturobson | l-i-v-i-n | @redevelopconf October 2016
quality @sturobson | l-i-v-i-n | @redevelopconf October 2016
standardisation @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
maintainability @sturobson | l-i-v-i-n | @redevelopconf October 2016
sustainability @sturobson | l-i-v-i-n | @redevelopconf October 2016
empowerment @sturobson | l-i-v-i-n | @redevelopconf October 2016
Choosing a solution @sturobson | l-i-v-i-n | @redevelopconf October 2016
who is it for? @sturobson | l-i-v-i-n | @redevelopconf October 2016
who is it for? » developers » designers » project managers » contractors » freelancers @sturobson | l-i-v-i-n | @redevelopconf October 2016
who is it for? anyone involved in the project @sturobson | l-i-v-i-n | @redevelopconf October 2016
clients? @sturobson | l-i-v-i-n | @redevelopconf October 2016
What is it for? @sturobson | l-i-v-i-n | @redevelopconf October 2016
what is it for? » a single website » html email » a marketing page » prototyping » all of the above and more @sturobson | l-i-v-i-n | @redevelopconf October 2016
where will it go? @sturobson | l-i-v-i-n | @redevelopconf October 2016
where will it go? » a ‘static’ website » a CMS » a 3rd party service » Outlook 2010 » an internal project @sturobson | l-i-v-i-n | @redevelopconf October 2016
Deciding on a solution @sturobson | l-i-v-i-n | @redevelopconf October 2016
deciding on a solution » the who » the what » the where @sturobson | l-i-v-i-n | @redevelopconf October 2016
Deciding on a solution » the team » the project » the timeframe » the constraints » the requirements @sturobson | l-i-v-i-n | @redevelopconf October 2016
What’s needed in a solution @sturobson | l-i-v-i-n | @redevelopconf October 2016
What I think is needed and what (I think) works @sturobson | l-i-v-i-n | @redevelopconf October 2016
technologies @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
maintainability @sturobson | l-i-v-i-n | @redevelopconf October 2016
documentation @sturobson | l-i-v-i-n | @redevelopconf October 2016
documentation » make it part of the process » make it part of the pattern library » make it part of the style guide @sturobson | l-i-v-i-n | @redevelopconf October 2016
consistency @sturobson | l-i-v-i-n | @redevelopconf October 2016
quality @sturobson | l-i-v-i-n | @redevelopconf October 2016
standardisation @sturobson | l-i-v-i-n | @redevelopconf October 2016
documentation » how to use the patterns or code » where to use the patterns or code » where not to the patterns or code @sturobson | l-i-v-i-n | @redevelopconf October 2016
guidelines @sturobson | l-i-v-i-n | @redevelopconf October 2016
guidelines » a subset of documentation » specific to the code being written » needs to be within the documentation @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
github.com/sturobson/docs @sturobson | l-i-v-i-n | @redevelopconf October 2016
guidelines » BEM » OOCSS, ITCSS, SMACSS » Tabs or Spaces @sturobson | l-i-v-i-n | @redevelopconf October 2016
Styleguide @sturobson | l-i-v-i-n | @redevelopconf October 2016
“…a set of standards for the writing and design of documents” @sturobson | l-i-v-i-n | @redevelopconf October 2016
Colour @sturobson | l-i-v-i-n | @redevelopconf October 2016
typeface @sturobson | l-i-v-i-n | @redevelopconf October 2016
Iconography @sturobson | l-i-v-i-n | @redevelopconf October 2016
Grid systems @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
fast @sturobson | l-i-v-i-n | @redevelopconf October 2016
clear @sturobson | l-i-v-i-n | @redevelopconf October 2016
teachable @sturobson | l-i-v-i-n | @redevelopconf October 2016
low barrier to entry @sturobson | l-i-v-i-n | @redevelopconf October 2016
communication @sturobson | l-i-v-i-n | @redevelopconf October 2016
communication » be open » don’t dictate » listen » move within existing workflows @sturobson | l-i-v-i-n | @redevelopconf October 2016
be where the authors are @sturobson | l-i-v-i-n | @redevelopconf October 2016
Buy in @sturobson | l-i-v-i-n | @redevelopconf October 2016
buy in » your team » other teams » management @sturobson | l-i-v-i-n | @redevelopconf October 2016
What is needed and what works » a build tool » an html templating language » a preprocessor » documentation » guidelines » teachable » buy in @sturobson | l-i-v-i-n | @redevelopconf October 2016
L-I-V-I-N @sturobson | l-i-v-i-n | @redevelopconf October 2016
L-I-V-I-N » part of the development process » easily updatable » single source of truth @sturobson | l-i-v-i-n | @redevelopconf October 2016
automated @sturobson | l-i-v-i-n | @redevelopconf October 2016
What is available @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Subtle hover highlight. A highlight indicating you’ve already given a star. Subtle hover highlight on top of star-given styling. Dims the button to indicate it cannot be used. a.button.star{ … &.star-given{ … } &.disabled{ … } } @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
/* Provides extra visual weight and identifies the primary action in a set of buttons. <button class=”btn primary”>Primary</button> */ .btn.primary { background: steelblue; color: snow; border: 2px outset steelblue; } @sturobson | l-i-v-i-n | @redevelopconf October 2016
styleguides.io @sturobson | l-i-v-i-n | @redevelopconf October 2016
so much choice @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
What does not work @sturobson | l-i-v-i-n | @redevelopconf October 2016
HTML in css @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
code will decay @sturobson | l-i-v-i-n | @redevelopconf October 2016
TOO MUCH CSS preprocessing @sturobson | l-i-v-i-n | @redevelopconf October 2016
easy to read, easy to adapt, easy to author @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
L-I-V-I-N Pattern Libraries, Styleguides and Design Systems @sturobson | l-i-v-i-n | @redevelopconf October 2016
fractal.build @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
github.com/sturobson/SCL @sturobson | l-i-v-i-n | @redevelopconf October 2016
L-I-V-I-N @sturobson | l-i-v-i-n | @redevelopconf October 2016
L-I-V-I-N medium.com/webdevs @sturobson | l-i-v-i-n | @redevelopconf October 2016
Pattern library - what styleguides - where, how design language - why Design System @sturobson | l-i-v-i-n | @redevelopconf October 2016
work out what you need @sturobson | l-i-v-i-n | @redevelopconf October 2016
investigate what’s available @sturobson | l-i-v-i-n | @redevelopconf October 2016
borrow what you can @sturobson | l-i-v-i-n | @redevelopconf October 2016
document it @sturobson | l-i-v-i-n | @redevelopconf October 2016
strong message here @sturobson | l-i-v-i-n | @redevelopconf October 2016
thank you @sturobson | www.alwaystwisted.com @sturobson | l-i-v-i-n | @redevelopconf October 2016
@sturobson | l-i-v-i-n | @redevelopconf October 2016
