Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Front-end Pattern Libraries

2.911 Aufrufe

Veröffentlicht am

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).

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×