add gulp workflow #147

.gitignore

@@ -0,0 +1 @@
+node_modules

gulpfile.js

@@ -0,0 +1,29 @@
+const gulp = require('gulp')
+const browserSync = require('browser-sync').create()
+const postcss = require('gulp-postcss')
+const sourcemaps = require('gulp-sourcemaps')
+const cssnext = require('postcss-cssnext')
+
+gulp.task('css', function () {
+  const processors = [cssnext()]
+  return gulp.src('./src/css/*.css')
+    .pipe(sourcemaps.init())
+    .pipe(postcss(processors))
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest('./'))
+    .pipe(browserSync.reload({stream: true}))
+})
+
+gulp.task('browser-sync', () => {
+  browserSync.init({
+    server: './',
+    browser: 'firefox'
+  })
+})
+
+gulp.task('watch', ['css'], () => {
+  gulp.watch('**/*.html', browserSync.reload)
+  gulp.watch('**/*.css', ['css'])
+})
+
+gulp.task('default', ['watch', 'browser-sync'])

index.html

@@ -4,7 +4,7 @@
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 	<title>CSSS: A brief introduction</title>
-	
+
 	<link href="slideshow.css" rel="stylesheet" />
 	<link href="theme.css" rel="stylesheet" />
 	<link href="talk.css" rel="stylesheet" />
@@ -24,7 +24,7 @@ <h1>
 	<header class="slide">
 		<h1>Introduction</h1>
 	</header>
-	
+
 	<section class="slide" title="CSSS: Introduction">
 		<h2>What is it?</h2>
 		<p>A simple framework for building presentations with modern web standards</p>
@@ -34,7 +34,7 @@ <h2>What is it?</h2>
 			<li class="delayed">JavaScript handles what CSS can't (keyboard shortcuts etc)</li>
 		</ul>
 	</section>
-	
+
 	<section class="slide">
 		<h2>History</h2>
 		<ul>
@@ -45,7 +45,7 @@ <h2>History</h2>
 			<li class="delayed">and here it is! ;-)</li>
 		</ul>
 	</section>
