Published on February 28, 2014
presents Front-end pattern libraries Vinay Malankad & Maish Nichani www.pebbleroad.com
We are PebbleRoad • Singapore-based Enterprise UX consultancy • Innovating since 2004 • Team of specialists • Culture of innovation and design leadership
Pattern libraries Tapestry What it is Why do we need one What it is How to use What is the tech How to install
FE Pattern library = content + interaction + visual + code
Title Code Usage notes Presentation http://patterns.alistapart.com/
Why UXUXFE + CMS give prototype + psd can’t recognise work give html templates new templates fail give modular code can’t screw up
When maintenance UX CMS UX UX
Benefits Production-quality Modular Reusable Extendable Smart!
Tapestry demo http://demos.pebbleroad.com/tapestry/src/ intro patterns + pattern - pattern _tech installation
pages Patterns feedback + content templates feedback components tabs elements table
Interface JSON Patterns
Installation Dependency -‐ Gulp (NodeJS) ! $ git clone https://github.com/PebbleRoad/tapestry.git ! $ cd tapestry ! $ npm install && bower install ! $ gulp patterns ! # Open http://localhost:8000 in your browser
Next steps Unit testing of the app Share a pattern Pattern version history
A free service that saves you time in sharing hard-to-spell or hard-to-understand info with customer service reps. ! www.copymyinfo.com
Thank you for taking the time to write to us. We appreciate your feedback and support. @GimmeBarHelp
Resources. A round-up of information about pattern libraries, style guides, atomic design, Pattern Lab, and more. Styles Guides & Pattern Libraries
Front-end pattern libraries are hot news in the UX community these days. Anna Debenham wrote a book on it and A List Apart just open-sourced its pattern ...
pattern-library-directory - A directory of public front-end pattern libraries and living style guides
Patternry makes it simple to build styleguides, design pattern libraries, complete front-end resources or anything in between.
A collaborative collection of resources for creating Front-End Style Guides and Pattern Libraries
The way we build applications and websites has shifted from building pages to building design systems. During this session we will review an enterprise ...
About this workshop. Pattern libraries are a great way to manage front-end code, but they don’t just appear out of nowhere. It can be very challenging to ...
Front-end and UI style ... Specifically not grouping in pattern libraries ... Anna Debenham has an excellent round-up of what makes up a front-end style ...