Your SlideShare is downloading. ×
Front-end Pattern Libraries
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Front-end Pattern Libraries

1,626

Published on

Presentation given to IXDA Singapore on 27 Feb 2014. …

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
1,626
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. presents Front-end pattern libraries Vinay Malankad & Maish Nichani www.pebbleroad.com
  • 2. We are PebbleRoad • Singapore-based Enterprise UX consultancy • Innovating since 2004 • Team of specialists • Culture of innovation and design leadership
  • 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. FE Pattern library = content + interaction + visual + code
  • 5. Title Code Usage notes Presentation http://patterns.alistapart.com/
  • 6. https://ux.mailchimp.com/patterns
  • 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. When maintenance UX CMS UX UX
  • 9. Benefits Production-quality Modular Reusable Extendable Smart!
  • 10. Tapestry Interface Core CSS + JavaScript
  • 11. Customise it! Interface Customise Customise Core CSS + JavaScript
  • 12. Tapestry demo http://demos.pebbleroad.com/tapestry/src/ intro patterns + pattern - pattern _tech installation
  • 13. pages Patterns feedback + content templates feedback components tabs elements table
  • 14. Interface JSON Patterns
  • 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. Next steps Unit testing of the app Share a pattern Pattern version history
  • 17. http://www.fivesimplesteps.com/products/front-end-style-guides
  • 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. www.pebbleroad.com

×