Demo page update + add npm + gulp for Sass and Autoprefixer

gorork · Oct 1, 2015 · 88f380e · 88f380e
1 parent 5890f2f
commit 88f380e
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 9 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 bower_components
+node_modules
diff --git a/README.md b/README.md
@@ -20,6 +20,10 @@ Here is an example of code to add a Paper-Audio-Player element to your page:
 
 ## Install
 
+Install the component using [NPM](https://www.npmjs.com):
+
+    npm install paper-audio-player --save
+
 Install the component using [Bower](http://bower.io/):
 
     bower install paper-audio-player --save
@@ -86,6 +90,15 @@ And you can run it via:
 Once running, you can preview your element at
 `http://localhost:8080/components/paper-audio-player/`
 
+To work with Demo page styling with Sass, install grunt and its plugins:
+
+    npm install
+
+After you made any changes, create new CSS file:
+
+    gulp
+
+This will convert Sass into CSS and run [Autoprefixer](https://autoprefixer.github.io/).
 
 ## Contributing
 

diff --git a/demo/index.html b/demo/index.html
@@ -3,19 +3,23 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-    <title>Paper-Audio-Player Demo</title>
+    <title>Paper Audio Player</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="../../paper-audio-player/paper-audio-player.html">
-
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">
     <link rel="stylesheet" href="demo.css">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../paper-audio-player.html">
+
   </head>
   <body>
+  <div id="header">
+    <h1>Flat Audio Player</h1>
+    <h3>Open source custom audio element built with Polymer 1.0. Grab it on <a href="https://github.com/gorork/paper-audio-player" target="_blank">Github</a>!</h3>
+  </div>
+
     <!-- row -->
     <div class="row image">
-      <h1>Flat Audio Player demo</h1>
       <paper-audio-player src="http://nadikun.com/audio/suit-and-tie-oscar-wylde-remix.mp3"
                           color="#F05C38"
                           title="Justin Timberlake - Suit & Tie (Oscar Wylde Remix)"></paper-audio-player></div>
@@ -32,7 +36,7 @@ <h1>Flat Audio Player demo</h1>
       <div class="col">
         <paper-audio-player src="http://nadikun.com/audio/noclique-day2.wav"
                             color="#90D9D6"
-                            title="Noclique - Day 2"></paper-audio-player></div>
+                            title="Loons - Day 2"></paper-audio-player></div>
     </div>
 
     <!-- row -->
@@ -44,7 +48,10 @@ <h1>Flat Audio Player demo</h1>
     </div>
 
   <!-- footer -->
-  <p class="footer">&copy; 2015 Created by <a href="http://nadikun.com">Nadi Dikun</a>. Open source Polymer 1.0 element, grab it <a
-      href="https://github.com/gorork/paper-audio-player" target="_blank">here</a>.</p>
+    <div id="footer">
+      <p>&copy; 2015 Paper-Audio-Player Created by <a href="http://nadikun.com">Nadi Dikun</a>. Open source Polymer 1.0 element, grab it <a
+          href="https://github.com/gorork/paper-audio-player" target="_blank">Github</a>.</p>
+      <p>All audio tracks belong to their respective owners and were shared on this webpage under Creative Common License.</p>
+    </div>
   </body>
 </html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,20 @@
+var gulp = require('gulp');
+var autoprefixer = require('gulp-autoprefixer');
+var sass = require('gulp-sass');
+
+gulp.task('sass', function () {
+  gulp.src('demo/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(gulp.dest('demo'));
+});
+
+gulp.task('autoprefixer', function () {
+  return gulp.src('demo/demo.css')
+    .pipe(autoprefixer({
+      browsers: ['> 1%'],
+      cascade: false
+    }))
+    .pipe(gulp.dest('demo'));
+});
+
+gulp.task('default', ['sass', 'autoprefixer']);
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "paper-audio-player",
+  "version": "0.0.1",
+  "description": "A custom audio player with material paper style and clean design.",
+  "main": "paper-audio-player.html",
+  "directories": {
+    "demo": "demo"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gorork/paper-audio-player.git"
+  },
+  "keywords": [
+    "web-component",
+    "web-components",
+    "polymer",
+    "audio",
+    "player",
+    "paper",
+    "material",
+    "minimalistic"
+  ],
+  "author": "Nadi Dikun <dikunn@gmail.com> (http://nadikun.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gorork/paper-audio-player/issues"
+  },
+  "homepage": "http://nadikun.com/code/paper-audio-player/demo",
+  "devDependencies": {
+    "bower": "^1.5.3",
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^3.0.2",
+    "gulp-sass": "^2.0.4"
+  }
+}