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

Front-end Pattern Libraries

on

  • 1,318 views

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

Statistics

Views

Total Views
1,318
Views on SlideShare
1,310
Embed Views
8

Actions

Likes
1
Downloads
6
Comments
0

2 Embeds 8

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Front-end Pattern Libraries Front-end Pattern Libraries Presentation Transcript

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