DESIGN PATTERN CRAFTSMANSHIPJason Beaird - @jasongraphix - July 12th, 2014

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

1620-1830 Post & Beam Framing 1830-1930 Balloon Framing 1930-Now Platform Framing

1620-1830 Post & Beam Framing 1830-1930 Balloon Framing 1930-Now Platform 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 // Core mcvariables mcmixins dijit/.../variables reset extend // Global reset typography grid freddicons forms // Components media-list feedback forms misc sprites tables subscriber-table hover-list dotted-list stat-block buttons widgets // Pages login account main-search autoresponders lists campaigns dashboard-styles chatter wizard reports neapolitan le-manager // Shared Items nav localnav header // Sigh IE @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 + Tools Jason Beaird @jasongraphix