Design Pattern Craftsmanship
•15 likes•3,595 views
Report
Share
Download to read offline
Slides from a presentation I gave at Front-End Design Conference and ForgeConf in 2014. My first Design Pattern Craftsmanship talk in 2012 was presented at Etsy's Code as Craft series and I talked about MailChimp's original UI Pattern Library. Since then, we've redesigned and rebuilt our pattern library, so V2 of the talk covers the history, challenges, and benefits of our exploration of front-end patterns.
More Related Content
Viewers also liked
Viewers also liked(17)
Similar to Design Pattern Craftsmanship
Similar to Design Pattern Craftsmanship(20)
More from Jason Beaird
More from Jason Beaird(8)
Recently uploaded
Recently uploaded(20)
Design Pattern Craftsmanship
- 1. DESIGN PATTERN CRAFTSMANSHIP Jason Beaird - Forge Conference - Sept 26th, 2014
- 10. 1620-1830 Post & Beam Framing 1830-1930 Balloon Framing 1930-Now Platform Framing
- 12. 1991-2003 The Wild Wild Web 2003-2012 Web Standards 2012-Now Responsive Design
- 13. 1991-2003 The Wild Wild Web 2003-2012 Web Standards 2012-Now “The traditional building paradRiegspmons iivse D etsoign gather all the parts of a building on site and then assemble them piece by piece.” – Refabricating Architecture
- 22. Master Craftsman We realized that by focusing on creating systems, instead of always starting from scratch, we have more time to focus on important details. Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74
- 25. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
- 30. 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
- 35. 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! file-manager! ! ! // Shared Items! nav! localnav! header! ! // Sigh! IE! ! @media print {! print! } theone.less
- 39. “We’re not designing pages. We’re designing systems of components.” - Stephen Hay Illustration Source: André Jacob Roubo, L'Art du Menuisier Paris, 1769-74
- 43. getbootstrap.com, foundation.zurb.com, patternlab.io, developers.google.com/web/starter-kit
- 44. “A good craftsperson builds their own tools.” - Dan Cedarholm http://pea.rs
- 45. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
- 47. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
- 49. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
- 50. http://html5boilerplate.com Hello world! This is HTML5 Boilerplate.
- 51. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
- 53. DIFFERENT STROKES... •Traditional Style Guide •Editorial Guidelines •Boilerplate or Bootstrap •Pattern Library •Page Templates or Theme
- 56. Illustration Source: Carpentry for Boys by J. S. Zerbe, 3/72007 - gutenberg.org/ebooks/20763 Love˝ +˝ Patterns˝ +˝ Tools˝ Jason Beaird @jasongraphix