L-I-V-I-N

@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

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

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

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

// // // // // // // A button suitable for giving a star to someone. :hover .star-given .star-given:hover .disabled

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

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

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