Added Menu Mixins:

Desktop vertical
Desktop vertical
Tablet/Phone Fullscreen
Toggle Button

.idea/deployment.xml

@@ -2,21 +2,14 @@
 <project version="4">
   <component name="PublishConfigData">
     <serverData>
-      <paths name="SELFOMAT Server">
+      <paths name="lisanahartl.de">
         <serverdata>
           <mappings>
             <mapping local="$PROJECT_DIR$" web="/" />
           </mappings>
         </serverdata>
       </paths>
-      <paths name="selfom.at (production)">
+      <paths name="simongehrig.support">
-        <serverdata>
-          <mappings>
-            <mapping local="$PROJECT_DIR$" web="/" />
-          </mappings>
-        </serverdata>
-      </paths>
-      <paths name="selfom.at (website)">
         <serverdata>
           <mappings>
             <mapping local="$PROJECT_DIR$" web="/" />

.idea/scopes/Unnamed.xml

@@ -0,0 +1,3 @@
+<component name="DependencyValidationManager">
+  <scope name="Unnamed" pattern="file[00 SCSS Framework]:*/" />
+</component>

.idea/watcherTasks.xml

@@ -16,7 +16,7 @@
       <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="false" />
+      <option name="trackOnlyRoot" value="true" />
       <option name="workingDir" value="$FileDir$" />
       <envs />
     </TaskOptions>

_framework.scss

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

examples/fx/camera/camera.html

@@ -11,29 +11,29 @@
 
         <div class="wrap focus">
             <div class="inner">
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/1"></div>
                 <p class="head">Off-Focus</p>
-                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
             </div>
         </div>
 
         <div class="wrap zoom">
             <div class="inner">
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/2"></div>
                 <p class="head">Zoom</p>
-                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
             </div>
         </div>
 
         <div class="wrap shake">
             <div class="inner">
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/3"></div>
                 <p class="head">Shake</p>
-                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
             </div>
         </div>
 
         <div class="wrap all">
             <div class="inner">
+                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/4"></div>
                 <p class="head">None</p>
-                <div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
             </div>
         </div>
 

examples/fx/camera/camera.scss

@@ -5,11 +5,16 @@
   background-color: #6ac88e;
   border-bottom: solid 40px #c86350;
 
