Front-end Pattern Libraries

2,030
-1

Published on

Presentation given to IXDA Singapore on 27 Feb 2014.
The presentation describes front-end pattern libraries and introduces Tapestry, a front-end pattern library manager (or app).

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,030
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Front-end Pattern Libraries

  1. 1. presents Front-end pattern libraries Vinay Malankad & Maish Nichani www.pebbleroad.com
  2. 2. We are PebbleRoad • Singapore-based Enterprise UX consultancy • Innovating since 2004 • Team of specialists • Culture of innovation and design leadership
  3. 3. Pattern libraries Tapestry What it is Why do we need one What it is How to use What is the tech How to install
  4. 4. FE Pattern library = content + interaction + visual + code
  5. 5. Title Code Usage notes Presentation http://patterns.alistapart.com/
  6. 6. https://ux.mailchimp.com/patterns
  7. 7. Why UXUXFE + CMS give prototype + psd can’t recognise work give html templates new templates fail give modular code can’t screw up
  8. 8. When maintenance UX CMS UX UX
  9. 9. Benefits Production-quality Modular Reusable Extendable Smart!
  10. 10. Tapestry Interface Core CSS + JavaScript
  11. 11. Customise it! Interface Customise Customise Core CSS + JavaScript
  12. 12. Tapestry demo http://demos.pebbleroad.com/tapestry/src/ intro patterns + pattern - pattern _tech installation
  13. 13. pages Patterns feedback + content templates feedback components tabs elements table
  14. 14. Interface JSON Patterns
  15. 15. 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
  16. 16. Next steps Unit testing of the app Share a pattern Pattern version history
  17. 17. http://www.fivesimplesteps.com/products/front-end-style-guides
  18. 18. A free service that saves you time in sharing hard-to-spell or hard-to-understand info with customer service reps. ! www.copymyinfo.com
  19. 19. www.pebbleroad.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×