Structuring

.idea/misc.xml

@@ -13,8 +13,4 @@
     <ConfirmationsSetting value="0" id="Add" />
     <ConfirmationsSetting value="0" id="Remove" />
   </component>
-  <component name="VagrantProjectSettings">
-    <option name="instanceFolder" value="" />
-    <option name="provider" value="" />
-  </component>
 </project>

.idea/vagrant.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VagrantProjectSettings">
+    <option name="instanceFolder" value="" />
+    <option name="provider" value="" />
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

Gemfile

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

examples/example.scss

@@ -0,0 +1 @@
+@import "../framework";

framework.scss

@@ -1 +1,13 @@
-/* Simons SCSS Framework */
+/* Simons SCSS Framework */
+
+/* Basic CSS Functions */
+@import "mixins/css/reset";
+
+/* Layout */
+@import "mixins/layout/layout";
+
+/* Queries */
+@import "mixins/queries/media-queries";
+
+/* FX / Effects */
+@import "mixins/fx/camera";

mixins/fx/camera.scss

@@ -0,0 +1,28 @@
+/* CONSTANTS */
+
+$ZOOM-IN: 0;
+$ZOOM-OUT: 1;
+
+$FOCUS-IN: 0;
+$FOCUS-OUT: 1;
+
+$LINEAR:0;
+$EASE:1;
+$EASEINOUT:2;
+$BACKWARD:3;
+
+/* MIXINS */
+
+/// Gives the Element a focusing Effect
+/// @param {int} $direction
+/// @param {int} $direction
+/// @param {int} $direction
+
+@mixin camera-focus($direction,$seconds:0.5,$pixels,$performance:0) {
+  /* Camera Focus Effect */
+  filter: blur($pixels);
+
+}
+@mixin camera-shake (){}
+
+@mixin camera-zoom (){}

mixins/layout/layout.scss

@@ -4,7 +4,7 @@
 
   /* Positioning */
   position: relative;
-  display: inline-block;
+  display: inline-table;
   /* Sizing */
   box-sizing: border-box;
   //width: (100%/$columns) - (0.3 + ($columns * 0.3));

mixins/queries/_01-mixins-media-queries.scss

@@ -1,46 +0,0 @@
-/*
-
-Widths
-
-*/
-
-$phone-width: 480px;
-$tablet-width: 768px;
-$notebook-width: 1024px;
-$desktop-width: 1280px;
-
-/*
-
-Queries
-
-*/
-@mixin phone {
-  @media(max-width: $tablet-width) {
-    @content
-  }
-}
-
-@mixin tablet {
-  @media /*(min-width: $tablet-width) and*/
-  (max-width: $notebook-width) {
-    @content
-  }
-}
-
-@mixin notebook {
-  @media(min-width: $notebook-width) and (max-width: $desktop-width) {
-    @content
-  }
-}
-
-@mixin desktop {
-  @media(min-width: $desktop-width) {
-    @content
-  }
-}
-
-@mixin print {
-  @media print {
-    @content
-  }
-}

mixins/queries/media-queries.scss

@@ -0,0 +1,91 @@
+/*
+
+CONSTANTS
+
+*/
+
+$UPWARDS-OPEN: 2;
+$DOWNWARDS-OPEN: 1;
+$LIMITED: 0;
+
+/*
+
+Widths
+
+*/
+
+$phone-width: 480px;
+$tablet-width: 768px;
+$notebook-width: 980px;
+$desktop-width: 1280px;
+
+/*
+
+Queries
+
+*/
+
+@mixin small-phone($direction:0) {
+  @include querybuilder(0, $phone-width, $direction) {
+    @content
+  }
+}
+
+@mixin phone($direction:0) {
+  @include querybuilder($phone-width, $tablet-width, $direction) {
+    @content
+  }
+}
+
+@mixin tablet($direction:0) {
+  @include querybuilder($tablet-width, $notebook-width, $direction) {
+    @content
+  }
+}
+
+@mixin notebook($direction:0) {
+  @include querybuilder($notebook-width, $desktop-width, $direction) {
+    @content
+  }
+}
+
+@mixin desktop($direction:0) {
+  @include querybuilder($desktop-width, 99999, $direction) {
+    @content
+  }
+}
+
+@mixin print {
+  @media print {
+    @content
+  }
+}
+
+/*
+
+QUERY-BUILDER
+
+*/
+
+@mixin querybuilder($low-px, $high-px, $direction) {
+  @if $direction == $LIMITED {
+    @media (min-width: $low-px) and (max-width: $high-px - 1) {
+      @content
+    }
+  } @else if ($direction == $DOWNWARDS-OPEN) {
+    @media (max-width: $high-px - 1) {
+      @content
+    }
+  } @else if ($direction == $UPWARDS-OPEN) {
+    @media (min-width: $low-px) {
+      @content
+    }
+  } @else {
+
+    /*
+    * ERROR @ querybuilder mixin:
+    * No such direction!
+    */
+
+  }
+}