Skip to content

N
node-patternlibrary-demo
Commit a2c8541a authored by Björn Bartels's avatar Björn Bartels
Browse files
Options

update tmpl, clean-up

parent ae78f01e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 966 additions and 45 deletions
package.json
View file @ a2c8541a
......@@ -34,13 +34,13 @@
"license": "Apache-2.0",
"babel": {
"presets": [
"es2015"
"env"
]
},
"private": false,
"dependencies": {},
"devDependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-env": "^1.6.0",
"babel-register": "^6.7.2",
"browser-sync": "^2.10.0",
"require-dir": "^0.3.0",
......
src/layouts/default.html
View file @ a2c8541a
......@@ -17,7 +17,7 @@
</head>
<body>
<div id="wrapper" class="row column small-12">
<div id="wrapper" class="row column small-12">
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
......
src/pages/htmlelements.html
View file @ a2c8541a
......@@ -81,7 +81,6 @@ layout: default
<li>Lorem ipsum...</li>
<li>Lorem ipsum...</li>
<li>Lorem ipsum...</li>
<li>
<ol>
<li>Lorem ipsum...</li>
<li>Lorem ipsum...</li>
......@@ -92,6 +91,7 @@ layout: default
</ol>
</li>
</ol>
<li>
</li>
</ol>
......
src/pages/kitchensink.html
View file @ a2c8541a
<!DOCTYPE html>
<!-- <!DOCTYPE html>
<html>
<head>
<title>[site-app]</title>
......@@ -9,13 +9,13 @@
<link href="/assets/vendor/datatables/css/dataTables.foundation.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/assets/vendor/flag-icon-css/flag-icon.min.css" media="screen" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/css/app.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-- >
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-- >
<script src="assets/vendor/modernizr.js"></script>
<script src="assets/js/app.js"></script>
</head>
<body>
-->
<div id="wrapper" class="row column large-12">
<div class="row">
<div class="large-12 columns">
......@@ -1662,21 +1662,8 @@
</article>
<hr>
<!-- Footer -->
<footer id="footer" class="row column large-12">
<span class="copyright">&copy; <a href="https://bjoernbartels.earth" target="_blank">[bjoernbartels.earth]</a>.
<span class="patterns">| <a href="/">Patterns</a>.
<span class="typography">| <a href="/typography.html">Typography</a>.
<span class="foundation">| <a href="/kitchensink.html">Kitchen Sink</a>.
<span class="styleguide">| <a href="/styleguide.html">Styleguide</a>.
<span class="foundation">| <a href="/foundation.html">Demo</a>.
</footer>
</div>
<!--
</body>
</html>
\ No newline at end of file
</html> -->
\ No newline at end of file
src/pages/typography.html 0 → 100644
View file @ a2c8541a
---
layout: default
---
<header class="row">
<div class="large-12 columns">
<h1>[Typography - Theme]</h1>
</div>
</header>
<div class="row">
<div class="large-12 columns">
<div class="callout">
<h1>H1 headline text example</h1>
<h2>H2 headline text example</h2>
<h3>H3 headline text example</h3>
<h4>H4 headline text example</h4>
<h5>H5 headline text example</h5>
<h6>H6 headline text example</h6>
<p>paragraph text example</p>
</div>
</div>
</div>
src/patterns/footer.html
View file @ a2c8541a
<!-- Footer -->
<footer id="footer" class="row column small-12">
<span class="copyright" >&copy; <a href="{{project.author.url}}" target="_blank">{{project.author.name}}</a>.
<span class="patterns" >| <a href="/pl/patterns">Patterns</a>.
<span class="htmlelements">| <a href="/htmlelements.html">HTML Elements</a>.
<span class="foundation">| <a href="/foundation.html">Foundation Demo</a>.
<span class="styleguide">| <a href="/styleguide.html">Styleguide</a>.
<span class="emulator" style="dislay:none;" >| <a href="/pl/mobile-phone-emulator.html">Emulator</a>.
</footer>
\ No newline at end of file
<footer id="footer" class="row columns small-12">
<div class="small-12 medium-6 column text-left">
<span class="patterns" ><a href="/pl/patterns/">Patterns</a>
<span class="htmlelements">| <a href="/htmlelements.html">HTML Elements</a>
<span class="typography">| <a href="/typography.html">Typography</a>
<span class="plfoundation">| <a href="/kitchensink.html">Kitchen Sink</a>
<span class="styleguide">| <a href="/styleguide.html">Styleguide</a>
<span class="plfoundation">| <a href="/foundation.html">Demo</a>
<span class="emulator" style="dislay:none;" >| <a href="/pl/emulator">Emulator</a>.
</div>
<div class="small-12 medium-6 column text-right">
{{#if project}}
<span class="copyright" >[{{project.name}}{{#if project.version}} v{{project.version}}{{/if}}]</a>
<span class="copyright" >| &copy; <a href="{{project.author.url}}" target="_blank">{{project.author.name}}</a>
{{/if}}
</div>
</footer>
\ No newline at end of file
src/patterns/molecules/article-excerpt-toggle/changelog.md 0 → 100644
View file @ a2c8541a
### 09/2017
- initial release
\ No newline at end of file
src/patterns/molecules/article-excerpt-toggle/index.html 0 → 100644
View file @ a2c8541a
---
pattern:
name: 'molecule/article-excerpt-toggle'
categories: ['typography','article']
uses: ['atom/text-headline','molecule/text-excerpt-toggle','atom/link']
params:
class: ['*']
headline: ['*']
content: ['*']
url: ['*']
defaults:
headline: 'This is some article headline...'
url: 'https://domain.tld/'
---
<article class="{{class}}">
{{PL atom="text-headline" text=headline}}
{{PL molecule="text-excerpt-toggle" text=content}}
{{PL atom="link" href=url label="read more" class="more"}}
</article>
\ No newline at end of file
src/patterns/molecules/article-excerpt-toggle/readme.md 0 → 100644
View file @ a2c8541a
---
title: molecule/article-excerpt-toggle
description: 'an article teaser module with "more" link, text paragraph is toggling to excerpt or full length'
sass: styles.scss
js:
---
Here you can either give a rather brief description of your pattern or provide extended usage information.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
## A Markup Example
```html_example
<article class="{{class}}">
{{patternlibrary atom="text-headline" text=headline}}
{{patternlibrary molecule="text-excerpt-toggle" text=content}}
{{patternlibrary atom="link" href=url label="read more" class="more"}}
</article>
```
\ No newline at end of file
src/patterns/molecules/article-teaser/readme.md
View file @ a2c8541a
......@@ -2,7 +2,7 @@
title: molecule/article-teaser
description: 'an article teaser module with "more" link'
sass: styles.scss
js: module.js
js:
---
Here you can either give a rather brief description of your pattern or provide extended usage information.
......
src/patterns/molecules/text-excerpt-toggle/changelog.md 0 → 100644
View file @ a2c8541a
### 09/2017
- initial release
\ No newline at end of file
src/patterns/molecules/text-excerpt-toggle/index.html 0 → 100644
View file @ a2c8541a
---
pattern:
name: 'molecule/text-excerpt-toggle'
categories: ['basic','typography']
uses: ['atom/text-paragraph','atom/link']
params:
class: ['*']
---
<p class="{{class}}" data-text-excerpt-toggle>{{texthelper 'long'}}</p>
<a href="#more">show more</a>
<a href="#less">show less</a>
\ No newline at end of file
src/patterns/molecules/text-excerpt-toggle/module.js 0 → 100644
View file @ a2c8541a
This diff is collapsed.
src/patterns/molecules/text-excerpt-toggle/readme.md 0 → 100644
View file @ a2c8541a
---
title: 'molecule/text-excerpt-toggle'
description: 'an inline text paragraph, toggling to excerpt or full length'
sass: styles.scss
js: module.js
---
Here you can either give a rather brief description of your pattern or provide extended usage information.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
## A Markup Example
```html_example
<p data-text-excerpt-toggle>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum
inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda
error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum
inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda
error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum
inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda
error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti voluptatum
inventore magnam, ea quod similique delectus doloremque ratione, accusamus assumenda
error hic? Ea consequuntur quibusdam alias asperiores quisquam inventore deleniti.
</p>
<a href="#more">show more</a>
<a href="#less">show less</a>
```
\ No newline at end of file
src/styleguide/example.md 0 → 100644
View file @ a2c8541a
This diff is collapsed.
src/styleguide/template.html
View file @ a2c8541a
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Guide</title>
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
<!DOCTYPE html>
<html>
<head>
<title>[site-app]</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" href="{{root}}assets/css/app.css" />
<link rel="stylesheet" href="{{root}}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="{{root}}assets/vendor/modernizr.js"></script>
<script src="{{root}}assets/js/app.js"></script>
<script src="{{root}}assets/vendor/patternlibrary/js/vendor.js"></script>
<script src="{{root}}assets/vendor/patternlibrary/js/patternlibrary-frontend.js"></script>
<!-- Style guide-specific CSS goes here. -->
<style>
......@@ -86,6 +94,26 @@
</div></div>
<!-- script src="assets/js/app.js"></script -->
<!-- Footer -->
<hr />
<footer id="footer" class="row columns small-12">
<div class="small-12 medium-6 column text-left">
<span class="patterns" ><a href="/pl/patterns/">Patterns</a>
<span class="htmlelements">| <a href="/htmlelements.html">HTML Elements</a>
<span class="typography">| <a href="/typography.html">Typography</a>
<span class="plfoundation">| <a href="/kitchensink.html">Kitchen Sink</a>
<span class="styleguide">| <a href="/styleguide.html">Styleguide</a>
<span class="plfoundation">| <a href="/foundation.html">Demo</a>
<span class="emulator" style="dislay:none;" >| <a href="/pl/emulator">Emulator</a>.
</div>
<div class="small-12 medium-6 column text-right">
<span class="copyright" >[{{project.name}}{{#if project.version}} v{{project.version}}{{/if}}]</a>
<span class="copyright" >| &copy; <a href="{{project.author.url}}" target="_blank">{{project.author.name}}</a>
</div>
</footer>
<!-- script src="assets/js/app.js"></script -->
</body>
</html>
tasks/patternlibrary.js
View file @ a2c8541a
......@@ -79,7 +79,7 @@ gulp.task('patternlibrary:run', function (done) {
// refresh patternlibrary dist files and data
gulp.task('patternlibrary:refresh', function (done) {
patternlibrary.refresh();
$PL.refresh();
done();
});
......
tasks/watch.js
View file @ a2c8541a
......@@ -35,8 +35,8 @@ function watch(done) {
gulp.watch('src/assets/img/**/*').on('change', gulp.series('images', browser.reload));
// watch partials and pages
gulp.watch('src/{layouts,partials,patterns}/**/*.html').on('change', gulp.series(
'pages:refresh', 'pages',
gulp.watch('src/{layouts,partials,patterns,pages}/**/*.{md,js,scss,css,less,hbs,html}').on('change', gulp.series(
'patternlibrary:refresh', 'pages:refresh', 'pages',
browser.reload
));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment