Remove Sass and replace with Pleeease

This commit removes Sass support from the project and adds Pleeease as a
CSS post-processor.

Preprocessors do have a couple of problems:
* CSS is meant to be declarative. Preprocessors add a lot of functions
to it that are not easy to understand and require higher level thinking.
Logicless-ness makes CSS simple.
* Specificity is often problematic (e.g. with deep nesting).
* People that are not used to one or the other preprocessor are left
behind. Everyone knows CSS.

Reference: #123.

.gitignore

@@ -4,7 +4,6 @@
 *.sass-cache
 *.sublime-*
 
-src/css
 dist
 bower_components
 node_modules

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog
 
 ### HEAD
+
+* Remove Sass and replace with Pleeease
 * Update karma tasks to better reflect actual propose
 * Copy files that are needed in dest via grunt copy
 * Use grunt-sass with libsass for speed

Gruntfile.js

@@ -57,7 +57,7 @@ module.exports = function (grunt) {
 
   grunt.registerTask('dev', [
     'jshint',
-    'sass:dev',
+    'pleeease:dev',
     'copy',
     'requirejs',
     'pages:dev'
@@ -72,7 +72,7 @@ module.exports = function (grunt) {
   grunt.registerTask('build', [
     'jshint',
     'modernizr',
-    'sass:build',
+    'pleeease:build',
     'imagemin',
     'copy',
     'requirejs',

README.md

@@ -2,7 +2,7 @@
 
 This project is based upon
 [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) and adds more
-structure for SCSS and JavaScript files, includes build tasks and a whole lot
+structure for CSS and JavaScript files, includes build tasks and a whole lot
 more.
 
 [![Build Status](https://secure.travis-ci.org/use-init/init.svg?branch=master)](http://travis-ci.org/use-init/init)
@@ -62,17 +62,11 @@ your knowledge.
 
 ## CSS
 
-We are currently working with [Sass](http://sass-lang.com/) (in its dialect
-SCSS) and do not use CSS directly. Please do not edit the CSS-files in any case
-but search the corresponding `.scss` file and edit it accordingly. If you are
-not familiar with SCSS you can write pure CSS which is actually valid SCSS.
-
-However all `.scss`-files are compiled into one file called `main.css` in the
-`css`-folder. There is a productive-version (means minified), too.
-
-You can find more information about the installation process of Sass and the
-usage of SCSS in the [Sass Tutorial](http://sass-lang.com/tutorial.html).
+We are use vanilla CSS but enhance the experience using
+[Pleeease](http://pleeease.io/) as a post processor.
 
+However all `.css`-files are compiled into one file called `main.css` in the
+`dist`-folder. There is a productive-version (means minified), too.
 
 ## JS
 

bower.json

@@ -3,9 +3,7 @@
   "version": "1.3.0",
   "dependencies": {
     "jquery": "1.11.1",
-    "normalize-scss": "3.0.1",
     "modernizr": "2.8.3",
-    "requirejs": "2.1.15",
-    "sass-mixins": "0.11.0"
+    "requirejs": "2.1.15"
   }
 }

docs/TOC.md

@@ -9,7 +9,7 @@
 
 * [Toolchain](toolchain.md) — The tools we use: GruntJS, Bower, RequireJS.
 * [HTML5 Boilerplate](html5-boilerplate.md) — More about the famous front-end template.
-* [SCSS](scss.md) — How to use SCSS in INIT.
+* [CSS](css.md) — How to use CSS in INIT.
 * [JavaScript](js.md) — A guide to the default JavaScript with RequireJS.
 * [Build process](grunt.md) - A detailed guide to the GruntJS configs.
 * [Testing](tests.md) — How to test your code with INIT.

docs/css.md

@@ -0,0 +1,70 @@
+[« back to Table of Contents](TOC.md)
+
+
+# CSS
+
+INIT uses [Pleeease](http://pleeease.io/) as a CSS post processor which enables
+you to write straightforward CSS.
+
+Here are the major selling points:
+
+* Pleeease adds prefixes, based on Autoprefixer
+* It provides fallbacks for rem unit, CSS3 pseudo-elements notation
+* It adds opacity filter for IE8
+* It converts CSS shorthand filters to SVG equivalent
+* It packs same media-query in one @media rule
+* It inlines @import styles
+* It minifies the result
+* It enables you to use custom properties (variables)
+* It has some color functions for you
+
+In INIT we modularize our styles in several components.
+Most of the files contain some raw styles or example code so you can just view
+the files to understand what they are thought for. Surely you can adapt the
+files and contents of the files to your own project-style.
+
+## Concatenation
+
+As we use several single CSS-files they need to be concatenated for usage in
+your project. This is done by the CSS `@import` rule within the
+[`src/css/main.css`](../src/css/main.css) file. As you can see you just type the
+folder and name of the file to import it. Please be aware that you must use the
+path from the root directory.
+
+Notice: Don't forget to import a file in `main.css` if you created a new one in
+the CSS structure so it will be added to the output file you use in your
+project.
+
+## CSS Output
+
+You kick-off the post processor with grunt. To continuously generating the CSS
+file on every change you do, run:
+
+	grunt watch
+
+This runs the `watch` task with grunt which compiles your CSS. The watch task
+outputs a non-minified annotated CSS file which is great for development.
+
+To get a compressed, production ready CSS file simply run the following command:
+
+	grunt build
+
+See the [documentation about grunt](grunt.md) for more information about this
+task.
+
+## Preprocessors
+
+We believe the CSS platform offers you everything that is needed to craft great
+on-line experiences. CSS preprocessors such as LESS or Sass add a lot of value
+for programmers. But there are some pain points which we think make it hard to
+use these preprocessors.
+
+* CSS is meant to be declarative. Preprocessors add a lot of functions to it
+  that are not easy to understand and require higher level thinking. Logicless-
+  ness makes CSS simple.
+* Specificity is often problematic (e.g. with deep nesting).
+* People that are not used to one or the other preprocessor are left behind.
+  Everyone knows CSS.
+
+Our post-processor enables you to use variables (known as custom properties),
+color functions and takes care of vendor prefixing.

docs/faq.md

@@ -4,18 +4,29 @@
 
 ## General
 
-If you need assistance with the INIT project please have a look at the [README](../README.md) and documenation ([TOC.md](TOC.md)) first. If you can't find a solution there, please [create an issue on GitHub](https://github.com/use-init/init/issues) and provide all details necessary to reproduce your problem.
+If you need assistance with the INIT project please have a look at the
+[README](../README.md) and documenation ([TOC.md](TOC.md)) first. If you can't
+find a solution there, please
+[create an issue on GitHub](https://github.com/use-init/init/issues) and provide
+all details necessary to reproduce your problem.
 
 ## FAQ
 
 ### I am having issues with Grunt aborting the task
 
-It is likely [JSHint](http://www.jshint.com/) encountered problems in your code. Ensure you stick to the [`.jshintrc`](../.jshintrc) configuration (or change it as you need it) and check again if the JSHint task outputs any warnings or errors.
+It is likely [JSHint](http://www.jshint.com/) encountered problems in your code.
+Ensure you stick to the [`.jshintrc`](../.jshintrc) configuration (or change it
+as you need it) and check again if the JSHint task outputs any warnings or
+errors.
 
-You might also make sure that all dependencies are installed propertly. Please [see the Usage section](usage.md) for more information.
+You might also make sure that all dependencies are installed propertly. Please
+[see the Usage section](usage.md) for more information.
 
-Also if you added new Sass files ensure you add them not only as files but also in [`main.scss`](../scss/main.scss) as import with the proper name.
+Also if you added new CSS files ensure you add them not only as files but also
+in [`main.css`](../src/css/main.css) as import with the proper name.
 
 ### I am getting a warning about `.jshintrc` config.
 
-You might have forgotten to copy the hidden files in your working directory. Ensure you have `.jshintrc`, `.htaccess`, `editorconfig`, `.gitattributes`, `.gitignore` and `.travis.yml` in the root of your INIT project folder.
+You might have forgotten to copy the hidden files in your working directory.
+Ensure you have `.jshintrc`, `.htaccess`, `editorconfig`, `.gitattributes`,
+`.gitignore` and `.travis.yml` in the root of your INIT project folder.

docs/grunt.md

@@ -11,7 +11,7 @@ tasks you need for development and deployment of a web project.
 * [grunt-contrib-clean](https://github.com/gruntjs/grunt-contrib-clean) cleans your build directory before doing a new build
 * [grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy) copies files from the development directories into the build directory
 * [grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch) watches files for changes
-* [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass) runs the Sass task and builds the CSS files
+* [grunt-pleeease](https://github.com/danielhusar/grunt-pleeease) runs the Pleeease task and builds the CSS files
 * [grunt-contrib-requirejs](https://github.com/gruntjs/grunt-contrib-requirejs) runs requireJS and builds the JS files
 * [grunt-modernizr](https://github.com/Modernizr/grunt-modernizr) builds a custom Modernizr build based on your used tests
 * [grunt-contrib-connect](https://github.com/gruntjs/grunt-contrib-connect) runs a static web server with root on your working directory
@@ -44,7 +44,7 @@ For development you can run Grunt initially once by calling:
 
 	$ grunt
 
-To listen continuously to changes you do in files (e.g. Sass) you can type:
+To listen continuously to changes you do in files (e.g. CSS) you can type:
 
 	$ grunt watch
 

docs/html.md

@@ -18,18 +18,6 @@ To target specific older Internet Explorer versions (up to IE9) we provide you C
 		// add IE8 (and lower) specific styles here
 	}
 
-The last statement can also be simplified using Sass language by including it in your original statement:
-
-	.yourclass {
-		// your normal styles for all browsers
-
-		.lt-ie9 & {
-			// add IE8 (and lower) specific styles here
-		}
-	}
-
-Interpreted by Sass this will generate the same output as the example above except this is better readable in the original Sass file.
-
 ## `<head>` Explanations
 
 In the `<head>` section we included some default markup which you might want to extend. Here are some tipps about what is added and what you can do.

docs/usage.md

@@ -2,30 +2,28 @@
 
 # General Purpose
 
-Init is a project based upon HTML5 Boilerplate. It adds more structure to your SCSS and JavaScript files and helps you start your project faster by reducing boilerplate code and tasks.
-Init includes build tasks for your projects, proivdes a test infrastructure and implements tools to help you creating web pages and apps fast.
+Init is a project based upon HTML5 Boilerplate. It adds more structure to your
+CSS and JavaScript files and helps you start your project faster by reducing
+boilerplate code and tasks.
+
+Init includes build tasks for your projects, proivdes a test infrastructure and
+implements tools to help you creating web pages and apps fast.
 
 # Starting Point
 
-When starting a new project with init you will need to make sure to install some dependencies if you haven't already.
+When starting a new project with init you will need to make sure to install some
+dependencies if you haven't already.
 
 ## Clone the project
 
 	$ git clone [email protected]:use-init/init.git
 
-This will create a local clone of init in a subfolder called 'init' in the directory you choose before in the command line. You can rename the folder name.
+This will create a local clone of INIT in a subfolder called 'init' in the
+directory you choose before in the command line. You can rename the folder name.
 
 ## Dependencies
 
-### Majors:
-
 * Node.js
-* Ruby
-
-#### Secondaries:
-
-* npm (comes with node)
-* Sass (Ruby gem: `$ gem install sass`)
 
 Apart from that we make use of GruntJS and you might want to install it globally via:
 

grunt/config.js

@@ -33,13 +33,13 @@ module.exports = {
     dest: 'dist/<%= pkg.version %>/main.min.js'
   },
 
-  // Sass files
-  sass: {
+  // CSS files
+  css: {
     files: [
-      'src/scss/**/*.scss'
+      'src/css/**/*.css'
     ],
-    src: 'src/scss/main.scss',
-    devDest: 'src/css/main.css',
+    src: 'src/css/main.css',
+    devDest: 'dist/css/main.css',
     dest: 'dist/<%= pkg.version %>/main.min.css'
   },
 

grunt/options/modernizr.js

@@ -20,7 +20,7 @@ module.exports = {
 
     // Files from configuration
     files: {
-      src: config.js.files.concat(config.sass.files)
+      src: config.js.files.concat(config.css.files)
     }
   }
 };

grunt/options/pleeease.js

@@ -0,0 +1,47 @@
+/**
+ * CSS
+ */
+'use strict';
+
+var config = require('../config');
+
+/*
+ * Helper
+ */
+var helper = {};
+
+helper.cssDev = {};
+helper.cssDev[config.css.devDest] = config.css.src;
+
+helper.cssProd = {};
+helper.cssProd[config.css.dest] = config.css.src;
+
+module.exports = {
+
+  // For development
+  dev: {
+    options: {
+      minifier: false,
+      next: {
+        customProperties: true,
+        colors: true
+      },
+      sourcemaps: true
+    },
+
+    files: helper.cssDev
+  },
+
+  // For production
+  build: {
+    options: {
+      next: {
+        customProperties: true,
+        colors: true
+      },
+      sourcemaps: true
+    },
+
+    files: helper.cssProd
+  }
+};