Upgrade to Pro — share decks privately, control downloads, hide ads and more …

L-I-V-I-N

 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

F479fe45ac0f50c0bdbe35c5757986f7?s=128

Stuart Robson

October 14, 2016
Tweet

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