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

Evolving Web Applications with Modular Design Components

Evolving Web Applications with Modular Design Components

Web applications need to evolve over time. The best way to encourage this evolution is by building module based component systems. This allows for easier iteration, less refactoring, and better products for the consumers.

Mike Kivikoski will show how to design a module based component system using a CSS preprocessor, such as Sass. This technique allows us to design faster and in the browser, gives us the chance to put together various layouts while reusing UI patterns, and to help create cohesion and comfort for the user. Mike will demonstrate how to setup this system, build it, and use it within a product.


Mike Kivikoski

October 20, 2015


  1. Evolving Web Applications with Module Based 
 Design Components Mike

    Kivikoski – @mkivikoski – cantina.co
  2. Hi! I’m Mike Kivikoski @mkivikoski

  3. A Designer that develops

  4. A Developer that designs

  5. A Front End Designer

  6. I work here, at Cantina

  7. 5 Developers Case study project Cantina

  8. 5 Developers Cantina ~65 Developers Client Case study project

  9. How to keep everyone 
 in sync with styles?

  10. How to keep everyone 
 in sync with styles? Let’s

    use a Module Component System!
  11. What is a Module Component System? A design approach that

    subdivides a system into smaller parts.” “ Wikipedia https://en.wikipedia.org/wiki/Modular_design
  12. http://s3images.coroflot.com/user_files/individual_files/196273_sUPk9iv_JftrlZlmeCETPZLfS.jpg

  13. http://ecx.images-amazon.com/images/I/71G8mbuSlOL._SL1500_.jpg

  14. https://thepeachreview.files.wordpress.com/2012/05/img_1945.jpg

  15. https://c1.staticflickr.com/5/4025/4436381310_4cc857eecf_b.jpg

  16. https://thepeachreview.files.wordpress.com/2012/05/img_1934.jpg

  17. Benefits Cohesion

  18. Benefits Cohesion UI/UX Patterns

  19. Benefits Cohesion UI/UX Patterns Responsive Design

  20. Benefits Cohesion UI/UX Patterns Responsive Design Browser Testing

  21. Benefits Cohesion UI/UX Patterns Responsive Design Accessibility Browser Testing

  22. Benefits Cohesion UI/UX Patterns Responsive Design Accessibility Browser Testing Perfomance

  23. None
  24. netflix.com

  25. netflix.com

  26. netflix.com

  27. netflix.com

  28. netflix.com

  29. netflix.com

  30. netflix.com

  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. vv

  51. vv

  52. None
  53. None
  54. None
  55. vv

  56. vv

  57. None
  58. Why does this happen? Segregated departments Company merges/acquisitions Legacy code

    Tight deadlines Lack of reviews
  59. None
  60. Stop designing screens Start designing components

  61. Atomic Design A methodology for creating design systems, with five

    distinct levels” “ Brad Frost, @brad_frost
  62. “ http://bradfrost.com/blog/post/atomic-web-design/

  63. Build faster (and easier) Sketch layouts with pre-built components.

  64. None
  65. None
  66. None
  67. None
  68. Benefits Decrease design time Faster testing of ideas Quicker Stakeholder

  69. How to start Use .classes instead of IDs Single Responsibility

    Principle Allow classes to combine Use variables Review everything
  70. https://speakerdeck.com/csswizardry/css-for-software-engineers-for-css-developers?slide=41 Harry Roberts, @csswizardy

  71. https://speakerdeck.com/csswizardry/css-for-software-engineers-for-css-developers?slide=41 Harry Roberts, @csswizardy

  72. Use variables for size

  73. Classes on typography

  74. Use variables for colors

  75. Use variables for colors

  76. Use variables for colors

  77. Media queries

  78. Build tool https://www.npmjs.com/package/grunt-combine-media-queries

  79. File organization Files based on components, 
 not screens alerts.less

    buttons.less forms.less
  80. Use a grid http://getbootstrap.com/css/#grid

  81. Grid classes

  82. Grid classes http://neat.bourbon.io/examples/

  83. Check outputted CSS Ensure outputted CSS is slim Ensure CSS

    follows conventions Build tools
  84. CSS Methodologies

  85. http://sassmeister.com/gist/657b64eb3c7bca6679e3 Show errors

  86. Linters https://github.com/postcss/postcss-bem-linter

  87. Linters https://www.npmjs.com/package/sass-lint

  88. Review everything Variables used Writing syntax Component is reusable Reused

    component follows convention
  89. Starting the style guide

  90. Styleguide CSS Connect it to the outputted application CSS.

  91. Living Styleguide http://cantina.co/styleguide/

  92. Living Styleguide https://www.lightningdesignsystem.com/components/button-groups

  93. Living Styleguide

  94. Documentation Writing/syntax examples Show each combo Write for a n00b

    Don’t let it die Let it evolve
  95. Writing Example https://github.com/airbnb/javascript

  96. Component

  97. Combos x1 https://www.lightningdesignsystem.com/components/buttons#brand

  98. Combos x2 https://www.lightningdesignsystem.com/components/buttons#brand

  99. Making changes Don’t make one offs Change components globally Create

    new class, if needed
  100. Don’t make one offs

  101. https://css-tricks.com/css-wisdom-from-goofus-and-gallent/

  102. Refactoring Don’t be afraid Refactor everything Don’t take it personal

    Refactor often
  103. Regression testing

  104. Auto compare https://github.com/Huddle/PhantomCSS

  105. Auto compare https://github.com/Huddle/PhantomCSS

  106. Style guide audit https://github.com/straker/css-style-guide-audit

  107. When to start regression After initial components are created Otherwise,

    you may go mad Try to test components, not screens
  108. Deeper dive https://css-tricks.com/automating- css-regression-testing/ https://davidwalsh.name/visual- regression-testing-angular-applications https://css-tricks.com/visual-regression- testing-with-phantomcss/

  109. Frameworks

  110. Frameworks

  111. Frameworks

  112. Communication Make the styleguide public to team Give people freedom

  113. Play nice with others The name ‘LEGO’ is an abbreviation

    of the two Danish words “leg godt”, meaning “play well”. http://www.lego.com/en-us/aboutus/lego-group/the_lego_history
  114. Thank you. @mkivikoski cantina.co http://shop.oreilly.com/product/0636920035251.do