Web Unleashed — September 16, 2015

The Future is in pieces

Wired Redesign (2002)

Simple Blog Designs

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

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

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

Patterns

Identify and Document Patterns

<div>

<div>

? { }

Categorization

Categorization

Base

Layout

ModuleState

Theme

Sidebar Content

Header

<div class="layout-header">

Customized List

Button

Tabs

<ul class="tabs">

Large

Search

Dark

Small

<button class="button button-dark">

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

Naming Convention

❖ .btn❖ .btn-variation❖ .btn--component

❖ .btn❖ .btn--variation❖ .btn__component

.modal > .btn

.modal > .btn

.btn-slim

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

All the thingsbtn.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

All the things<!-- btn.mu -->

<button class="btn">{{button}}</button>

Components

JSON

CSSTemplate

HTML

JavaScriptl11n

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

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>

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

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>

“I’m so alone.”

Give a hoot.

* + *

Give a hoot.Don’t pollute

…the global namespace.

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

.input + .btn ?

Helpers

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

Media queries killed the modular star

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

If I have this much room, do this.

Element Queries

Element Queries

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

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

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

Create Standards For Your CSS

Code Review Your CSS

Styleguides.io

Patternlab.io

Shopify Style Guide

Patterns

❖ Create a conversation around what exceptions should or should not exist

❖ Create a conversation around what components should or should not exist

The Future is in Pieces

❖ Move towards composable UIs

❖ Ensure your modules are self-contained

❖ Frameworks like React are making this easier

❖ Communicate!