L-I-V-I-N

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.

given at:
DXN - June 2016
FrontEndNorth - September 2016
re:develop - October 2016

Transcript

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