Introducing PatternPack

Easily build an interface, document the patterns, and share the code.

“We have a few apps, but none of them are styled consistently.”

Say Hello to PatternPack

Getting Started

npm install patternpack --save-dev
module.exports = function(grunt) {
grunt.initConfig({
patternpack: {
options: {
assets: ‘./src/assets’
},
run: {},
build: {},
release: {}
}
});
grunt.loadNpmTasks('patternpack');
}

Adding a Pattern

---
title: Your Pattern's Name
---
A description for your pattern
### Example
<div class=”library__example”>
A rendered example of your pattern
</div>
### Code
```html
The code snippet for the pattern
```
grunt patternpack:run
PatternPack doesn’t provide much styling by default. This is intentional.

Releasing Your Code

grunt patternpack:build
grunt patternpack:release
git push origin master --follow-tags
grunt patternpack:release-patch  // Bumps the patch version (i.e., 1.0.x)
grunt patternpack:release-minor // Bumps the minor version (i.e., 1.x.0)
grunt patternpack:release-major // Bumps the major version (i.e., x.0.0)

Importing your Library

{
"my-pattern-library": "http://bitbucket.org/user/my-pattern-library.git#1.0.0"
}
<link href="/node_modules/patternpack-example-library/dist/pattern-library/assets/css/patterns.css">

PatternPack and the Evolving Design Process

Experience Strategy + Design at Slalom

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store