Added Example for Camera FX

mixins/fx/_camera.scss

@@ -6,23 +6,90 @@ $ZOOM-OUT: 1;
 $FOCUS-IN: 0;
 $FOCUS-OUT: 1;
 
-$LINEAR:0;
-$EASE:1;
-$EASEINOUT:2;
-$BACKWARD:3;
+$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:10,$performance:0) {
+/// @param {int} $seconds
+/// @param {int} $pixels
+/// @param {int} $performance
+@mixin camera-focus(
+  $direction:1,
+  $pixels:10,
+  $performance:0,
+  $seconds:0.5,
+  $delay:0
+) {
   /* Camera Focus Effect */
-  filter: blur($pixels);
+  transition-property: all;
+  transition-duration: $seconds+s;
+  @include performance($performance);
+  &:hover {
+    filter: blur($pixels+px);
 
+  }
 }
-@mixin camera-shake (){}
 
-@mixin camera-zoom (){}
+/// Gives the Element a shake Effect
+/// @param {int} $direction
+/// Degrees
+/// @param {int} $seconds
+/// @param {int} $pixels
+/// @param {int} $performance
+@mixin camera-shake(
+  $rotate:10,
+  $scale:1.1,
+  $x:10,
+  $y:10,
+  $performance:0,
+  $seconds:0.5,
+  $delay:0
+) {
+  transition-property: all;
+  transition-duration: $seconds+s;
+  @include performance($performance);
+  &:hover {
+    @include transform($rotate, $scale, $x, $y);
+  }
+}
+
+/// Gives the Element a zoom Effect
+/// @param {int} $direction
+/// @param {int} $seconds
+/// @param {int} $pixels
+/// @param {int} $performance
+@mixin camera-zoom(
+  $direction:1,
+  $scale:1.2,
+  $performance:0,
+  $seconds:0.5,
+  $delay:0
+) {
+  transition-property: all;
+  transition-duration: $seconds+s;
+  @include performance($performance);
+  &:hover {
+    @include transform(0, $scale, 0, 0)
+  }
+}
+
+@mixin performance($perform) {
+  @if ($perform == 0) {
+    transition-timing-function: linear;
+  } @else if ($perform == 1) {
+    transition-timing-function: ease;
+  } @else if ($perform == 2) {
+    transition-timing-function: ease-in-out;
+  } @else if ($perform == 3) {
+    transition-timing-function: cubic-bezier(0.68, - 0.55, 0.27, 1.55);
+  }
+}
+
+@mixin transform($rotation:0,$scale:1,$x:0,$y:0) {
+  transform: rotate($rotation+deg) scale($scale) translate($x+px, $y+px);
+}

mixins/layout/_layout.scss

@@ -5,22 +5,20 @@
   /* Positioning */
   position: relative;
   display: inline-table;
+
   /* Sizing */
   box-sizing: border-box;
-  //width: (100%/$columns) - (0.3 + ($columns * 0.3));
   width: (100%/$columns);
+
+  /* Gutters */
   margin: 0 -4px 0 0 !important;
-  padding: 0 !important;
+  padding: 0 $gutter+px $gutter+px 0 !important;
   border: none !important;
 
+  /* Typography */
   letter-spacing: 0;
-  /* Gutter */
-  padding-right: $gutter !important;
-  padding-bottom: $gutter !important;
-  &:before {
-  }
-  &:after {
-  }
+
+  /* Remove last border */
   &:nth-of-type(#{$columns}) {
     border-right: none;
   }