fixed some styling, update docs, clean up config file

/* atoms */

//@import 'components/atoms/...';

@import 'components/atoms/codeblock';

/* molecules */

//@import 'components/molecules/...';

pre code {

	&:empty {

	    display: none;

	}

	pre code {

		border : 0 none;

		padding: 0;

	}

}

 No newline at end of file

## About

**Patternlibrary** (a.k.a. _node-patternlibrary_) is a simple flat file documentaion generator for use with Node, Gulp or Grunt. 

**Patternlibrary** (a.k.a. _node-patternlibrary_) is a static site and pattern documentaion generator for use with Node, Gulp or Grunt. 

It compiles a series of HTML **patterns** (a.k.a. _partials_) structured in an **atomic desing pattern**. These patterns can also include other HTML **patterns**/**partials**, external Handlebars **helpers**, or external **data** as JSON or YAML. 

Documentation pages for each pattern are created according to the specific pattern meta-data supplied. Those pages are combined under a GUI to view in your browser.

The main template engine behind this is *handlebars* ([-> homepage](http://handlebarsjs.com)) which itself is extended by *Zurb Foundation*'s *Panini* ([-> GitHub](https://github.com/zurb/panini)). The style and script source files are parsed by *Zurb Foundation*'s *Supercollider* ([-> GitHub](https://github.com/zurb/supercollider)) utilizing *SassDoc* ([-> homepage](http://sassdoc.com/)) and *JSDoc* ([-> homepage](http://usejsdoc.org)).

The template engine used is *handlebars* ([-> homepage](http://handlebarsjs.com)) which itself is extended by *Zurb Foundation*'s *Panini* ([-> GitHub](https://github.com/zurb/panini)). The style and script source files are parsed by *Zurb Foundation*'s *Supercollider* ([-> GitHub](https://github.com/zurb/supercollider)) utilizing *SassDoc* ([-> homepage](http://sassdoc.com/)) and *JSDoc* ([-> homepage](http://usejsdoc.org)).

## Documentation

# (Node-)**Patternlibrary**

[![npm version](https://badge.fury.io/js/node-patternlibrary.svg)](https://badge.fury.io/js/node-patternlibrary)

[![npm version](https://badge.fury.io/js/node-patternlibrary.svg)](https://badge.fury.io/js/node-patternlibrary "npm version")

[![dependencies status](https://david-dm.org/bb-drummer/node-patternlibrary.svg)](https://david-dm.org/bb-drummer/node-patternlibrary "dependencies status")

[![Scrutinizer-CI code quality score](https://scrutinizer-ci.com/g/bb-drummer/node-patternlibrary/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/bb-drummer/node-patternlibrary/?branch=master "Scrutinizer-CI code quality score")

[![Scrutinizer-CI build status](https://scrutinizer-ci.com/g/bb-drummer/node-patternlibrary/badges/build.png?b=master)](https://scrutinizer-ci.com/g/bb-drummer/node-patternlibrary/build-status/master "Scrutinizer-CI build status")

[![Travis-CI build status](https://travis-ci.org/bb-drummer/node-patternlibrary.svg?branch=master)](https://travis-ci.org/bb-drummer/node-patternlibrary "Travis-CI build status")

[![dependencies status](https://david-dm.org/bb-drummer/node-patternlibrary.svg)](https://david-dm.org/bb-drummer/node-patternlibrary)

[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/bb-drummer/node-patternlibrary/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/bb-drummer/node-patternlibrary/?branch=master)

[![Build Status](https://scrutinizer-ci.com/g/bb-drummer/node-patternlibrary/badges/build.png?b=master)](https://scrutinizer-ci.com/g/bb-drummer/node-patternlibrary/build-status/master)

[![Build Status](https://travis-ci.org/bb-drummer/node-patternlibrary.svg?branch=master)](https://travis-ci.org/bb-drummer/node-patternlibrary)

---

Table of content:

## About

[[TOC]]

---

**Patternlibrary** (a.k.a. _node-patternlibrary_) is a simple flat file documentaion generator for use with Node, Gulp or Grunt. 

### Work-In-Progress disclaimer

It compiles a series of HTML **patterns** (a.k.a. _partials_) structured in an **atomic desing pattern**. These patterns can also include other HTML **patterns**/**partials**, external Handlebars **helpers**, or external **data** as JSON or YAML. 

This project is now still a work in progress!

Some of its features and options are or may be a subject to change!

Documentation pages for each pattern are created according to the specific pattern meta-data supplied. Those pages are combined under a GUI to view in your browser.

DO NOT USE IN PRODUCTION ENVIRONMENTS !