-	
+
 	<section class="slide" id="navigation">
 		<h2>Navigation</h2>
 		<p>Only through keyboard for now :(</p>
@@ -65,13 +65,13 @@ <h2>Navigation</h2>
 	<header class="slide">
 		<h1>Features</h1>
 	</header>
-	
+
 	<section class="slide">
 		<h2>Thumbnail view</h2>
 		<p>Press Ctrl+H (or Shift+H if you're in Opera) now.</p>
 		<p class="delayed">Cool, huh? You can press Ctrl+Shift+H to see all slides (warning: can be slow!)</p>
 	</section>
-	
+
 	<section class="slide">
 		<h2>Timer</h2>
 		<ul>
@@ -80,13 +80,13 @@ <h2>Timer</h2>
 			<li>Style the timer and the end state with the selectors <code>#timer</code> and <code>#timer.end</code> respectively.</li>
 		</ul>
 	</section>
-	
+
 	<section class="slide">
 		<h2>Presenter view</h2>
 		<p>This slide has presenter notes. They are only visible in presenter view (Ctrl+P or Shift+P).</p>
 		<p class="presenter-notes">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 deserunt mollit anim id est laborum.</p>
 	</section>
-	
+
 	<section class="slide">
 		<style scoped>
 			h2 {
@@ -98,7 +98,7 @@ <h2><code>&lt;style scoped /&gt;</code></h2>
 		<p>You can use the HTML5 <code>scoped</code> attribute on style elements in slides, to only style the current slide or inside sections that include multiple slides to style all of them and nothing else.</p>
 		<p>For example, inspect this slide and then run <code>$$('style[scoped]')[0].sheet.cssRules[0].selectorText</code> in the console to see how the original selector gets changed.</p>
 	</section>
-	
+
 	<section class="slide">
 		<h2>More features</h2>
 		<ul>
@@ -109,14 +109,14 @@ <h2>More features</h2>
 			<li class="delayed">Document.title changing according to slide title (fetched either from the <code>title</code> attribute or the slide's heading)</li>
 		</ul>
 	</section>
-	
+
 	<section class="slide">
 		<h2>Drawbacks</h2>
 		<ul>
 			<li>Only supports modern browsers. Why?
 				<ul>
 					<li>More lightweight</li>
-					<li>Easier to understand code</li>	
+					<li>Easier to understand code</li>
 					<li>It's a presentation, so the environment is controlled anyway</li>
 				</ul>
 			</li>
@@ -130,7 +130,7 @@ <h2>Drawbacks</h2>
 	<header class="slide">
 		<h1>Plugins</h1>
 	</header>
-	
+
 	<section class="slide">
 		<h2>Plugin: CSS Snippets</h2>
 		<pre>new CSSSnippet(document.getElementById('snippet'));</pre>
@@ -147,14 +147,14 @@ <h2>Plugin: CSS Snippets</h2>
 			<li>Textarea automatically adjusts rows/font-size on line break (use class <code>dont-adjust</code> to turn off)</li>
 		</ul>
 	</section>
-	
+
 	<section class="slide">
 		<h2>CSS Snippets demo</h2>
 		<p>Edit the following CSS code:</p>
 		<textarea class="snippet">background-color:red;
 background-image: linear-gradient(red, #600)</textarea>
 	</section>
-	
+
 	<section class="slide" id="animation-demo">
 		<h2>CSS Snippets: raw CSS</h2>
 		<textarea class="snippet" data-raw>@keyframes rainbow {
@@ -168,7 +168,7 @@ <h2>CSS Snippets: raw CSS</h2>
 
 #animation-demo { animation: 30s rainbow infinite; }</textarea>
 	</section>
-	
+
 	<section class="slide">
 		<h2>Plugin: CSS Controls</h2>
 		<ul>
@@ -180,10 +180,10 @@ <h2>Plugin: CSS Controls</h2>
 			<li>Automatically prefixes CSS3 properties/values, when needed</li>
 		</ul>
 	</section>
-	
+
 	<section class="slide" id="css-controls-demo">
 		<h2>CSS Controls demo</h2>
-		<label>Slide lightness: 
+		<label>Slide lightness:
 			<input type="range" min="0" max="255" value="128" data-style="background-color:rgb({value}, {value}, {value});" class="css-control" />
 		</label>
 		<label>
@@ -200,7 +200,7 @@ <h2>CSS Controls demo</h2>
 			</select>
 		</label>
 	</section>
-	
+
 	<section class="slide">
 		<h2>Plugin: Code highlight</h2>
 		<ul>
@@ -210,13 +210,13 @@ <h2>Plugin: Code highlight</h2>
 			<li>Styling done through easy to understand classes like <code>.string</code> or <code>.comment</code></li>
 		</ul>
 	</section>
-	
+
 	<section class="slide">
 		<h2>Code highlight example</h2>
 		<pre><code lang="javascript">// Comment
 document.addEventListener('DOMAttrModified',function(e) {
   var node = e.target, attr = e.attrName;
-  if(/^input$/i.test(node.nodeName) 
+  if(/^input$/i.test(node.nodeName)
     &amp;&amp; (attr === 'placeholder' || attr === 'value')
     || foo > 5)
       Placeholder.update(node);
@@ -252,6 +252,6 @@ <h2>Thank you!</h2>
 	new CSSControl(cssControls[i]);
 }
 </script>
-	
+
 </body>
 </html>

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "csss",
+  "version": "6.2.0",
+  "description": "Warning: Only works in latest Firefox, Opera, Safari or Chrome. For more information, see the [sample slideshow](http://lea.verou.me/csss/sample-slideshow.html)",
+  "main": "classList.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zellwk/csss.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/zellwk/csss/issues"
+  },
+  "homepage": "https://github.com/zellwk/csss#readme",
+  "devDependencies": {
+    "browser-sync": "^2.16.0",
+    "gulp": "^3.9.1",
+    "gulp-postcss": "^6.2.0",
+    "gulp-sourcemaps": "^1.6.0",
+    "postcss-cssnext": "^2.8.0"
+  }
+}