0
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

•

Cultu...
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...
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...
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.c...
www.pebbleroad.com
Front-end Pattern Libraries
Front-end Pattern Libraries
Front-end Pattern Libraries
Upcoming SlideShare
Loading in...5
×

Front-end Pattern Libraries

1,796

Published on

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

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×