front-end pattern libraries

Front-end pattern libraries

Vinay Malankad & Maish Nichani

presents

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 What it is Why do we need one

TapestryWhat it is How to use What is the tech How to install

FE Pattern library =

content +

interaction +

visual +

code

Presentation

Code Usage notesTitle

http://patterns.alistapart.com/

https://ux.mailchimp.com/patterns

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

When

maintenance

UX

CMSUX UX

Benefits

Production-quality Modular Reusable

Extendable

Smart!

Core CSS + JavaScript

Interface

Tapestry

Core CSS + JavaScript

Interface

Customise it!

Customise

Customise

intro patterns + pattern - pattern

_tech installation

Tapestry demo

http://demos.pebbleroad.com/tapestry/src/

Patterns

elements

components

templates

pages

table

tabs

feedback

feedback + content

Patterns

JSON

Interface

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

Unit testing of the app Share a pattern Pattern version history

Next steps

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