Slide 1

Slide 1 text

@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