Merge pull request #87 from m1/test-suite

Add test sheet

README.md

@@ -139,5 +139,6 @@ Filters are really fun to create! Reference photos created by [Miles Croxford](h
 - `source/css/cssgram.css` contains each of the css classes you can apply to your `<img>` to give it the filter. You should use `source/css/cssgram.min.css` for production if you want access to all of the
 - `source/scss/` contains the source files for individual classes and placeholder selectors you can use to extend CSS classes in Sass
 - site is the public facing website
+- site/test is the how you test filters if you're developing, remember to change is_done for the filter you're creating in site/test/index.twig whilst gulp is running.
 
 Note: this will also have mixin options and a PostCSS Component.

gulpfile.js

@@ -15,7 +15,8 @@ var gulp        = require('gulp'),
     plumber     = require('gulp-plumber'),
     deploy      = require('gulp-gh-pages'),
     notify      = require('gulp-notify'),
-    sassLint    = require('gulp-sass-lint');
+    sassLint    = require('gulp-sass-lint'),
+    twig        = require('gulp-twig');
 
 
 gulp.task('lib-scss', function() {
@@ -79,36 +80,31 @@ gulp.task('deploy', function () {
         .pipe(deploy());
 });
 
-
 gulp.task('sass-lint', function () {
   gulp.src('scss/**/*.scss')
     .pipe(sassLint())
     .pipe(sassLint.format())
     .pipe(sassLint.failOnError());
 });
 
+gulp.task('twig', function () {
+  gulp.src('site/**/*.twig', {base: './'})
+    .pipe(twig())
+    .pipe(gulp.dest('./'));
+});
+
+
 gulp.task('watch', function() {
   gulp.watch('source/scss/**/*.scss', ['scss', 'sass-lint']);
   gulp.watch('source/scss/**/*.html', ['minify-html']);
+  gulp.watch('site/**/*.twig', ['twig']);
 });
 
-gulp.task('minify-html', function() {
-    var opts = {
-      comments:true,
-      spare:true
-    };
-
-  gulp.src('./*.html')
-    .pipe(minifyHTML(opts))
-    .pipe(gulp.dest('dist/'))
-    .pipe(reload({stream:true}));
-});
 
 gulp.task('jshint', function() {
   gulp.src('js/*.js')
     .pipe(jshint())
     .pipe(jshint.reporter('default'));
 });
 
-
-gulp.task('default', ['browser-sync', 'minify-html', 'lib-scss', 'site-scss', 'watch']);
+gulp.task('default', ['browser-sync', 'twig', 'lib-scss', 'site-scss', 'watch']);

package.json

@@ -35,6 +35,7 @@
     "gulp-sass-lint": "0.1.0-beta.2",
     "gulp-size": "^1.2.0",
     "gulp-uglify": "^1.0.2",
-    "imagemin-pngquant": "^4.0.0"
+    "imagemin-pngquant": "^4.0.0",
+    "gulp-twig": "~0.4.0"
   }
 }

site/index.html

@@ -23,17 +23,17 @@
     <h2 class="title--top-sub">A tiny (&lt;1kb gzipped!) library for recreating <a href="http://instagram.com">Instagram</a> filters with CSS filters and blend modes.</h2>
   </section>
 
+
   <section class="demo__section">
     <div class="demo__input-area">
-
       <fieldset class="demo__option-field">
         <legend>Choose a sample image:</legend>
-          <img class="demo__option-img" src="img/atx.jpg" alt="austin image">
-          <img class="demo__option-img" src="img/cacti.jpg" alt="cacti image">
-          <img class="demo__option-img" src="img/tahoe.jpg" alt="tahoe image">
-          <img class="demo__option-img" src="img/bike.jpg" alt="bike image">
-          <img class="demo__option-img" src="img/lakegeneva.jpg" alt="lake geneva image">
-        <br>
+                  <img class="demo__option-img" src="img/atx.jpg" alt="atx image">
+                <img class="demo__option-img" src="img/bike.jpg" alt="bike image">
+                <img class="demo__option-img" src="img/cacti.jpg" alt="cacti image">
+                <img class="demo__option-img" src="img/lakegeneva.jpg" alt="lakegeneva image">
+                <img class="demo__option-img" src="img/tahoe.jpg" alt="tahoe image">
+              <br>
         <label class="demo__input-label">
           Or paste in a link to your own photo:
           <input class="demo__input-img" type="text">