Download - Design Pattern Craftsmanship

Transcript
Page 1: Design Pattern Craftsmanship

DESIGNPATTERNCRAFTSMANSHIPJason Beaird - @jasongraphix - July 12th, 2014

Page 2: Design Pattern Craftsmanship
Page 3: Design Pattern Craftsmanship
Page 4: Design Pattern Craftsmanship
Page 5: Design Pattern Craftsmanship
Page 6: Design Pattern Craftsmanship
Page 8: Design Pattern Craftsmanship
Page 9: Design Pattern Craftsmanship

1620-1830Post & Beam Framing

1830-1930Balloon Framing

1930-NowPlatform Framing

Page 10: Design Pattern Craftsmanship
Page 11: Design Pattern Craftsmanship

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

Page 12: Design Pattern Craftsmanship
Page 13: Design Pattern Craftsmanship
Page 14: Design Pattern Craftsmanship
Page 15: Design Pattern Craftsmanship
Page 16: Design Pattern Craftsmanship
Page 18: Design Pattern Craftsmanship

Master Craftsman

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

Page 20: Design Pattern Craftsmanship
Page 21: Design Pattern Craftsmanship

DIFFERENT STROKES...•Traditional Style Guide

•Editorial Guidelines

•Boilerplate or Bootstrap

•Pattern Library

•Page Templates or Theme

Page 23: Design Pattern Craftsmanship
Page 24: Design Pattern Craftsmanship
Page 26: Design Pattern Craftsmanship

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

Page 27: Design Pattern Craftsmanship
Page 28: Design Pattern Craftsmanship
Page 29: Design Pattern Craftsmanship
Page 30: Design Pattern Craftsmanship
Page 31: Design Pattern Craftsmanship

CSS ARCHITECTURE

// Coremcvariablesmcmixinsdijit/.../variablesresetextend

// Globalresettypographygridfreddiconsforms

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

// Pagesloginaccountmain-searchautoresponderslistscampaignsdashboard-styleschatterwizardreportsneapolitanfile-manager

// Shared Itemsnavlocalnavheader

// SighIE

@media print { print}

theone.less

Page 33: Design Pattern Craftsmanship

http://pea.rs

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

Page 35: Design Pattern Craftsmanship
Page 36: Design Pattern Craftsmanship

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

Love+Patterns+ToolsJason Beaird@jasongraphix