design pattern craftsmanship
DESCRIPTION
Slides from my presentation at Front-End Design Conference, 2014TRANSCRIPT
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