Front-end Pattern Libraries

  • 1,421 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,421
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
6
Comments
0
Likes
2

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