Structuring

.idea/watcherTasks.xml

@@ -2,21 +2,40 @@
 <project version="4">
   <component name="ProjectTasksOptions">
     <TaskOptions isEnabled="true">
-      <option name="arguments" value="--no-cache --update $FileName$:$FileNameWithoutExtension$.css" />
+      <option name="arguments" value="--no-cache --update $FileName$:$FileNameWithoutExtension$.css.tmp" />
       <option name="checkSyntaxErrors" value="true" />
       <option name="description" value="Compiles .scss files into .css files" />
       <option name="exitCodeBehavior" value="ERROR" />
       <option name="fileExtension" value="scss" />
       <option name="immediateSync" value="true" />
       <option name="name" value="SCSS" />
-      <option name="output" value="$FileNameWithoutExtension$.css" />
+      <option name="output" value="$FileNameWithoutExtension$.css.tmp" />
       <option name="outputFilters">
         <array />
       </option>
       <option name="outputFromStdout" value="false" />
       <option name="program" value="C:/Ruby23-x64/bin/scss.bat" />
       <option name="scopeName" value="Project Files" />
-      <option name="trackOnlyRoot" value="true" />
+      <option name="trackOnlyRoot" value="false" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="--use autoprefixer $FileName$ -o $FileNameWithoutExtension$" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" value="" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="*" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="Autoprefixer" />
+      <option name="output" value="$FileNameWithoutExtension$" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="$USER_HOME$/AppData/Roaming/npm/postcss.cmd" />
+      <option name="scopeName" value="css.tpm" />
+      <option name="trackOnlyRoot" value="false" />
       <option name="workingDir" value="$FileDir$" />
       <envs />
     </TaskOptions>

Gemfile

@@ -1,3 +0,0 @@
-source :rubygems
-
-gem "autoprefixer-rails"

framework.css

@@ -1,3 +1,100 @@
 /* Simons SCSS Framework */
+/* Basic CSS Functions */
+@CHARSET "ISO-8859-1";
+/* RESET
+
+  SOURCE:
+   http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0 !important; }
+
+/* Layout */
+/* Queries */
+/*
+
+CONSTANTS
+
+*/
+/*
+
+Widths
+
+*/
+/*
+
+Queries
+
+*/
+/*
+
+QUERY-BUILDER
+
+*/
+/* FX / Effects */
+/* CONSTANTS */
+/* MIXINS */
+/* Manual Test Content */
+body {
+  -webkit-filter: blur(10px);
+          filter: blur(10px);
+  -webkit-filter: blur(10);
+          filter: blur(10); }
+  body:-webkit-full-screen a {
+    display: -webkit-box;
+    display: flex; }
+  body:-moz-full-screen a {
+    display: flex; }
+  body:-ms-fullscreen a {
+    display: -ms-flexbox;
+    display: flex; }
+  body:fullscreen a {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; }
+  body a {
+    -webkit-transform: scale(1.1);
+            transform: scale(1.1);
+    width: 99%; }
 
 /*# sourceMappingURL=framework.css.map */

framework.css.map

@@ -1,7 +1 @@
-{
+{"version":3,"sources":["framework.scss","mixins/css/_reset.scss","mixins/queries/_media-queries.scss","mixins/fx/_camera.scss","mixins/css/_filters.scss"],"names":[],"mappings":"AACA,2BAA2B;AAC3B,yBAAyB;ACFzB,sBAAqB;AAErB;;;;;;;EAOE;AAEF;;;;;;;;;;;;;EAaE,UAAS;EACT,WAAU;EACV,UAAS;EACT,gBAAe;EACf,cAAa;EACb,yBAAwB,EAAA;;AAG1B,iDAAiD;AACjD;;EAEE,eAAc,EAAA;;AAGhB;EACE,iBAAgB,EAAA;;AAGlB;EACE,aAAY,EAAA;;AAGd;;EAEE,YAAW;EACX,cAAa,EAAA;;AAGf;EACE,0BAAyB;EACzB,6BAA4B,EAAA;;ADjD9B,YAAY;AAEZ,aAAa;AEPb;;;;EAIE;AAMF;;;;EAIE;AAOF;;;;EAIE;AAsCF;;;;EAIE;AF1DF,kBAAkB;AGTlB,eAAe;AAaf,YAAY;AHAZ,yBAAyB;AACzB;EACE,2BAAkB;UAAlB,mBAAkB;EIdlB,yBAAoB;UAApB,iBAAoB,EAAA;EJiBpB;IACE,qBAAa;IAAb,cAAa,EAAA;EADf;IACE,cAAa,EAAA;EADf;IACE,qBAAa;IAAb,cAAa,EAAA;EADf;IACE,qBAAa;IAAb,qBAAa;IAAb,cAAa,EAAA;EAEf;IACE,8BAAqB;YAArB,sBAAqB;IACrB,WAAS,EAAA","file":"framework.css"}
-"version": 3,
-"mappings": "AAAA,2BAA2B",
-"sources": ["framework.scss"],
-"names": [],
-"file": "framework.css"
-}

framework.scss

@@ -1,13 +1,26 @@
-/* Simons SCSS Framework */
 
+/* Simons SCSS Framework */
 /* Basic CSS Functions */
 @import "mixins/css/reset";
-
+@import "mixins/css/filters";
 /* Layout */
 @import "mixins/layout/layout";
-
 /* Queries */
 @import "mixins/queries/media-queries";
-
 /* FX / Effects */
 @import "mixins/fx/camera";
+
+
+/* Manual Test Content */
+body {
+  filter: blur(10px);
+  @include blur(10);
+
+  &:fullscreen a {
+    display: flex;
+  }
+  a {
+    transform: scale(1.1);
+    width:99%;
+  }
+}

mixins/css/_filters.scss

@@ -0,0 +1,3 @@
+@mixin blur($pixel){
+  filter: blur($pixel);
+}

mixins/fx/_camera.scss

@@ -18,7 +18,7 @@ $BACKWARD:3;
 /// @param {int} $direction
 /// @param {int} $direction
 
-@mixin camera-focus($direction,$seconds:0.5,$pixels,$performance:0) {
+@mixin camera-focus($direction,$seconds:0.5,$pixels:10,$performance:0) {
   /* Camera Focus Effect */
   filter: blur($pixels);