Front-end Pattern Libraries

50 %
50 %
Information about Front-end Pattern Libraries
Technology

Published on February 28, 2014

Author: maish

Source: slideshare.net

Description

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

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

Add a comment

Related presentations

Related pages

Gimme Bar : Front end styleguides and pattern libraries

Thank you for taking the time to write to us. We appreciate your feedback and support. @GimmeBarHelp
Read more

Resources about Pattern Lab, Atomic Design, Pattern ...

Resources. A round-up of information about pattern libraries, style guides, atomic design, Pattern Lab, and more. Styles Guides & Pattern Libraries
Read more

Front-end pattern libraries - Home - PebbleRoad

Front-end pattern libraries are hot news in the UX community these days. Anna Debenham wrote a book on it and A List Apart just open-sourced its pattern ...
Read more

GitHub - mikewheaton/pattern-library-directory: A ...

pattern-library-directory - A directory of public front-end pattern libraries and living style guides
Read more

Start Building Consistent Web Interfaces | Patternry

Patternry makes it simple to build styleguides, design pattern libraries, complete front-end resources or anything in between.
Read more

Website Style Guide Resources

A collaborative collection of resources for creating Front-End Style Guides and Pattern Libraries
Read more

Modular Front-End Architectures with Pattern Libraries ...

The way we build applications and websites has shifted from building pages to building design systems. During this session we will review an enterprise ...
Read more

Create a front-end pattern library | Clearleft

About this workshop. Pattern libraries are a great way to manage front-end code, but they don’t just appear out of nowhere. It can be very challenging to ...
Read more

Front-end and UI style guides - Sideproject

Front-end and UI style ... Specifically not grouping in pattern libraries ... Anna Debenham has an excellent round-up of what makes up a front-end style ...
Read more