Commit 0f8f8560 authored by Björn Bartels's avatar Björn Bartels

basic docs layout, update parsing and rendering, clean up

parent 8ee9faea
......@@ -8,4 +8,6 @@ npm-debug.log
.idea/
.buildpath
.project
.settings
\ No newline at end of file
.settings
*_save*
*.save*
{}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
{{!-- layout for simple template ajax requests --}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
<!DOCTYPE html>
<html>
<head>
<title>[patternlibray-frontend] prototype</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<link rel="stylesheet" media="screen" type="text/css" href="{{root}}assets/css/patternlibrary.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="{{root}}assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="{{root}}assets/css/ie9.css" /><![endif]-->
<script src="{{root}}assets/js/vendor.js"></script>
<script src="{{root}}assets/js/patternlibrary-frontend.js"></script>
</head>
<body>
<section id="patternlibrarySection" class="patternlibrary">
<div class="row column small-12">
{{> top-bar}}
{{> body}}
{{> footer}}
</div>
</section>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>[patternlibray-frontend] prototype</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<link rel="stylesheet" media="screen" type="text/css" href="/assets/vendor/patternlibrary/css/patternlibrary.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="{{root}}assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="{{root}}assets/css/ie9.css" /><![endif]-->
<script src="/assets/vendor/patternlibrary/js/vendor.js"></script>
<script src="/assets/vendor/patternlibrary/js/patternlibrary-frontend.js"></script>
</head>
<body>
<section id="patternlibrarySection" class="patternlibrary">
<div class="row column small-12">
{{> top-bar}}
{{> body}}
{{> footer}}
</div>
</section>
</body>
</html>
\ No newline at end of file
{{!-- layout for simple template ajax requests --}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
{{> patterns-list no_demo="true"}}
</div>
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
{{> patterns-list no_demo="true"}}
</div>
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
{{> patterns-list no_demo="true"}}
</div>
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
{{> patterns-list no_demo="true"}}
</div>
<header class="hide-for-small show-for-large hide hidden is-hidden">
<div class="small-12 columns">
<h1>Patterns</h1>
</div>
</header>
<div class="small-12 columns">
<!-- PL:TEMPLATE-LIST -->
</div>
{{> docs-htmlhead}}
{{> docs-body}}
{{> docs-htmlclose}}
This diff is collapsed.
<h1>{{ title }}</h1>
<p class="lead">{{ description }}</p>
{{ docs }}
<hr>
{{#if sass}}
<! -- section>
{{#heading 2}}Sass Reference{{/heading}}
{{#if sass.variable}}
<section>
{{#heading 3 'sass-variables'}}Variables{{/heading}}
<p>The default styles of this component can be customized using these Sass variables in your project's <a href="sass.html#the-settings-file">settings file</a>.</p>
<table class="docs-variable-table">
<thead>
<tr><th>Name</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
</thead>
{{#each sass.variable}}
<tr>
<td class="name"><code>${{this.context.name}}</code></td>
<td>{{formatSassTypes this.type}}</td>
<td class="{{toLower this.type}}"><code>{{formatSassValue this.context.value}}</code></td>
<td>{{md this.description}}</td>
</tr>
{{/each}}
</table>
</section>
{{/if}}
{{#if sass.mixin}}
{{#if sass.variable}}<hr>{{/if}}
<section>
{{#heading 3 'sass-mixins'}}Mixins{{/heading}}
<p>We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.</p>
{{#each sass.mixin}}{{#filter this}}
<section {{#if this.deprecated }}class="docs-deprecated"{{/if}}>
{{#heading 4}}{{this.context.name}}{{/heading}}
{{#if this.since}}
<p class="docs-notice-added">Added in {{this.since.0.version}}</p>
{{/if}}
{{#if this.deprecated}}
<p class="docs-notice-deprecated">Deprecated in {{this.deprecated}}</p>
{{/if}}
<div class="docs-code">
<pre><code>{{writeSassMixin this}}</code></pre>
</div>
{{md this.description}}
{{#if this.aliased}}
<p><strong>Aliases:</strong> {{#each this.aliased}}<code>{{this}}()</code>{{/each}}</p>
{{/if}}
{{writeSassLink this.link}}
{{#if this.parameter}}
<table class="docs-variable-table">
<thead>
<tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
</thead>
{{#each this.parameter}}
<tr>
<td><code>${{this.name}}</code></td>
<td>{{formatSassTypes this.type}}</td>
<td><code>{{formatSassValue this.default}}</code></td>
<td>{{md this.description}}</td>
</tr>
{{/each}}
</table>
{{/if}}
</section>
{{#unless @last}}<hr>{{/unless}}
{{#if sass.function}}
<hr>
{{/if}}
{{/filter}}{{/each}}
</section>
{{/if}}
{{#if sass.function}}
<hr>
<section>
{{#heading 3 'sass-functions'}}Functions{{/heading}}
{{#each sass.function}}{{#filter this}}
<section {{#if this.deprecated }}class="docs-deprecated"{{/if}}>
{{#heading 4}}{{this.context.name}}{{/heading}}
{{#if this.since}}
<p class="docs-notice-added">Added in {{this.since.0.version}}</p>
{{/if}}
{{#if this.deprecated}}
<p class="docs-notice-deprecated">Deprecated in {{this.deprecated.version}}</p>
{{/if}}
<div class="docs-code">
<pre><code>{{writeSassFunction this}}</code></pre>
</div>
{{md this.description}}
{{writeSassLink this.link}}
{{#if this.parameter}}
<table class="docs-variable-table">
<thead>
<tr><th>Parameter</th><th>Type</th><th>Default Value</th><th>Description</th></tr>
</thead>
{{#each this.parameter}}
<tr>
<td><code>${{this.name}}</code></td>
<td>{{formatSassTypes this.type}}</td>
<td><code>{{formatSassValue this.default}}</code></td>
<td>{{md this.description}}</td>
</tr>
{{/each}}
</table>
{{/if}}
</section>
{{#unless @last}}<hr>{{/unless}}
{{/filter}}{{/each}}
</section>
{{/if}}
</section -->
<hr>
{{/if}}
{{#if js}}
<section>
{{#heading 2}}JavaScript Reference{{/heading}}
{{#if js.module}}{{#with js.module.[0]}}
<section>
{{#heading 3 'js-module'}}Initializing{{/heading}}
<p>The file <code>{{meta.filename}}</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>.{{#if requires}} <strong>This plugin also requires these utility libraries:</strong>{{/if}}</p>
{{#if requires}}{{#each requires}}
<ul>
<li><code>{{formatJsModule this}}</code></li>
</ul>
{{/each}}{{/if}}
</section>
{{/with}}{{/if}}
{{#each js.class}}
<section>
{{#heading 3 'js-class'}}Foundation.{{this.name}}{{/heading}}
{{md this.description}}
<div class="docs-code"><pre><code>{{writeJsConstructor this.name}}</code></pre></div>
{{#if this.fires}}
<p><strong>Fires these events:</strong>
{{#each this.fires}}
{{this}}
{{/each}}
</p>
{{/if}}
{{#if this.params}}
<table class="docs-variable-table">
<thead>
<tr><th>Name</th><th>Type</th><th>Description</th></tr>
</thead>
{{#each this.params}}
<tr>
<td><code>{{this.name}}</code></td>
<td>{{this.type.names.[0]}}</td>
<td>{{this.description}}</td>
</tr>
{{/each}}
</table>
{{/if}}
</section>
{{/each}}
<hr>
{{#if js.member}}
<section>
{{#heading 3 'js-options'}}Plugin Options{{/heading}}
<p>Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
<table class="docs-variable-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
{{#each js.member}}
<tr>
<td><code>{{formatJsOptionName this.name}}</code></td>
<td><code>{{formatJsOptionTypes this.type}}</code></td>
<td><code>{{formatJsOptionValue this.defaultvalue}}</code></td>
<td>{{this.description}}</td>
</tr>
{{/each}}
</table>
</section>
{{/if}}
<hr>
{{#if js.event}}
<section>
{{#heading 3 'js-events'}}Events{{/heading}}
<p>These events will fire from any element with a {{title}} plugin attached.</p>
<table class="docs-variable-table">
<thead>
<tr><th>Name</th><th>Description</th></tr>
</thead>
{{#each js.event}}
<tr>
<td><code>{{formatJsEventName this.name ../title}}</code></td>
<td>{{this.description}}</td>
</tr>
{{/each}}
</table>
</section>
{{/if}}
<hr>
{{#if js.function}}
<section>
{{#heading 3 'js-functions'}}Methods{{/heading}}
{{#each js.function}}
<section>
{{#heading 4 this.name}}{{this.name}}{{/heading}}
<div class="docs-code">
<pre><code>{{ writeJsFunction this }}</code></pre>
</div>
{{md this.description}}
{{#if this.fires}}
<p><strong>Fires these events:</strong>
{{#each this.fires}}
{{this}}
{{/each}}
</p>
{{/if}}
{{#if this.params}}
<table class="docs-variable-table">
<thead>
<tr><th>Name</th><th>Type</th><th>Description</th></tr>
</thead>
{{#each this.params}}
<tr>
<td><code>{{this.name}}</code></td>
<td>{{this.type.names.[0]}}</td>
<td>{{this.description}}</td>
</tr>
{{/each}}
</table>
{{/if}}
{{#unless @last}}<hr>{{/unless}}
</section>
{{/each}}
</section>
{{/if}}
</section>
<hr>
{{/if}}
{{#if project}}
<p>Used in: <strong>{{ project }}</strong></p>
{{/if}}
<a class="{{class}}" href="{{href}}">{{label}}</a>
\ No newline at end of file
<a class="btn btn-icon btn-cta-xhr cta-xhr-modal-close" href="javascript:return true;" aria-label="Close modal" data-close>
<span aria-hidden="true">&times;</span>
</a>
\ No newline at end of file
[{{project.name}}{{#if project.version}} v{{project.version}}{{/if}}]
\ No newline at end of file
<section id="patternlibrarySection" class="patternlibrary">
<div class="row column small-12">
{{> top-bar}}
<div class="small-12 columns">
<section class="row panel patternlist">
<div class="small-12 columns">
{{> patterns-list-filter no_demo="true"}}
</div>
<div class="small-12 columns">
<!-- PATTERNLIBRARY_CONTENT -->
<div class="row panel-body">
<div class="row columns large-12">
<ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true" data-deep-link="true" data-update-history>
<li class="accordion-item row columns is-active" data-accordion-item>
<!-- Accordion tab title {{../root}}/patterns/{{pattern.name}} -->
<a href="{{patternlink title}}" class="accordion-title row columns is-active">
<div class="columns medium-6 small-12">Name: {{title}}</div>
<div class="columns medium-6 hide-for-small show-for-medium categories">Categories:
{{#each pattern.categories as |category|}}
<span class="name">{{category}}</span>
{{/each}}
</div>
</a>
<!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
<div class="accordion-content is-active" data-tab-content>
{{> docs-sections-tabs}}
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
\ No newline at end of file
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>[{{> text-project-title}}]</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<link rel="stylesheet" media="screen" type="text/css" href="/assets/vendor/patternlibrary/css/patternlibrary.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="{{root}}assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="{{root}}assets/css/ie9.css" /><![endif]-->
<script src="/assets/vendor/patternlibrary/js/vendor.js"></script>
<script src="/assets/vendor/patternlibrary/js/patternlibrary-frontend.js"></script>
</head>
<body>
\ No newline at end of file
<div class="row collapse">
<div class="small-12 columns">
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel-pattern" aria-selected="true">Pattern</a></li>
<li class="tabs-title"><a href="#panel-readme">ReadMe</a></li>
<li class="tabs-title"><a href="#panel-markup">Markup</a></li>
<li class="tabs-title"><a href="#panel-javascript">JS</a></li>
<li class="tabs-title"><a href="#panel-scss">SCSS</a></li>
<li class="tabs-title"><a href="#panel-specs">Specs</a></li>
<li class="tabs-title"><a href="#panel-tests">Tests</a></li>
<li class="tabs-title"><a href="#panel-changelog">Changelog</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel-pattern">
{{> docs-section-pattern}}
</div>
<div class="tabs-panel" id="panel-readme">
{{> docs-section-readme}}
</div>
<div class="tabs-panel" id="panel-markup">
{{> docs-section-markup}}
</div>
<div class="tabs-panel" id="panel-javascript">
{{> docs-section-javascript}}
</div>
<div class="tabs-panel" id="panel-scss">
{{> docs-section-scss}}
</div>
<div class="tabs-panel" id="panel-specs">
{{> docs-section-specs}}
</div>
<div class="tabs-panel" id="panel-tests">
{{> docs-section-tests}}
</div>
<div class="tabs-panel" id="panel-changelog">
{{> docs-section-changelog}}
</div>
</div>
</div>
</div>
\ No newline at end of file
{{#unless changelog}}
<section>
{{#heading 3}}no change-log info available...{{/heading}}
</section>
{{/unless}}
{{#if changelog}}
<section>
{{#heading 2}}Change-Log{{/heading}}
<article>
{{changelog}}
</article>
</section>
{{/if}}
\ No newline at end of file
{{#unless js}}
<section>
{{#heading 3}}no JavaScript reference available...{{/heading}}
</section>
{{/unless}}
{{#if js}}
<section>
{{#heading 2}}JavaScript Reference{{/heading}}
{{#if js.module}}{{#with js.module.[0]}}
<section>
{{#heading 3 'js-module'}}Initializing{{/heading}}
<p>The file <code>{{meta.filename}}</code> must be included in your JavaScript to use this plugin, along with <code>foundation.core.js</code>.{{#if requires}} <strong>This plugin also requires these utility libraries:</strong>{{/if}}</p>
{{#if requires}}{{#each requires}}
<ul>
<li><code>{{formatJsModule this}}</code></li>
</ul>
{{/each}}{{/if}}
</section>
{{/with}}{{/if}}
{{#each js.class}}
<section>
{{#heading 3 'js-class'}}Foundation.{{this.name}}{{/heading}}
{{md this.description}}
<div class="docs-code"><pre><code>{{writeJsConstructor this.name}}</code></pre></div>
{{#if this.fires}}
<p><strong>Fires these events:</strong>
{{#each this.fires}}
{{this}}
{{/each}}
</p>
{{/if}}
{{#if this.params}}
<table class="docs-variable-table">
<thead>
<tr><th>Name</th><th>Type</th><th>Description</th></tr>
</thead>
{{#each this.params}}
<tr>
<td><code>{{this.name}}</code></td>
<td>{{this.type.names.[0]}}</td>
<td>{{this.description}}</td>
</tr>
{{/each}}
</table>
{{/if}}
</section>
{{/each}}
<hr>
{{#if js.member}}
<section>
{{#heading 3 'js-options'}}Plugin Options{{/heading}}
<p>Use these options to customize an instance of {{title}}. Plugin options can be set as individual data attributes, one combined <code>data-options</code> attribute, or as an object passed to the plugin's constructor. <a href="javascript.html#initializing">Learn more about how JavaScript plugins are initialized.</a></p>
<table class="docs-variable-table">
<thead>
<tr>