Design Pattern Craftsmanship

DESIGNPATTERNCRAFTSMANSHIPJason Beaird - @jasongraphix - July 12th, 2014

Image CC by Nic McPhee - https://flic.kr/p/4U4h9Q

1620-1830Post & Beam Framing

1830-1930Balloon Framing

1930-NowPlatform Framing

1620-1830Post & Beam Framing

1830-1930Balloon Framing

1930-NowPlatform Framing“The traditional building paradigm is to

gather all the parts of a building on site and then assemble them piece by piece.”

– Refabricating Architecture

https://flic.kr/p/9v2Pgx

Master Craftsman

Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74

http://maban.co.uk/projects/front-end-style-guides/

DIFFERENT STROKES...•Traditional Style Guide

•Editorial Guidelines

•Boilerplate or Bootstrap

•Pattern Library

•Page Templates or Theme

http://blog.mailchimp.com/new-mailchimp-is-here/

http://ux.mailchimp.com

A DESIGN PATTERN LIBRARY?•Specific to a Project or Application

•LEGO-Like Sets of Markup & Style

•For Elements Used 3 or More Times

•Should Be Adaptable & Extendable

•Serves as a Testbed & Style Guide

CSS ARCHITECTURE

// Coremcvariablesmcmixinsdijit/.../variablesresetextend

// Globalresettypographygridfreddiconsforms

// Componentsmedia-listfeedbackformsmiscspritestablessubscriber-tablehover-listdotted-liststat-blockbuttonswidgets

// Pagesloginaccountmain-searchautoresponderslistscampaignsdashboard-styleschatterwizardreportsneapolitanfile-manager

// Shared Itemsnavlocalnavheader

// SighIE

@media print { print}

theone.less

http://theuxnewsletter.com

http://pea.rs

“A good craftsperson builds their own tools.” - Dan Cedarholm

http://getbootstrap.com, http://patternlab.io, https://developers.google.com/web/starter-kit

Illustration Source: Carpentry for Boys by J. S. Zerbe, 3/72007 - gutenberg.org/ebooks/20763

Love+Patterns+ToolsJason Beaird@jasongraphix