@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 2
Slide 2 text
L-I-V-I-N
Pattern Libraries, Styleguides and a Design Language
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 3
Slide 3 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 4
Slide 4 text
Stuart Robson
@sturobson
www.alwaystwisted.com
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 5
Slide 5 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 6
Slide 6 text
designsystems.curated.co
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 7
Slide 7 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 8
Slide 8 text
why am i here?
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 9
Slide 9 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 10
Slide 10 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 11
Slide 11 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 12
Slide 12 text
L-I-V-I-N
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 13
Slide 13 text
pattern Libraries
Styleguides
Design Language
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 14
Slide 14 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 15
Slide 15 text
pattern libraries
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 16
Slide 16 text
the what
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 17
Slide 17 text
styleguides
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 18
Slide 18 text
the how
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 19
Slide 19 text
the where
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 20
Slide 20 text
the design language
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 21
Slide 21 text
the why
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 22
Slide 22 text
pattern Libraries
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 23
Slide 23 text
pattern Libraries
Styleguides
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 24
Slide 24 text
pattern Libraries
Styleguides
Design Language
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 25
Slide 25 text
a design system
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 26
Slide 26 text
There is so much more to it
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 27
Slide 27 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 28
Slide 28 text
Why do we need them?
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 29
Slide 29 text
“We’re not designing
pages, we’re
designing systems
of components.
Stephen Hay
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 30
Slide 30 text
“Tiny Bootstraps
Dave Rupert
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 31
Slide 31 text
consistency
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 32
Slide 32 text
quality
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 33
Slide 33 text
standardisation
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 34
Slide 34 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 35
Slide 35 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 36
Slide 36 text
maintainability
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 37
Slide 37 text
sustainability
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 38
Slide 38 text
empowerment
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 39
Slide 39 text
Choosing a solution
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 40
Slide 40 text
who is it for?
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 41
Slide 41 text
who is it for?
» developers
» designers
» project managers
» contractors
» freelancers
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 42
Slide 42 text
who is it for?
anyone involved in the project
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 43
Slide 43 text
clients?
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 44
Slide 44 text
What is it for?
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
where will it go?
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
Deciding on a solution
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 49
Slide 49 text
deciding on a solution
» the who
» the what
» the where
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 50
Slide 50 text
Deciding on a solution
» the team
» the project
» the timeframe
» the constraints
» the requirements
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 51
Slide 51 text
What's needed in a solution
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 52
Slide 52 text
What I think is needed
and what (I think) works
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 53
Slide 53 text
technologies
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 54
Slide 54 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 55
Slide 55 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 56
Slide 56 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 57
Slide 57 text
maintainability
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 58
Slide 58 text
documentation
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 59
Slide 59 text
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
Slide 60
Slide 60 text
consistency
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 61
Slide 61 text
quality
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 62
Slide 62 text
standardisation
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 63
Slide 63 text
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
Slide 64
Slide 64 text
guidelines
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 65
Slide 65 text
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
Slide 66
Slide 66 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 67
Slide 67 text
github.com/sturobson/docs
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 68
Slide 68 text
guidelines
» BEM
» OOCSS, ITCSS, SMACSS
» Tabs or Spaces
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 69
Slide 69 text
Styleguide
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 70
Slide 70 text
“...a set of standards
for the writing and
design of
documents”
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 71
Slide 71 text
Colour
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 72
Slide 72 text
typeface
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 73
Slide 73 text
Iconography
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 74
Slide 74 text
Grid systems
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 75
Slide 75 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 76
Slide 76 text
fast
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 77
Slide 77 text
clear
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 78
Slide 78 text
teachable
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 79
Slide 79 text
low barrier to entry
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 80
Slide 80 text
communication
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 81
Slide 81 text
communication
» be open
» don't dictate
» listen
» move within existing workflows
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 82
Slide 82 text
be where the authors are
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 83
Slide 83 text
Buy in
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 84
Slide 84 text
buy in
» your team
» other teams
» management
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
L-I-V-I-N
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 87
Slide 87 text
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
Slide 88
Slide 88 text
automated
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 89
Slide 89 text
What is available
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 90
Slide 90 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 91
Slide 91 text
// A button suitable for giving a star to someone.
//
// :hover - Subtle hover highlight.
// .star-given - A highlight indicating you've already given a star.
// .star-given:hover - Subtle hover highlight on top of star-given styling.
// .disabled - Dims the button to indicate it cannot be used.
//
a.button.star{
...
&.star-given{
...
}
&.disabled{
...
}
}
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 92
Slide 92 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 93
Slide 93 text
/* Provides extra visual weight and identifies the primary action in a set of buttons.
Primary
*/
.btn.primary {
background: steelblue;
color: snow;
border: 2px outset steelblue;
}
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 94
Slide 94 text
styleguides.io
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 95
Slide 95 text
so much choice
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 96
Slide 96 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 97
Slide 97 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 98
Slide 98 text
What does not work
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 99
Slide 99 text
HTML in css
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 100
Slide 100 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 101
Slide 101 text
code will decay
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 102
Slide 102 text
TOO MUCH CSS preprocessing
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 103
Slide 103 text
easy to read, easy to adapt,
easy to author
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 104
Slide 104 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 105
Slide 105 text
L-I-V-I-N
Pattern Libraries, Styleguides and Design Systems
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 106
Slide 106 text
fractal.build
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 107
Slide 107 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 108
Slide 108 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 109
Slide 109 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 110
Slide 110 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 111
Slide 111 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 112
Slide 112 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 113
Slide 113 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 114
Slide 114 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 115
Slide 115 text
github.com/sturobson/SCL
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 116
Slide 116 text
L-I-V-I-N
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 117
Slide 117 text
L-I-V-I-N
medium.com/webdevs
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 118
Slide 118 text
Pattern library - what
styleguides - where, how
design language - why
Design System
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 119
Slide 119 text
work out what you need
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 120
Slide 120 text
investigate what's available
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 121
Slide 121 text
borrow what you can
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 122
Slide 122 text
document it
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 123
Slide 123 text
strong message here
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 124
Slide 124 text
thank you
@sturobson | www.alwaystwisted.com
@sturobson | l-i-v-i-n | @redevelopconf October 2016
Slide 125
Slide 125 text
@sturobson | l-i-v-i-n | @redevelopconf October 2016