Develop pattern libraries with polymer

This version has been deprecated. Please use PaDL at https://www.npmjs.com/package/padl
Last updated 2 years ago by jholt1 .
MIT · Original npm · Tarball · package.json
$ cnpm install polymer-pattern 
SYNC missed versions from official npm registry.



npm i -g polymer-pattern


This is a project that allows you to easily create pattern libraries, with pure webcomponents using polymer (or lit). It bundles all of your components together with the needed polyfills so that you only need one js file (dist/components.min.js).

Example structure

If we create a hello-world pattern library with a primary-button web component:

├─┬ hello-world
  ├─┬ src
  | └─┬ primary-button
  |   ├── component.js
  |   ├── story.js
  |   └── styles.less
  ├─┬ test
  | ├─┬ primary-button
  | | ├── primary-button_test.js
  | | └── primary-button_test.html
  | └── index.html
  └─┬ dist
    └─ components.min.js

To create this example:

 npm i -g polymer-pattern
 pattern new hello-world
 cd hello-world && npm i
 pattern g primary-button
 pattern build

How to

Create a new pattern library

  pattern new [name]


  • type: polymer, lit (default: polymer)
 pattern new [name] --type lit

After creating a new pattern you can:

 cd [name] && npm i

Create a new component

Inside your pattern repo

 pattern g [component-name]

This will create a polymer or lit component (based on your .pattern type). It will also generate the story.js, styles.less and the test files.

Delete a component

Inside your pattern repo

 pattern d [component-name]

Build your library

Inside your pattern repo

 pattern build

In your dist folder will find the components.min.js

Serve a component

Inside your pattern repo

 pattern serve

This will generate a storybook of all your component stories at localhost:9001

Test your components

Inside your pattern repo

 pattern test

Create sketch files of components

Inside your pattern repo

 pattern sketch

This will output a stories.asketch.json file. You will need to install this sketch plugin asketch2sketch.sketchplugin


This uses a variety of other resources:

  • Polymer
  • Lit Element
  • Storybook
  • Story2sketch
  • Html-sketchapp

Current Tags

  • 0.0.3                                ...           latest (2 years ago)

3 Versions

  • 0.0.3 [deprecated]           ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 6
Dependencies (16)
Dev Dependencies (1)
  • ava 1.0.0-beta.6
Dependents (0)

Copyright 2014 - 2016 © taobao.org |