Pattern Kit

Pattern Kit is an application that lets you preview your library of templates and manipulate their content by interacting with a form built from the schemas. It is both a development tool and a public facing pattern library.

For a demo check out Pattern Kit Demo.

Installation

Note, by following these instructions you do not need to clone this git repository.

Create composer.json at pattern library root and require pattern kit

"require": {
 "pattern-builder/pattern-kit": "@dev"
},
"repositories": [
 {
 "type": "vcs",
 "url": "https://github.com/PatternBuilder/pattern-kit"
 }
]

Add index.php at pattern library root

<?php
require_once __DIR__ . '/vendor/autoload.php';
require __DIR__ . '/vendor/pattern-builder/pattern-kit/src/app.php';
$app['http_cache']->run();

Add .pk-config.yml at pattern library root

• Create arrays of paths to your data, schema, template, docs and styleguide files (relative to config)
• Set the file extensions for each file type
• List categories in order you'd like them to appear in navigation
• Create arrays of assets for css, js and footer js (including live reload if necessary)

title: Project Title
paths: # relative to your pattern library root
 data:
 - path/to/sample/data
 schemas:
 - path/to/schemas
 templates:
 - path/to/templates
 docs:
 - path/to/schemas-docs
 sg:
 - path/to/stylelguide/docs
extensions:
 data: .docs.json
 schemas: .json
 templates: .twig
 docs: .docs.md
 sg: .sg.md
categories:
 - Pattern
 - Sub Pattern
 - Layout
 - Component
 - Atom
assets:
 css:
 - path/to/css
 - path/to/othercss
 js:
 - path/to/js
 - path/to/otherjs
 footer_js:
 - path/to/footer_js
 - path/to/otherfooter_js
 - //localhost:1336/livereload.js

In your terminal,

$ cd [pattern library root]
$ composer install

Use Pattern Kit

Point MAMP or local PHP server at your index.php file

php -S 0:9001 -t ./