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

Like this? Share it with your network

Share

Front-end Pattern Libraries

  • 1,605 views
Uploaded 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).

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,605
On Slideshare
1,596
From Embeds
9
Number of Embeds
2

Actions

Shares
Downloads
6
Comments
0
Likes
1

Embeds 9

http://www.linkedin.com 5
http://www.slideee.com 4

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