Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada More info at www.fitc.ca/webu The Future is in Pieces with Jonathan Snook OVERVIEW In the last few years, we’ve seen an emergence of a modular way of thinking about code and design. We’ve seen the rise of SMACSS, BEM, and Atomic Design. This talk will look at those modular concepts and how they can streamline development for large and long-running projects. We’ll also look at how these approaches can ease responsive design and development. Lastly, we will look at where the modular approach is going in the future as Web Components slowly make their way into browsers and application frameworks. OBJECTIVE To learn how modular design can improve our development process. TARGET AUDIENCE Front-end developers FIVE THINGS AUDIENCE MEMBERS WILL LEARN Modular Design Modular CSS Naming Convention State-based Design Web Components

1. Web Unleashed — September 16, 2015
The Future
is in pieces

4. Wired Redesign (2002)

5. Simple Blog Designs

6. Coding like it’s 2003
#header h1, #header h2 { font-size:13px; font-weigh… }
#header h1 { color: #680; float:right; padding-b…}
#header h2 { float:left; padding:18px 20px; posi…}
#header h2 img { position:absolute; left:0; top:0; }
#header h2 a { text-decoration:none; color:#333; }
#main h2 {text-transform:uppercase; font-weight:…}
#main h2 a {text-decoration:none; color:#444;}
#main h2 a:hover {color:#680;}
#main .article.inside h1 { text-transform:uppercase;…}
#comments .comment .meta .authorname { text-transfo… }
#comments .comment .meta .commentnumber a { float: … }

7. Wait what?
#comments .comment .meta .authorname { }
#comments .comment .meta .commentnumber a { }

8. Wait what?
#comments .comment .meta .authorname { }
#comments .comment .meta .commentnumber a { }

17. Patterns

25. Identify and
Document Patterns

27. <div>

28. <div>

29. ? { }

30. Categorization

31. Categorization
Base
Layout
Module
State
Theme

33. Sidebar Content
Header

34. <div class="layout-header">

35. Customized List
Button
Tabs

36. <ul class="tabs">

37. Large
Search
Dark
Small

38. <button class="button
button-dark">

40. <div class=“modal”>
<div class=“modal--header”></div>
<div class=“modal--body”></div>
<div class=“modal--footer”></div>
</div>

41. Naming Convention
❖ .btn
❖ .btn-variation
❖ .btn--component
❖ .btn
❖ .btn--variation
❖ .btn__component

43. .modal > .btn

44. .modal > .btn

45. .btn-slim

46. All the things
// Modules
// ---------------------------------------
@import "btn";
@import "img";
@import "layout";
@import "nav";
@import "tables";
@import "forms";
@import "section";
@import "fluid_container";
@import "table_filter";
@import "modal";
@import "dropdown";
@import "flags";
@import "progress";
@import "arrows";
@import "box";

47. All the things
btn.mu
img.mu
layout.mu
nav.mu
table.mu
forms.mu
section.mu
fluid_container.mu
table_filter.mu
modal.mu
dropdown.mu
flags.mu
progress.mu
arrows.mu
box.mu

48. All the things
<!-- btn.mu -->
<button class="btn">{{button}}</button>

49. Components
JSON
CSSTemplate
HTML
JavaScriptl11n

50. React Components
React.render(
<Video onError={ onError } videoId={ videoId } />
);

51. React Components
<div class='vimeo'>
<div class='vimeo-loading'>
<svg>...</svg>
</div>
<div class='vimeo-image'>
<button type='button' class='vimeo-play-button'>
<svg>...</svg>
</button>
</div>
<div class='video-embed'>
<iframe>...</iframe>
</div>
</div>

52. Web Components
<gold-cc-cvc-input card-type="amex">
</gold-cc-cvc-input>

53. Web Components
<style>
:host { display: block; }
iron-icon { margin-left: 10px; }
</style>
<template>
<paper-input-container id="container"
disabled$="[[disabled]]"
no-label-float="[[noLabelFloat]]"
always-float-
label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]"
invalid="[[invalid]]">
<label hidden$=“[[!label]]">[[label]]</label>
</template>

54. “I’m so alone.”

55. Give a hoot.

56. * + *

57. Give a hoot.
Don’t pollute
…the global namespace.

58. .btn + .btn
.card + .card
.input + .input

59. .input + .btn ?

60. Helpers

61. .layout-spacer {}
.m5 / .m10 / .mi6

62. Media queries killed the
modular star

64. If Module A in Module B in
Layout C Then I’m fucked.

65. If I have this much room,
do this.

66. Element Queries

67. Element Queries

68. “Element Query” declarations in
JavaScript or in HTML, not in CSS

70. ❖ I honestly didn't think you could even USE emoji in variable
names. Or that there were so many different crying ones.

71. <div class="😭">help me</div>
.😭 { color: red; font-size: 100px; }

72. Create Standards
For Your CSS

73. Code Review Your CSS

74. Styleguides.io

75. Patternlab.io

76. Shopify Style Guide

78. Patterns
❖ Create a conversation around what exceptions should or
should not exist
❖ Create a conversation around what components should or
should not exist

79. The Future is in Pieces
❖ Move towards composable UIs
❖ Ensure your modules are self-contained
❖ Frameworks like React are making this easier
❖ Communicate!