Front-end Pattern Libraries
-
Upload
pebbleroad -
Category
Technology
-
view
113 -
download
1
description
Transcript of Front-end Pattern Libraries
![Page 1: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/1.jpg)
Front-end pattern libraries
Vinay Malankad & Maish Nichani
presents
www.pebbleroad.com
![Page 2: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/2.jpg)
We are PebbleRoad
• Singapore-based Enterprise UX consultancy
• Innovating since 2004
• Team of specialists
• Culture of innovation and design leadership
![Page 3: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/3.jpg)
Pattern libraries What it is Why do we need one
TapestryWhat it is How to use What is the tech How to install
![Page 4: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/4.jpg)
FE Pattern library =
content +
interaction +
visual +
code
![Page 7: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/7.jpg)
UX + FE CMS
give prototype + psd can’t recognise work
give html templates new templates fail
give modular code can’t screw up
Why
UX
![Page 8: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/8.jpg)
When
maintenance
UX
CMSUX UX
![Page 9: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/9.jpg)
Benefits
Production-quality Modular Reusable
Extendable
Smart!
![Page 10: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/10.jpg)
Core CSS + JavaScript
Interface
Tapestry
![Page 11: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/11.jpg)
Core CSS + JavaScript
Interface
Customise it!
Customise
Customise
![Page 12: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/12.jpg)
intro patterns + pattern - pattern
_tech installation
Tapestry demo
http://demos.pebbleroad.com/tapestry/src/
![Page 13: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/13.jpg)
Patterns
elements
components
templates
pages
table
tabs
feedback
feedback + content
![Page 14: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/14.jpg)
Patterns
JSON
Interface
![Page 15: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/15.jpg)
![Page 16: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/16.jpg)
![Page 17: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/17.jpg)
![Page 18: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/18.jpg)
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
Installation
![Page 19: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/19.jpg)
Unit testing of the app Share a pattern Pattern version history
Next steps
![Page 20: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/20.jpg)
http://www.fivesimplesteps.com/products/front-end-style-guides
![Page 21: Front-end Pattern Libraries](https://reader034.fdocuments.net/reader034/viewer/2022051400/54c717ab4a795928408b4753/html5/thumbnails/21.jpg)
A free service that saves you time in sharing hard-to-spell or hard-to-understand info with
customer service reps. !
www.copymyinfo.com