Building UIs

Building fast, maintainable and scalable user interfaces on the web

HTML

HTML gives content structure and meaning (headings, paragraphs, images, etc.)

CSS

CSS defines the presentation (typography, colors, layout, etc.)

<h1 class=“title”>I’m a title</h1>

<div class=“box”>I’m a box</div>

<img src=“image.jpg”>

.title { font-size: 32px; color: black;}

.box { border-radius: 5px;}

img { border: 1px solid red;}

www.affirm.com

Building fast, maintainable and scalable user interfaces on the web

1. Modules

Break down the user interface into isolated, reusable modules (buttons, tooltips, etc.)

basefontslayoutmodulesutilities

badge.scssbuttons.scsscard.scsscontrol.scssdate-picker.scssfab.scssforms.scssicons.scssmodal.scsspopover.scssprogress.scsstooltip.scss

imagesscriptsstyles

2. Naming

Specific, functional and consistent class names are a must for scalable UIs

Pick explicit and clear class names, butdon’t be overly specific

<header class=“site-header”></header><div class=“table-view”></div><div class=“bank-card”></div>

Specific

Choose class names that describe an element’s functionality, not its presentation

Functional

<button class=“btn-green”>…</button>

Don’t do this

<button class=“btn-primary”>…</button>

.btn-primary { background-color: green;}

Do this instead

Adopt a single naming convention and stick to it

Consistent

<header class=“site-header”></header><main class=“siteContent”></main><footer class=“site_footer”></footer>

Don’t do this

<header class=“site-header”></header><main class=“site-content”></main><footer class=“site-footer”></footer>

Do this instead

MAKE PAYMENT

Upcoming Payment Due on May 10, 2015

$238.71/mo

Touch of Modern

header

content

footer

<div class=“card”> <header class=“header”></header> <main class=“content”></main> <footer class=“footer”></footer></div>

Don’t do this

<div class=“card”> <header class=“card__header”></header> <main class=“card__content”></main> <footer class=“card__footer”></footer></div>

Do this instead

<div class=“card card--loan”> <header class=“card__header”> <img class=“card__avatar” src=“avatar.jpg”> <h3 class=“card__title”>Touch of Modern</h3> <div class=“card__actions”> <span class=“icon”>…</span> </div> </header> <main class=“card__content”> <div class=“progress-bar”> <div class=“progress-bar__fill”></div> </div> </main> <footer class=“card__footer”> <a href=“#” class=“card__footer__link”>Link</a> </footer></div>

3. Performance

Perceived performance is more important than actual performance

SVG

Vector graphics that scale infinitely, without losing clarity

1.5kb 0.8kb

FastClick

Eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers

Normal behavior w/ FastClick

Why invest resources into this?

Speed

Developing new features and products will be much faster

Consistency

Ensure that future products remain consistent (design, naming conventions, patterns, etc.)

Scalability

Establish a solid foundation for designing and developing new products

Questions?