+  @include absolute-span(0, 0, 0, 0);
+
   .wrap {
     /*BASIC LAYOUT*/
     @include cols(4, 20);
 
     .inner {
+      background-color: #ffffff;
+      padding: 20px 20px 40px 20px !important;
+      box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4);
 
       .head {
         font-family: sans-serif;
@@ -24,7 +29,6 @@
         position: relative;
         box-sizing: border-box;
         overflow: hidden;
-        border: solid thick #c86350;
 
         img {
           width: 100%; // make sure thins dont get wider than the parent cols element
@@ -68,7 +72,7 @@
     &.all {
       /*ALL EFFECTS*/
       .head {
-        @include camera-focus($FOCUS-OUT, 0.5, 10, $EASE);
+        @include camera-focus($FOCUS-OUT, 0.4, 10, $EASE);
       }
 
       img {

examples/layout/menus/horizontal/horizontal.html

@@ -0,0 +1,180 @@
+<head>
+    <link rel="stylesheet" type="text/css" href="horizontal.css">
+</head>
+<body>
+<div class="header">
+
+    <input id="navcheck" type="checkbox" name="menu">
+
+    <label class="navbar" for="navcheck">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+    </label>
+
+    <ul class="nav">
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+</div>
+<div class="content"></div>
+</body>

examples/layout/menus/horizontal/horizontal.scss

@@ -0,0 +1,21 @@
+@import "../../../../_framework";
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif;
+  .header {
+    //transform: rotate(-1deg);
+    #navcheck {
+      @include toggle-tablet(100px, #ffd9d9, #806c80) {
+        @include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
+      }
+    }
+    .nav {
+      font-weight: 700;
+      letter-spacing: 1px;
+      font-size: 20px;
+
+      @include menu-horizontal-desktop(20px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
+    }
+  }
+}

examples/layout/menus/vertical/vertical.html

@@ -0,0 +1,180 @@
+<head>
+    <link rel="stylesheet" type="text/css" href="vertical.css">
+</head>
+<body>
+<div class="header">
+
+    <input id="navcheck" type="checkbox" name="menu">
+
+    <label class="navbar" for="navcheck">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+    </label>
+
+    <ul class="nav">
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+</div>
+<div class="content"></div>
+</body>

examples/layout/menus/vertical/vertical.scss

@@ -0,0 +1,26 @@
+@import "../../../../framework";
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif;
+
+  .header {
+    //transform: rotate(-1deg);
+
+    #navcheck {
+      @include toggle-tablet(100px, #ffd9d9, #806c80) {
+        @include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
+      }
+    }
+
+    .nav {
+      font-weight: 700;
+      letter-spacing: 1px;
+      font-size: 20px;
+      @include menu-vertical-desktop(20px, 200px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
+      position: fixed;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}

mixins/_mixins.scss

@@ -0,0 +1,10 @@
+// Layout
+@import "layout/layout";
+@import "layout/position";
+@import "layout/menus/_00-menus";
+
+// Queries
+@import "queries/media-queries";
+
+// FX / Effects
+@import "fx/camera";

mixins/css/_css.scss

@@ -0,0 +1,10 @@
+// CSS Properties
+
+// Reset
+@import "reset";
+
+// Layout
+
+// FX
+@import "fx/transform";
+@import "fx/filters";

mixins/css/_filters.scss

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

mixins/fx/_camera.scss

@@ -1,4 +1,4 @@
-/* CONSTANTS */
+// CONSTANTS
 
 $ZOOM-IN: 0;
 $ZOOM-OUT: 1;
@@ -11,7 +11,7 @@ $EASE: 1;
 $EASEINOUT: 2;
 $BACKWARD: 3;
 
-/* MIXINS */
+// MIXINS
 
 /// Gives the Element a focusing Effect
 /// @param {int} $direction

mixins/layout/_layout.scss

@@ -1,6 +1,4 @@
 @mixin cols($columns, $gutter) {
-  /* Wrapper inside Element needed
-     because of gutter >* */
 
   /* Positioning */
   position: relative;
@@ -24,7 +22,9 @@
   }
 
   > * {
-    width: 100%;
+    /* Wrapper inside Element needed
+       because of gutter >* */
+    max-width: 100%;
     box-sizing: border-box;
   }
 }

mixins/layout/_position.scss

@@ -0,0 +1,8 @@
+@mixin absolute-span($top:0,$right:0,$bottom:0,$left:0) {
+  /* Absolute Positioning */
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}

mixins/layout/menus/_00-menus.scss

@@ -0,0 +1,4 @@
+@import "fullscreen-phone";
+@import "horizontal-desktop";
+@import "vertical-desktop";
+@import "toggle";

mixins/layout/menus/_fullscreen-phone.scss

@@ -0,0 +1,148 @@
+@mixin menu-fullscreen-phone(
+  $toggle-size:100px,
+  $padding:20px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+
+  @include absolute-span();
+
+  padding-top: $toggle-size;
+  list-style: none;
+  display: block;
+  table-layout: fixed;
+  width: 100%;
+  overflow: scroll;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: block;
+    background-color: $bg-color;
+    color: $font-color;
+    width: 100%;
+    text-transform: uppercase;
+    //border-left: solid $padding $font-color;
+
+    a {
+      display: block;
+      padding: $padding;
+      width: 100%;
+      text-decoration: none;
+      color: $font-color;
+      box-sizing: border-box;
+    }
+
+    // Second
+    ul {
+      display: block;
+      position: relative;
+      width: 100%;
+
+      // Second
+      li {
+        color: $font-color;
+        text-transform: none;
+        a {
+          padding-left: 2*$padding;
+          color: $font-color;
+        }
+
+        // Third
+        ul {
+          position: relative;
+          display: block;
+          left: auto;
+          top: auto;
+
+          // Third
+          li {
+            position: relative;
+            color: $font-color;
+            font-weight: 300;
+
+            a {
+              padding-left: 3*$padding;
+              color: $font-color;
+            }
+          }
+        }
+      }
+    }
+
+    // First
+    &:hover {
+      background-color: $bg-color-hover;
+      color: $font-color-hover;
+      //border-left: solid $padding $font-color-hover;
+
+      a {
+        color: $font-color-hover;
+      }
+
+      // Second
+      ul {
+        display: block;
+
+        // Second
+        li {
+          display: block;
+          color: $font-color;
+
+          a {
+            color: $font-color;
+          }
+          // Third
+          ul {
+            display: block;
+
+            // Third
+            li {
+
+            }
+          }
+
+          // Second
+          &:hover {
+            color: $font-color-hover;
+
+            a {
+              color: $font-color-hover;
+            }
+
+            // Third
+            ul {
+              display: block;
+
+              // Third
+              li {
+                color: $font-color;
+
+                a {
+                  color: $font-color;
+                }
+
+                &:hover {
+                  color: $font-color-hover;
+
+                  a {
+                    color: $font-color-hover;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    &:last-of-type {
+      ul li ul {
+        right: auto;
+        left: auto;
+      }
+    }
+  }
+}

mixins/layout/menus/_horizontal-desktop.scss

@@ -0,0 +1,136 @@
+@mixin menu-horizontal-desktop(
+  $padding:15px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+  position: relative;
+  list-style: none;
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: table-cell;
+    background-color: $bg-color;
+    color: $font-color;
+    width: 100%;
+
+    a {
+      display: block;
+      padding: $padding;
+      width: 100%;
+      text-decoration: none;
+      color: $font-color;
+      box-sizing: border-box;
+    }
+
+    // Second
+    ul {
+      display: none;
+      position: absolute;
+      width: 100%;
+
+      // Second
+      li {
+        color: $font-color;
+        a {
+          color: $font-color;
+        }
+
+        // Third
+        ul {
+          position: absolute;
+          display: none;
+          left: 100%;
+          top: 0;
+
+          // Third
+          li {
+            position: relative;
+            color: $font-color;
+
+            a {
+              color: $font-color;
+            }
+          }
+        }
+      }
+    }
+
+    // First
+    &:hover {
+      background-color: $bg-color-hover;
+      color: $font-color-hover;
+
+      a {
+        color: $font-color-hover;
+      }
+
+      // Second
+      ul {
+        display: block;
+
+        // Second
+        li {
+          display: block;
+          color: $font-color;
+
+          a {
+            color: $font-color;
+          }
+          // Third
+          ul {
+            display: none;
+
+            // Third
+            li {
+
+            }
+          }
+
+          // Second
+          &:hover {
+            color: $font-color-hover;
+
+            a {
+              color: $font-color-hover;
+            }
+
+            // Third
+            ul {
+              display: block;
+
+              // Third
+              li {
+                color: $font-color;
+
+                a {
+                  color: $font-color;
+                }
+
+                &:hover {
+                  color: $font-color-hover;
+
+                  a {
+                    color: $font-color-hover;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    &:last-of-type {
+      ul li ul {
+        right: 100%;
+        left: auto;
+      }
+    }
+  }
+}

mixins/layout/menus/_toggle.scss

@@ -0,0 +1,54 @@
+@mixin toggle-tablet(
+  //$navclass:nav,
+  $size:100px,
+  $background-color:#cccccc,
+  $bar-color:#999999
+) {
+  display: none;
+
+  + .navbar {
+    display: none;
+  }
+
+  @include tablet($DOWNWARDS-OPEN) {
+    // Tablet Mode
+    + .navbar {
+      position: fixed;
+      z-index: 10000;
+      display: block;
+      padding: $size/7;
+      background-color: $background-color;
+      box-sizing: border-box;
+
+      span {
+        display: block;
+        margin-bottom: $size/7;
+        width: ($size/7)*5;
+        height: $size/7;
+        background-color: $bar-color;
+        box-sizing: border-box;
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+
+      // Navigation List
+      // TODO Add Selector Support
+      + ul {
+        display: none;
+      }
+    }
+
+    // Enabled Menu
+    &:checked {
+
+      + .navbar {
+
+        + ul {
+          @content
+        }
+      }
+    }
+  }
+}
+

mixins/layout/menus/_vertical-desktop.scss

@@ -0,0 +1,133 @@
+@mixin menu-vertical-desktop(
+  $padding:15px,
+  $width:200px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+  // First
+  position: relative;
+  list-style: none;
+  display: block;
+  width: $width;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: block;
+    background-color: $bg-color;
+    color: $font-color;
+    width: auto;
+
+    a {
+      display: block;
+      padding: $padding;
+      width: 100%;
+      text-decoration: none;
+      color: $font-color;
+      box-sizing: border-box;
+    }
+
+    // Second
+    ul {
+      display: none;
+      position: absolute;
+      width: 100%;
+      left: 100%;
+      top: 0;
+
+      // Second
+      li {
+        color: $font-color;
+        a {
+          color: $font-color;
+        }
+
+        // Third
+        ul {
+          position: absolute;
+          display: none;
+          left: 100%;
+          top: 0;
+
+          // Third
+          li {
+            position: relative;
+            color: $font-color;
+
+            a {
+              color: $font-color;
+            }
+          }
+        }
+      }
+    }
+
+    // First
+    &:hover {
+      background-color: $bg-color-hover;
+      color: $font-color-hover;
+
+      a {
+        color: $font-color-hover;
+      }
+
+      // Second
+      ul {
+        display: block;
+
+        // Second
+        li {
+          display: block;
+          color: $font-color;
+
+          a {
+            color: $font-color;
+          }
+          // Third
+          ul {
+            display: none;
+
+            // Third
+            li {
+
+            }
+          }
+
+          // Second
+          &:hover {
+            color: $font-color-hover;
+
+            a {
+              color: $font-color-hover;
+            }
+
+            // Third
+            ul {
+              display: block;
+
+              // Third
+              li {
+                color: $font-color;
+
+                a {
+                  color: $font-color;
+                }
+
+                &:hover {
+                  color: $font-color-hover;
+
+                  a {
+                    color: $font-color-hover;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

mixins/queries/_media-queries.scss

@@ -1,55 +1,50 @@
-/*
+// CONSTANTS
 
-CONSTANTS
+// Directions
-
-*/
 
 $UPWARDS-OPEN: 2;
 $DOWNWARDS-OPEN: 1;
 $LIMITED: 0;
 
-/*
+// Widths
-
-Widths
-
-*/
 
 $phone-width: 480px;
 $tablet-width: 768px;
 $notebook-width: 980px;
 $desktop-width: 1280px;
 
-/*
+// Queries
-
-Queries
-
-*/
 
 @mixin small-phone($direction:0) {
+  /* small phone */
   @include querybuilder(0, $phone-width, $direction) {
     @content
   }
 }
 
 @mixin phone($direction:0) {
+  /* phone */
   @include querybuilder($phone-width, $tablet-width, $direction) {
     @content
   }
 }
 
 @mixin tablet($direction:0) {
+  /* tablet */
   @include querybuilder($tablet-width, $notebook-width, $direction) {
     @content
   }
 }
 
 @mixin notebook($direction:0) {
+  /* notebook */
   @include querybuilder($notebook-width, $desktop-width, $direction) {
     @content
   }
 }
 
 @mixin desktop($direction:0) {
+  /* desktop */
   @include querybuilder($desktop-width, 99999, $direction) {
     @content
   }
@@ -61,11 +56,8 @@ Queries
   }
 }
 
-/*
 
-QUERY-BUILDER
+//QUERY-BUILDER
-
-*/
 
 @mixin querybuilder($low-px, $high-px, $direction) {
   @if $direction == $LIMITED {