The main template engine behind this is *handlebars* ([-> homepage](http://handlebarsjs.com)) which itself is extended by *Zurb Foundation*'s *Panini* ([-> GitHub](https://github.com/zurb/panini)). The style and script source files are parsed by *Zurb Foundation*'s *Supercollider* ([-> GitHub](https://github.com/zurb/supercollider)) utilizing *SassDoc* ([-> homepage](http://sassdoc.com/)) and *JSDoc* ([-> homepage](http://usejsdoc.org)).

When using this software, absolutely no warranties of any sort are granted. Please see the license file for more information.

---

## About

**Patternlibrary** (a.k.a. _node-patternlibrary_) is a simple flat file documentaion generator for use with Node, Gulp or Grunt. 

It compiles a series of HTML **patterns** (a.k.a. _partials_) structured in an **atomic desing pattern**. These patterns can also include other HTML **patterns**/**partials**, external Handlebars **helpers**, or external **data** as JSON or YAML. 

[[TOC]]

Documentation pages for each pattern are created according to the specific pattern meta-data supplied. Those pages are combined under a GUI to view in your browser.

The main template engine behind this is *handlebars* ([-> homepage](http://handlebarsjs.com)) which itself is extended by *Zurb Foundation*'s *Panini* ([-> GitHub](https://github.com/zurb/panini)). The style and script source files are parsed by *Zurb Foundation*'s *Supercollider* ([-> GitHub](https://github.com/zurb/supercollider)) utilizing *SassDoc* ([-> homepage](http://sassdoc.com/)) and *JSDoc* ([-> homepage](http://usejsdoc.org)).

---

## Documentation

## Installation

For now, just add 

Add the package to your project in the `dependencies` section in your `package.json` file

```js

    "patternlibrary": "git+https://gitlab.bjoernbartels.earth/js/patternlibrary.git"

```

to your `package.json` file.

Once the stable release has arrived, install via npm

or install via npm

```bash

$> npm install patternlibrary --save-dev

npm install patternlibrary --save

```

## Gulp usage

You can setup **Patternlibrary** in a gulp task.    

```

## Standalone module usage

**Patternlibrary** is also usable as a standalone node module to integrate into your project. 

See the [API documentation page](api_docs.md) for a full overview of available methods.

## Example, self-documenting demo setup

The **Patternlibrary** package contains a self-documenting demo setup.

Just run

```bash

npm run demo

```

in the package's root folder and browse to `http://localhost:8000`.

A live demo of the self-documenting setup can also be found [here](https://demo.patternlibrary.bjoernbartels.earth/).

[An example front-end/theme project](https://gitlab.bjoernbartels.earth/themes/node-patternlibrary-demo) can be found in our [GitLab](https://gitlab.bjoernbartels.earth/themes/node-patternlibrary-demo) or at GitHub.

## CLI

If you like to contribute to/experiment with **Patternlibrary**, checkout the repo...

```bash

$> git clone https://gitlab.bjoernbartels.earth/js/patternlibrary node-patternlibrary

$> cd node-patternlibrary

$> npm install

git clone https://gitlab.bjoernbartels.earth/js/patternlibrary node-patternlibrary

cd node-patternlibrary

npm install

```

...just add the local repo to your `package.json` file...

```js

```

...and link the repo to your project via npm

```bash

$> cd projectname

$> npm link ../path/to/node-patternlibrary 

cd projectname

npm link ../path/to/node-patternlibrary 

```

## Testing

Simply, use `npm test` to run **Patternlibrary** tests.

Simply, use 

```bash

npm test

```

to run **Patternlibrary** tests.

  _optional_, default: `src/data`

- - - - - - - - - - - - - - - - - - - - - - - -

### Special options

- #### `verbose`

  **Type:** `Boolean`

  _optional_, default: false

- - - - - - - - - - - - - - - - - - - - - - - -

### Special options

- #### `patterns`

  **Type:** `Object`

  Set the pattern specific source-paths.   

  _optional_, default: 

  ```js

  {

      atoms     : 'atoms/',

  Set the pattern specific file-name patterns.   

  _optional_, default: 

  ```js

  {

      'main'       : '{index,pattern}.{html,hbs,handlebars}',

- - - - - - - - - - - - - - - - - - - - - - - -

### Plug-in options

### Middleware options

- #### `plugins`

  **Type:** `Object`

  - `docparser`

      **Type:** `Object`

      Set special 'DocParser' options

      _optional_

  - `docrenderer`

      **Type:** `Object`

      Set special 'DocRenderer' options

      _optional_

  - `filestream`

- #### `middleware`

  **Type:** `Object`

      Set special 'filestream' options

      _optional_

  - `middleware`

      **Type:** `Object`

  Set 'handlebars' options.

- #### `panini`

  **Type:** `Object`

  Set 'panini' options.

- #### `supercollider`

- #### `markdown`

  **Type:** `Object`

  Set 'supercollider' options.

- #### `marked`

  **Type:** `Object`

  Set 'marked' options.

  Set 'markdown-it' options.

- #### `sassdoc`

...

---

### Work-In-Progress disclaimer

This project is now going from some kind of *Proof Of Concept* to real implementation.

Most of its features and behavour is fixed so far.

DO NOT USE IN PRODUCTION ENVIRONMENTS YET!

When using this software, absolutely no warranties of any sort are granted. Please see the license file for more information.

---

	</div>

</div>

<div class="row">

	<div class="large-12 column">

		<hr>

		<h1>h1 Heading 😎</h1>

		<h2>h2 Heading</h2>

		<h3>h3 Heading</h3>

		<h4>h4 Heading</h4>

		<h5>h5 Heading</h5>

		<h6>h6 Heading</h6>

		<h2>Horizontal Rules</h2>

		<hr>

		<hr>

		<hr>

		<h2>Typographic replacements</h2>

		<p>Enable typographer option to see result.</p>

		<p>© © ® ® ™ ™ § § ±</p>

		<p>test… test… test… test?.. test!..</p>

		<p>!!! ??? ,  – —</p>

		<p>“Smartypants, double quotes” and ‘single quotes’</p>

		<h2>Emphasis</h2>

		<p><strong>This is bold text</strong></p>

		<p><strong>This is bold text</strong></p>

		<p><em>This is italic text</em></p>

		<p><em>This is italic text</em></p>

		<p><s>Strikethrough</s></p>

		<h2>Blockquotes</h2>

		<blockquote>

		<p>Blockquotes can also be nested…</p>

		<blockquote>

		<p>…by using additional greater-than signs right next to each other…</p>

		<blockquote>

		<p>…or with spaces between arrows.</p>

		</blockquote>

		</blockquote>

		</blockquote>

		<h2>Lists</h2>

		<p>Unordered</p>

		<ul>

			<li>Create a list by starting a line with <code>+</code>, <code>-</code>, or <code>*</code></li>

			<li>Sub-lists are made by indenting 2 spaces:

				<ul>

					<li>Marker character change forces new list start:

						<ul>

							<li>Ac tristique libero volutpat at</li>

						</ul>

						<ul>

							<li>Facilisis in pretium nisl aliquet</li>

						</ul>

						<ul>

							<li>Nulla volutpat aliquam velit</li>

						</ul>

					</li>

				</ul>

			</li>

			<li>Very easy!</li>

		</ul>

		<p>Ordered</p>

		<ol>

			<li>

				<p>Lorem ipsum dolor sit amet</p>

			</li>

			<li>

				<p>Consectetur adipiscing elit</p>

			</li>

			<li>

				<p>Integer molestie lorem at massa</p>

			</li>

			<li>

				<p>You can use sequential numbers…</p>

			</li>

			<li>

				<p>…or keep all the numbers as <code>1.</code></p>

			</li>

		</ol>

		<p>Start numbering with offset:</p>

		<ol start="57">

			<li>foo</li>

			<li>bar</li>

		</ol>

		<h2>Code</h2>

		<p>Inline <code>code</code></p>

		<p>Indented code</p>

		<pre><code>// Some comments

line 1 of code

line 2 of code

line 3 of code

		</code></pre>

		<p>Block code “fences”</p>

		<pre class="hljs"><code>Sample text here...

		</code></pre>

		<p>Syntax highlighting</p>

		<pre class="hljs language-js"><code><span class="hljs-keyword">var</span> foo = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">bar</span>) </span>{

		  <span class="hljs-keyword">return</span> bar++;

		};

		<span class="hljs-built_in">console</span>.log(foo(<span class="hljs-number">5</span>));

		</code></pre>

		<h2>Tables</h2>

		<table>

		<thead>

		<tr>

		<th>Option</th>

		<th>Description</th>

		</tr>

		</thead>

		<tbody>

		<tr>

		<td>data</td>

		<td>path to data files to supply the data that will be passed into templates.</td>

		</tr>

		<tr>

		<td>engine</td>

		<td>engine to be used for processing templates. Handlebars is the default.</td>

		</tr>

		<tr>

		<td>ext</td>

		<td>extension to be used for dest files.</td>

		</tr>

		</tbody>

		</table>

		<p>Right aligned columns</p>

		<table>

		<thead>

		<tr>

		<th style="text-align:right">Option</th>

		<th style="text-align:right">Description</th>

		</tr>

		</thead>

		<tbody>

		<tr>

		<td style="text-align:right">data</td>

		<td style="text-align:right">path to data files to supply the data that will be passed into templates.</td>

		</tr>

		<tr>

		<td style="text-align:right">engine</td>

		<td style="text-align:right">engine to be used for processing templates. Handlebars is the default.</td>

		</tr>

		<tr>

		<td style="text-align:right">ext</td>

		<td style="text-align:right">extension to be used for dest files.</td>

		</tr>

		</tbody>

		</table>

		<h2>Links</h2>

		<p><a href="http://dev.nodeca.com">link text</a></p>

		<p><a href="http://nodeca.github.io/pica/demo/" title="title text!">link with title</a></p>

		<p>Autoconverted link <a href="https://github.com/nodeca/pica">https://github.com/nodeca/pica</a> (enable linkify to see)</p>

		<h2>Images</h2>

		<p><img src="https://octodex.github.com/images/minion.png" alt="Minion">

		<img src="https://octodex.github.com/images/stormtroopocat.jpg" alt="Stormtroopocat" title="The Stormtroopocat"></p>

		<p>Like links, Images also have a footnote style syntax</p>

		<p><img src="https://octodex.github.com/images/dojocat.jpg" alt="Alt text" title="The Dojocat"></p>

		<p>With a reference later in the document defining the URL location:</p>

		<h2>Plugins</h2>

		<p>The killer feature of <code>markdown-it</code> is very effective support of

		<a href="https://www.npmjs.org/browse/keyword/markdown-it-plugin">syntax plugins</a>.</p>

		<h3><a href="https://github.com/markdown-it/markdown-it-emoji">Emojies</a></h3>

		<blockquote>

		<p>Classic markup: 😉 :crush: 😢 :tear: 😆 😋</p>

		<p>Shortcuts (emoticons): 😃 😦 😎 😉</p>

		</blockquote>

		<p>see <a href="https://github.com/markdown-it/markdown-it-emoji#change-output">how to change output</a> with twemoji.</p>

		<h3><a href="https://github.com/markdown-it/markdown-it-sub">Subscript</a> / <a href="https://github.com/markdown-it/markdown-it-sup">Superscript</a></h3>

		<ul>

		<li>19<sup>th</sup></li>

		<li>H<sub>2</sub>O</li>

		</ul>

		<h3><a href="https://github.com/markdown-it/markdown-it-ins">&lt;ins&gt;</a></h3>

		<p><ins>Inserted text</ins></p>

		<h3><a href="https://github.com/markdown-it/markdown-it-mark">&lt;mark&gt;</a></h3>

		<p><mark>Marked text</mark></p>

		<h3><a href="https://github.com/markdown-it/markdown-it-footnote">Footnotes</a></h3>

		<p>Footnote 1 link<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>.</p>

		<p>Footnote 2 link<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup>.</p>

		<p>Inline footnote<sup class="footnote-ref"><a href="#fn3" id="fnref3">[3]</a></sup> definition.</p>

		<p>Duplicated footnote reference<sup class="footnote-ref"><a href="#fn2" id="fnref2:1">[2:1]</a></sup>.</p>

		<h3><a href="https://github.com/markdown-it/markdown-it-deflist">Definition lists</a></h3>

		<dl>

		<dt>Term 1</dt>

		<dd>

		<p>Definition 1

		with lazy continuation.</p>

		</dd>

		<dt>Term 2 with <em>inline markup</em></dt>

		<dd>

		<p>Definition 2</p>

		<pre><code>  { some code, part of Definition 2 }

		</code></pre>

		<p>Third paragraph of definition 2.</p>

		</dd>

		</dl>

		<p><em>Compact style:</em></p>

		<dl>

		<dt>Term 1</dt>

		<dd>Definition 1</dd>

		<dt>Term 2</dt>

		<dd>Definition 2a</dd>

		<dd>Definition 2b</dd>

		</dl>

		<h3><a href="https://github.com/markdown-it/markdown-it-abbr">Abbreviations</a></h3>

		<p>This is <abbr title="Hyper Text Markup Language">HTML</abbr> abbreviation example.</p>

		<p>It converts “<abbr title="Hyper Text Markup Language">HTML</abbr>”, but keep intact partial entries like “xxxHTMLyyy” and so on.</p>

		<h3><a href="https://github.com/markdown-it/markdown-it-container">Custom containers</a></h3>

		<div class="warning">

		<p><em>here be dragons</em></p>

		</div>

		<hr class="footnotes-sep">

		<section class="footnotes">

		<ol class="footnotes-list">

		<li id="fn1" class="footnote-item"><p>Footnote <strong>can have markup</strong></p>

		<p>and multiple paragraphs. <a href="#fnref1" class="footnote-backref">↩︎</a></p>

		</li>

		<li id="fn2" class="footnote-item"><p>Footnote text. <a href="#fnref2" class="footnote-backref">↩︎</a> <a href="#fnref2:1" class="footnote-backref">↩︎</a></p>

		</li>

		<li id="fn3" class="footnote-item"><p>Text of inline footnote <a href="#fnref3" class="footnote-backref">↩︎</a></p>

		</li>

		</ol>

		</section>

	</div>

</div>