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

2.
Wired Redesign (2002)

3.
Simple Blog Designs

4.
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: … }

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

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

7.
Patterns

8.
Identify and
Document Patterns

9.
<div>

10.
<div>

11.
? { }

12.
Categorization

13.
Categorization
Base
Layout
Module
State
Theme

14.
Sidebar Content
Header

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

16.
Customized List
Button
Tabs

17.
<ul class="tabs">

18.
Large
Search
Dark
Small

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

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

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

22.
.modal > .btn

23.
.modal > .btn

24.
.btn-slim

25.
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";

26.
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

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

28.
Components
JSON
CSSTemplate
HTML
JavaScriptl11n

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

30.
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>

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

32.
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>

33.
“I’m so alone.”

34.
Give a hoot.

35.
* + *

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

37.
.btn + .btn
.card + .card
.input + .input

38.
.input + .btn ?

39.
Helpers

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

41.
Media queries killed the
modular star

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

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

44.
Element Queries

45.
Element Queries

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

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

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

49.
Create Standards
For Your CSS

50.
Code Review Your CSS

51.
Styleguides.io

52.
Patternlab.io

53.
Shopify Style Guide

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

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