diff --git a/.idea/misc.xml b/.idea/misc.xml
index 998d1f9..0ff5cf6 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -13,8 +13,4 @@
-
-
-
-
\ No newline at end of file
diff --git a/.idea/vagrant.xml b/.idea/vagrant.xml
new file mode 100644
index 0000000..a5aa786
--- /dev/null
+++ b/.idea/vagrant.xml
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..80c8620
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,3 @@
+source :rubygems
+
+gem "autoprefixer-rails"
\ No newline at end of file
diff --git a/Rakefile b/Rakefile
new file mode 100644
index 0000000..e69de29
diff --git a/examples/example.scss b/examples/example.scss
new file mode 100644
index 0000000..e782d14
--- /dev/null
+++ b/examples/example.scss
@@ -0,0 +1 @@
+@import "../framework";
\ No newline at end of file
diff --git a/framework.scss b/framework.scss
index f3afc43..61c9306 100644
--- a/framework.scss
+++ b/framework.scss
@@ -1 +1,13 @@
-/* Simons SCSS Framework */
\ No newline at end of file
+/* 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";
\ No newline at end of file
diff --git a/mixins/css/filters.scss b/mixins/css/filters.scss
new file mode 100644
index 0000000..e69de29
diff --git a/mixins/css/_02-reset.scss b/mixins/css/reset.scss
similarity index 100%
rename from mixins/css/_02-reset.scss
rename to mixins/css/reset.scss
diff --git a/mixins/fx/camera.scss b/mixins/fx/camera.scss
new file mode 100644
index 0000000..8c3e72b
--- /dev/null
+++ b/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 (){}
\ No newline at end of file
diff --git a/mixins/layout/_01-mixins-layout.scss b/mixins/layout/layout.scss
similarity index 96%
rename from mixins/layout/_01-mixins-layout.scss
rename to mixins/layout/layout.scss
index d3bce1d..5d033d8 100644
--- a/mixins/layout/_01-mixins-layout.scss
+++ b/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));
diff --git a/mixins/queries/_01-mixins-media-queries.scss b/mixins/queries/_01-mixins-media-queries.scss
deleted file mode 100644
index f453f43..0000000
--- a/mixins/queries/_01-mixins-media-queries.scss
+++ /dev/null
@@ -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
- }
-}
\ No newline at end of file
diff --git a/mixins/queries/media-queries.scss b/mixins/queries/media-queries.scss
new file mode 100644
index 0000000..a56f28e
--- /dev/null
+++ b/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!
+ */
+
+ }
+}
\ No newline at end of file