Update to Gulp 4, Ribbon 3, etc.
This commit is contained in:
parent
72b714653e
commit
5e1037dfdb
|
@ -7,9 +7,8 @@
|
||||||
1. Built on HTML, CSS and vanilla JavaScript
|
1. Built on HTML, CSS and vanilla JavaScript
|
||||||
2. Works in all modern browsers
|
2. Works in all modern browsers
|
||||||
3. Themes are separated from engine
|
3. Themes are separated from engine
|
||||||
4. Modular and extensible
|
4. Fully keyboard accessible
|
||||||
5. Fully keyboard accessible
|
5. Printable to PDF
|
||||||
6. Printable to PDF
|
|
||||||
|
|
||||||
[See it in action](http://shwr.me/). Includes [Ribbon](https://github.com/shower/ribbon/) and [Material](https://github.com/shower/material/) themes, and [core](https://github.com/shower/core/) with plugins.
|
[See it in action](http://shwr.me/). Includes [Ribbon](https://github.com/shower/ribbon/) and [Material](https://github.com/shower/material/) themes, and [core](https://github.com/shower/core/) with plugins.
|
||||||
|
|
||||||
|
|
27
gulpfile.js
27
gulpfile.js
|
@ -4,7 +4,6 @@ const merge = require('merge-stream');
|
||||||
const rename = require('gulp-rename');
|
const rename = require('gulp-rename');
|
||||||
const replace = require('gulp-replace');
|
const replace = require('gulp-replace');
|
||||||
const rsync = require('gulp-rsync');
|
const rsync = require('gulp-rsync');
|
||||||
const sequence = require('run-sequence');
|
|
||||||
const zip = require('gulp-zip');
|
const zip = require('gulp-zip');
|
||||||
const pages = require('gh-pages');
|
const pages = require('gh-pages');
|
||||||
const browserSync = require('browser-sync').create();
|
const browserSync = require('browser-sync').create();
|
||||||
|
@ -70,6 +69,10 @@ gulp.task('prepare', () => {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
gulp.task('clean', () => {
|
||||||
|
return del('prepared/**');
|
||||||
|
});
|
||||||
|
|
||||||
gulp.task('zip', () => {
|
gulp.task('zip', () => {
|
||||||
return gulp.src('prepared/**')
|
return gulp.src('prepared/**')
|
||||||
.pipe(zip('archive.zip'))
|
.pipe(zip('archive.zip'))
|
||||||
|
@ -80,25 +83,17 @@ gulp.task('upload', () => {
|
||||||
return pages.publish('prepared')
|
return pages.publish('prepared')
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('archive', (callback) => {
|
gulp.task('archive', gulp.series(
|
||||||
sequence(
|
|
||||||
'prepare',
|
'prepare',
|
||||||
'zip',
|
'zip',
|
||||||
'clean', callback
|
'clean'
|
||||||
)
|
));
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task('publish', (callback) => {
|
gulp.task('publish', gulp.series(
|
||||||
sequence(
|
|
||||||
'prepare',
|
'prepare',
|
||||||
'upload',
|
'upload',
|
||||||
'clean', callback
|
'clean'
|
||||||
)
|
));
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task('clean', () => {
|
|
||||||
return del('prepared/**');
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task('serve', () => {
|
gulp.task('serve', () => {
|
||||||
browserSync.init({
|
browserSync.init({
|
||||||
|
@ -113,5 +108,3 @@ gulp.task('serve', () => {
|
||||||
browserSync.reload();
|
browserSync.reload();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('default', ['serve']);
|
|
||||||
|
|
29
index.html
29
index.html
|
@ -5,7 +5,7 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="node_modules/shower-ribbon/styles/screen-16x10.css">
|
<link rel="stylesheet" href="node_modules/shower-ribbon/styles/styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body class="shower list">
|
<body class="shower list">
|
||||||
|
|
||||||
|
@ -19,26 +19,28 @@
|
||||||
<p>Brought to you by <a href="http://pepelsbey.net">Vadim Makeev</a></p>
|
<p>Brought to you by <a href="http://pepelsbey.net">Vadim Makeev</a></p>
|
||||||
<figure>
|
<figure>
|
||||||
<img class="cover" src="pictures/cover.jpg" alt="Hands on the orange typewriter in a park">
|
<img class="cover" src="pictures/cover.jpg" alt="Hands on the orange typewriter in a park">
|
||||||
<figcaption class="white">
|
<figcaption class="copyright right white">
|
||||||
<a href="http://fiftyfootshadows.net/">© John Carey</a>
|
<a href="http://fiftyfootshadows.net/">© John Carey</a>
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
<style>
|
<style>
|
||||||
#cover h2 {
|
#cover h2 {
|
||||||
margin: 30px 0 0;
|
margin: 30px 0 0;
|
||||||
color:#FFF;
|
color: white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 70px;
|
font-size: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cover p {
|
#cover p {
|
||||||
margin: 10px 0 0;
|
margin: 10px 0 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color:#FFF;
|
color: white;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cover p a {
|
#cover p a {
|
||||||
color:#FFF;
|
color: white;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</section>
|
</section>
|
||||||
|
@ -46,10 +48,9 @@
|
||||||
<section class="slide">
|
<section class="slide">
|
||||||
<h2>Shower key features</h2>
|
<h2>Shower key features</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Built on HTML, CSS and vanilla JavaScript</li>
|
<li>Built on HTML, CSS and JavaScript</li>
|
||||||
<li>Works in all modern browsers</li>
|
<li>Works in all modern browsers</li>
|
||||||
<li>Themes are separated from engine</li>
|
<li>Themes are separated from engine</li>
|
||||||
<li>Modular and extensible</li>
|
|
||||||
<li>Fully keyboard accessible</li>
|
<li>Fully keyboard accessible</li>
|
||||||
<li>Printable to PDF</li>
|
<li>Printable to PDF</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
@ -63,7 +64,10 @@
|
||||||
|
|
||||||
<section class="slide">
|
<section class="slide">
|
||||||
<h2>Two columns if you like</h2>
|
<h2>Two columns if you like</h2>
|
||||||
<p class="double">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
|
<div class="columns two">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
|
||||||
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="slide">
|
<section class="slide">
|
||||||
|
@ -146,13 +150,13 @@
|
||||||
<h2>Pictures</h2>
|
<h2>Pictures</h2>
|
||||||
<figure>
|
<figure>
|
||||||
<img class="cover" src="pictures/picture.jpg" alt="Orange typewriter on a wooden table close-up">
|
<img class="cover" src="pictures/picture.jpg" alt="Orange typewriter on a wooden table close-up">
|
||||||
<figcaption class="white">
|
<figcaption class="copyright right white">
|
||||||
<a href="http://fiftyfootshadows.net/">© John Carey</a>
|
<a href="http://fiftyfootshadows.net/">© John Carey</a>
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
<style>
|
<style>
|
||||||
#picture h2 {
|
#picture h2 {
|
||||||
color:#FFF;
|
color: white;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</section>
|
</section>
|
||||||
|
@ -172,10 +176,6 @@
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="slide grid">
|
|
||||||
<h2>All nicely aligned to grid</h2>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="slide" id="see-more">
|
<section class="slide" id="see-more">
|
||||||
<h2 class="shout">
|
<h2 class="shout">
|
||||||
<img src="pictures/logo.svg" alt="Shower logo">
|
<img src="pictures/logo.svg" alt="Shower logo">
|
||||||
|
@ -185,6 +185,7 @@
|
||||||
#see-more h2 {
|
#see-more h2 {
|
||||||
font-size: 100px
|
font-size: 100px
|
||||||
}
|
}
|
||||||
|
|
||||||
#see-more img {
|
#see-more img {
|
||||||
width: 0.72em;
|
width: 0.72em;
|
||||||
height: 0.72em;
|
height: 0.72em;
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
|
@ -29,23 +29,22 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"shower-core": "^2.1.0",
|
"shower-core": "^2.1.0",
|
||||||
"shower-material": "^1.1.0",
|
"shower-material": "^1.1.0",
|
||||||
"shower-ribbon": "^2.1.0"
|
"shower-ribbon": "^3.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"browser-sync": "^2.18.12",
|
"browser-sync": "^2.18.12",
|
||||||
"del": "^3.0.0",
|
"del": "^3.0.0",
|
||||||
"gh-pages": "^1.1.0",
|
"gh-pages": "^1.2.0",
|
||||||
"gulp": "^3.9.1",
|
"gulp": "^4.0.0",
|
||||||
"gulp-rename": "^1.2.2",
|
"gulp-rename": "^1.2.2",
|
||||||
"gulp-replace": "^1.0.0",
|
"gulp-replace": "^1.0.0",
|
||||||
"gulp-rsync": "0.0.8",
|
"gulp-rsync": "0.0.8",
|
||||||
"gulp-zip": "^4.0.0",
|
"gulp-zip": "^4.0.0",
|
||||||
"merge-stream": "^1.0.0",
|
"merge-stream": "^1.0.0",
|
||||||
"path-exists-cli": "^1.0.0",
|
"path-exists-cli": "^1.0.0"
|
||||||
"run-sequence": "^2.1.0"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "gulp",
|
"start": "gulp serve",
|
||||||
"prepare": "gulp prepare",
|
"prepare": "gulp prepare",
|
||||||
"archive": "gulp archive",
|
"archive": "gulp archive",
|
||||||
"publish": "gulp publish",
|
"publish": "gulp publish",
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 181 KiB After Width: | Height: | Size: 168 KiB |
Binary file not shown.
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 94 KiB |
Loading…
Reference in New Issue