A presentation at re:develop conference 2016 in 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
L-I-V-I-N … discussing how to keep on top of your front-end code when creating styleguides and pattern libraries for your designs. How documentation should be a part of the process. Deciding on the who, what and why for the code and how those answers determines decisions. Peppered with opinions on what works and what does not when developing a pattern library as part of a project.
The following resources were mentioned during the presentation or are useful additional information.
An ever-growing list of all things documentation. Be it guidelines, workflows, standards or ‘best’ practices.
Here’s what was said about this presentation on social media.
