RubyGems - best - Versions diffs - 0.0.1 → 0.0.2 - Mend

best 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

data/README.md +19 -0
data/framework/best/best.rb +32 -0
data/framework/best/stylesheets/_best.scss +15 -0
data/framework/best/stylesheets/best/_button.scss +49 -0
data/framework/best/stylesheets/best/_effects.scss +5 -0
data/framework/best/stylesheets/best/_form.scss +6 -0
data/framework/best/stylesheets/best/_layout.scss +7 -0
data/framework/best/stylesheets/best/_navigation.scss +8 -0
data/framework/best/stylesheets/best/_reset.scss +4 -0
data/framework/best/stylesheets/best/_utilities.scss +4 -0
data/framework/best/stylesheets/best/effects/_iterative.scss +15 -0
data/framework/best/stylesheets/best/effects/_keyframes.scss +121 -0
data/framework/best/stylesheets/best/form/_form-layout.scss +120 -0
data/framework/best/stylesheets/best/form/_form-style.scss +41 -0
data/framework/best/stylesheets/best/form/_form-validation.scss +25 -0
data/framework/best/stylesheets/best/layout/_dl-horizontal.scss +32 -0
data/framework/best/stylesheets/best/layout/_equal-heights.scss +70 -0
data/framework/best/stylesheets/best/layout/_layout-center.scss +20 -0
data/framework/best/stylesheets/best/layout/_mediablock.scss +34 -0
data/framework/best/stylesheets/best/navigation/_navigation-breadcrumb.scss +59 -0
data/framework/best/stylesheets/best/navigation/_navigation-dropdown.scss +39 -0
data/framework/best/stylesheets/best/navigation/_navigation-horizontal.scss +34 -0
data/framework/best/stylesheets/best/navigation/_navigation.scss +28 -0
data/framework/best/stylesheets/best/navigation/_tinynav.scss +18 -0
data/framework/best/stylesheets/best/reset/_normalize.scss +376 -0
data/framework/best/stylesheets/best/utilities/_em.scss +6 -0
data/template/breakpoints.html +89 -0
data/template/codekit-config.json +1142 -0
data/template/colors.html +115 -0
data/template/components/custom-select/arrow.gif +0 -0
data/template/components/custom-select/custom-select.css +23 -0
data/template/components/custom-select/custom-select.html +31 -0
data/template/components/custom-select/custom-select.js +9 -0
data/template/components/custom-select/customSelect.jquery.js +56 -0
data/template/components/custom-select/customSelect.jquery.min.js +1 -0
data/template/components/dropdown/dropdown.css +54 -0
data/template/components/dropdown/dropdown.html +34 -0
data/template/components/dropdown/dropdown.js +50 -0
data/template/components/example component/component.css +5 -0
data/template/components/example component/component.html +13 -0
data/template/components/example component/component.js b/data/template/components/example → component/component.js +0 -0
data/template/components/fancybox/CHANGELOG.md +115 -0
data/template/components/fancybox/README.md +217 -0
data/template/components/fancybox/component.json +8 -0
data/template/components/fancybox/demo/1_b.jpg +0 -0
data/template/components/fancybox/demo/1_s.jpg +0 -0
data/template/components/fancybox/demo/2_b.jpg +0 -0
data/template/components/fancybox/demo/2_s.jpg +0 -0
data/template/components/fancybox/demo/3_b.jpg +0 -0
data/template/components/fancybox/demo/3_s.jpg +0 -0
data/template/components/fancybox/demo/4_b.jpg +0 -0
data/template/components/fancybox/demo/4_s.jpg +0 -0
data/template/components/fancybox/demo/5_b.jpg +0 -0
data/template/components/fancybox/demo/5_s.jpg +0 -0
data/template/components/fancybox/demo/ajax.txt +15 -0
data/template/components/fancybox/demo/iframe.html +26 -0
data/template/components/fancybox/demo/index.html +307 -0
data/template/components/fancybox/lib/jquery-1.8.2.min.js +2 -0
data/template/components/fancybox/lib/jquery.mousewheel-3.0.6.pack.js +13 -0
data/template/components/fancybox/source/blank.gif +0 -0
data/template/components/fancybox/source/fancybox_loading.gif +0 -0
data/template/components/fancybox/source/fancybox_overlay.png +0 -0
data/template/components/fancybox/source/fancybox_sprite.png +0 -0
data/template/components/fancybox/source/helpers/fancybox_buttons.png +0 -0
data/template/components/fancybox/source/helpers/jquery.fancybox-buttons.css +96 -0
data/template/components/fancybox/source/helpers/jquery.fancybox-buttons.js +121 -0
data/template/components/fancybox/source/helpers/jquery.fancybox-media.js +196 -0
data/template/components/fancybox/source/helpers/jquery.fancybox-thumbs.css +54 -0
data/template/components/fancybox/source/helpers/jquery.fancybox-thumbs.js +162 -0
data/template/components/fancybox/source/jquery.fancybox.css +249 -0
data/template/components/fancybox/source/jquery.fancybox.js +1985 -0
data/template/components/fancybox/source/jquery.fancybox.pack.js +45 -0
data/template/components/jquery/component.json +14 -0
data/template/components/jquery/composer.json +23 -0
data/template/components/jquery/jquery.js +9472 -0
data/template/components/jquery/jquery.min.js +2 -0
data/template/config.rb +25 -0
data/template/css/style.css +1094 -0
data/template/fancybox.html +118 -0
data/template/forms.html +132 -0
data/template/grid.html +122 -0
data/template/index.html +116 -0
data/template/jade/--- from cybex as inspiration/keyvisuals.jade +37 -0
data/template/jade/--- from cybex as inspiration/m-carousel.jade +37 -0
data/template/jade/--- from cybex as inspiration/m-faq.jade +23 -0
data/template/jade/--- from cybex as inspiration/m-keyvisual.jade +55 -0
data/template/jade/--- from cybex as inspiration/m-search.jade +3 -0
data/template/jade/--- from cybex as inspiration/m-slideshow.jade +12 -0
data/template/jade/--- from cybex as inspiration/m-social.jade +10 -0
data/template/jade/breakpoints.jade +26 -0
data/template/jade/colors.jade +32 -0
data/template/jade/fancybox.jade +34 -0
data/template/jade/forms.jade +39 -0
data/template/jade/grid.jade +36 -0
data/template/jade/includes/module-development.jade +1 -0
data/template/jade/includes/nav-development.jade +27 -0
data/template/jade/includes/nav-meta.jade +6 -0
data/template/jade/includes/nav-primary.jade +5 -0
data/template/jade/includes/nav-secondary.jade +18 -0
data/template/jade/index.jade +33 -0
data/template/jade/layouts/layout-footer.jade +5 -0
data/template/jade/layouts/layout-header.jade +3 -0
data/template/jade/layouts/layout-html5.jade +26 -0
data/template/jade/layouts/layout-page.jade +40 -0
data/template/jade/mixins/form-helpers.jade +10 -0
data/template/jade/mixins/mixin-menu.jade +3 -0
data/template/jade/typography.jade +38 -0
data/template/js/footer.js +16 -0
data/template/js/footer.min.js +3 -0
data/template/js/header.js +1 -0
data/template/js/header.min.js +3 -0
data/template/js/main.js +18 -0
data/template/js/main.min.js +1 -0
data/template/js/vendor/jquery.flexslider.min.js +6 -0
data/template/js/vendor/modernizr-custom.js +4 -0
data/template/readme.md +6 -0
data/template/sass/_base.scss +66 -0
data/template/sass/_config.scss +58 -0
data/template/sass/_labs.scss +4 -0
data/template/sass/_layout.scss +26 -0
data/template/sass/_m-breakpoints.scss +42 -0
data/template/sass/_m-colors.scss +39 -0
data/template/sass/_m-navigation.scss +43 -0
data/template/sass/_m-offcanvas.scss +60 -0
data/template/sass/_module.scss +63 -0
data/template/sass/style.scss +38 -0
data/template/typography.html +120 -0
metadata +130 -3

data/template/fancybox.html ADDED

@@ -0,0 +1,118 @@
+<!--include mixins/m-keyvisual--><!DOCTYPE html><!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--><!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--><!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]--><!--[if gt IE 8]><!-->
+<html lang="en" dir="ltr" class="no-js"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/header.min.js" type="text/javascript"></script>
+    <!--script(type="text/javascript", src="http://use.typekit.net/uwa6eml.js")-->
+    <!--| <script type="text/javascript">try{Typekit.load();}catch(e){}</script>-->
+    <title>Fancybox</title>
+  </head>
+  <body class="page-fancybox">
+    <div class="l-site">
+      <header class="l-header">
+        <div class="inner">
+          <nav class="m-nav-primary">
+            <ul>
+              <li><a href="index.html" id="bestLink">Best</a></li>
+              <!--li: mixin menu-item('Best', 'index.html')-->
+              <li class="sidebarToggleContainer"><a href="#" id="sidebarToggle">Toggle sidebar</a></li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+      <div role="main" class="l-main">
+        <div class="inner">
+          <div class="l-primary">
+            <article class="article">
+              <h1>Fancybox</h1>
+              <p>In order to use the Fancybox plugin you have to:</p>
+              <ol>
+                <li>Update the component using Bower</li>
+                <li>consider if you need any of the extended fancybox helpers (thumbnails etc.)</li>
+                <li>Import the relevant CSS file(s) in <code>style.scss</code></li>
+                <li>Import the relevant script file(s) in <code>footer.js</code></li>
+                <li>Initialize the plugin in <code>main.js</code></li>
+              </ol>
+              <p><a href="#fancybox" class="fancybox-test">Click me to test the Fancybox plugin</a></p>
+              <div id="fancybox">
+                <p>This is inside the #fancybox element</p>
+              </div>
+            </article>
+          </div>
+          <div class="l-secondary">
+            <nav class="m-menu m-menu-secondary"><!--ul
+              <li class="category">Base
+                <ul>
+                  <li><a href="colors.html" class="">Colors</a>
+                  </li>
+                  <li><a href="typography.html" class="">Typography</a>
+                  </li>
+                  <li><a href="forms.html" class="">Forms</a>
+                  </li>
+                </ul>
+              </li>
+              <li class="category">Layout
+                <ul>
+                  <li><a href="grid.html" class="">Grid</a>
+                  </li>
+                </ul>
+              </li>
+              <li class="expanded"><a href="#">Seite Level 1</a>
+                <ul>
+                  <li><a href="#">Seite Level 2</a></li>
+                </ul>
+              </li>-->
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div class="l-development">
+        <nav class="m-nav-development">
+          <ul>
+            <li class="category">Base
+              <ul>
+                <li><a href="colors.html" class="">Colors</a>
+                </li>
+                <li><a href="typography.html" class="">Typography</a>
+                </li>
+                <li><a href="forms.html" class="">Forms</a>
+                </li>
+              </ul>
+            </li>
+            <li class="category">Layout
+              <ul>
+                <li><a href="grid.html" class="">Grid</a>
+                </li>
+                <li><a href="breakpoints.html" class="">Breakpoints</a>
+                </li>
+              </ul>
+            </li>
+            <li class="category">Components
+              <ul>
+                <li><a href="fancybox.html" class="selected">Fancybox</a>
+                </li>
+                <li><a href="components/dropdown/dropdown.html" class="">Dropdown</a>
+                </li>
+              </ul>
+            </li><!--li.expanded<a href="#">Seite Level 1</a>
+            <ul>
+              <li><a href="#">Seite Level 2</a></li><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a>
+            </ul>-->
+          </ul>
+        </nav>
+      </div>
+      <!--.l-sticky-footer-->
+    </div>
+    <footer class="l-footer">
+      <div class="inner">
+        <!--include layouts/layout-footer.jade-->
+      </div>
+    </footer>
+    <script src="js/footer.min.js"></script>
+    <script src="js/main.js"></script>
+  </body>
+</html>

data/template/forms.html ADDED

@@ -0,0 +1,132 @@
+<!--include mixins/m-keyvisual--><!DOCTYPE html><!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--><!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--><!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]--><!--[if gt IE 8]><!-->
+<html lang="en" dir="ltr" class="no-js"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/header.min.js" type="text/javascript"></script>
+    <!--script(type="text/javascript", src="http://use.typekit.net/uwa6eml.js")-->
+    <!--| <script type="text/javascript">try{Typekit.load();}catch(e){}</script>-->
+    <title>Forms</title>
+  </head>
+  <body class="page-forms">
+    <div class="l-site">
+      <header class="l-header">
+        <div class="inner">
+          <nav class="m-nav-primary">
+            <ul>
+              <li><a href="index.html" id="bestLink">Best</a></li>
+              <!--li: mixin menu-item('Best', 'index.html')-->
+              <li class="sidebarToggleContainer"><a href="#" id="sidebarToggle">Toggle sidebar</a></li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+      <div role="main" class="l-main">
+        <div class="inner">
+          <div class="l-primary">
+            <article class="article">
+              <h1>Forms</h1>
+              <p>Here we'll show default form styling and markup</p>
+              <form class="m-test-form">
+                <div class="field field-type-select">
+                  <label></label>
+                  <select>
+                    <option value="">Sie sind…</option>
+                    <option value="">option2</option>
+                    <option value="">option3</option>
+                  </select>
+                </div>
+                <div class="field field-type-text field-name-name">
+                  <label>Username</label>
+                  <input type="text" name="name" placeholder="Username"/>
+                </div>
+                <div class="field field-type-password field-name-password">
+                  <label>Password</label>
+                  <input type="password" name="password" placeholder="Password"/>
+                </div>
+                <div class="field field-type-textarea field-name-message">
+                  <label>Message</label>
+                  <textarea name="message" placeholder="Message"></textarea>
+                </div>
+                <div class="field field-type-submit field-name-submit">
+                  <input type="submit" name="submit" value="Submit"/>
+                </div>
+              </form>
+            </article>
+          </div>
+          <div class="l-secondary">
+            <nav class="m-menu m-menu-secondary"><!--ul
+              <li class="category">Base
+                <ul>
+                  <li><a href="colors.html" class="">Colors</a>
+                  </li>
+                  <li><a href="typography.html" class="">Typography</a>
+                  </li>
+                  <li><a href="forms.html" class="selected">Forms</a>
+                  </li>
+                </ul>
+              </li>
+              <li class="category">Layout
+                <ul>
+                  <li><a href="grid.html" class="">Grid</a>
+                  </li>
+                </ul>
+              </li>
+              <li class="expanded"><a href="#">Seite Level 1</a>
+                <ul>
+                  <li><a href="#">Seite Level 2</a></li>
+                </ul>
+              </li>-->
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div class="l-development">
+        <nav class="m-nav-development">
+          <ul>
+            <li class="category">Base
+              <ul>
+                <li><a href="colors.html" class="">Colors</a>
+                </li>
+                <li><a href="typography.html" class="">Typography</a>
+                </li>
+                <li><a href="forms.html" class="selected">Forms</a>
+                </li>
+              </ul>
+            </li>
+            <li class="category">Layout
+              <ul>
+                <li><a href="grid.html" class="">Grid</a>
+                </li>
+                <li><a href="breakpoints.html" class="">Breakpoints</a>
+                </li>
+              </ul>
+            </li>
+            <li class="category">Components
+              <ul>
+                <li><a href="fancybox.html" class="">Fancybox</a>
+                </li>
+                <li><a href="components/dropdown/dropdown.html" class="">Dropdown</a>
+                </li>
+              </ul>
+            </li><!--li.expanded<a href="#">Seite Level 1</a>
+            <ul>
+              <li><a href="#">Seite Level 2</a></li><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a>
+            </ul>-->
+          </ul>
+        </nav>
+      </div>
+      <!--.l-sticky-footer-->
+    </div>
+    <footer class="l-footer">
+      <div class="inner">
+        <!--include layouts/layout-footer.jade-->
+      </div>
+    </footer>
+    <script src="js/footer.min.js"></script>
+    <script src="js/main.js"></script>
+  </body>
+</html>

data/template/grid.html ADDED

@@ -0,0 +1,122 @@
+<!--include mixins/m-keyvisual--><!DOCTYPE html><!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--><!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--><!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]--><!--[if gt IE 8]><!-->
+<html lang="en" dir="ltr" class="no-js"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/header.min.js" type="text/javascript"></script>
+    <!--script(type="text/javascript", src="http://use.typekit.net/uwa6eml.js")-->
+    <!--| <script type="text/javascript">try{Typekit.load();}catch(e){}</script>-->
+    <title>Grid</title>
+  </head>
+  <body class="page-grid">
+    <div class="l-site">
+      <header class="l-header">
+        <div class="inner">
+          <nav class="m-nav-primary">
+            <ul>
+              <li><a href="index.html" id="bestLink">Best</a></li>
+              <!--li: mixin menu-item('Best', 'index.html')-->
+              <li class="sidebarToggleContainer"><a href="#" id="sidebarToggle">Toggle sidebar</a></li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+      <div role="main" class="l-main">
+        <div class="inner">
+          <div class="l-primary">
+            <article class="article">
+              <h1>Grid</h1>
+              <p>Grid system explained.</p>
+              <p>This is the <a href="http://oocss.org/grids_docs.html">AG test</a> build on a 10 column <a href="susy.oddbird.net">Susy</a> grid.</p>
+            </article>
+            <div class="m-gridtest">
+              <div class="ag1">
+                <p>2of10</p>
+              </div>
+              <div class="ag2">
+                <p>6of10
+                  <div class="ag4">
+                    <p>3of6</p>
+                  </div>
+                  <div class="ag5">
+                    <p>3of6 + omega</p>
+                  </div>
+                  <div class="ag6">
+                    <p>2of6</p>
+                  </div>
+                  <div class="ag7">
+                    <p>4of6 + omega
+                      <div class="ag8">
+                        <p>2of4</p>
+                      </div>
+                      <div class="ag9">
+                        <p>2of4 + omega</p>
+                      </div>
+                      <div class="ag10">
+                        <p>4of4 +omega</p>
+                      </div>
+                    </p>
+                  </div>
+                </p>
+              </div>
+              <div class="ag3">
+                <p>2of10 + omega</p>
+              </div>
+              <div class="ag11">
+                <p>clear</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="l-development">
+        <nav class="m-nav-development">
+          <ul>
+            <li class="category">Base
+              <ul>
+                <li><a href="colors.html" class="">Colors</a>
+                </li>
+                <li><a href="typography.html" class="">Typography</a>
+                </li>
+                <li><a href="forms.html" class="">Forms</a>
+                </li>
+              </ul>
+            </li>
+            <li class="category">Layout
+              <ul>
+                <li><a href="grid.html" class="selected">Grid</a>
+                </li>
+                <li><a href="breakpoints.html" class="">Breakpoints</a>
+                </li>
+              </ul>
+            </li>
+            <li class="category">Components
+              <ul>
+                <li><a href="fancybox.html" class="">Fancybox</a>
+                </li>
+                <li><a href="components/dropdown/dropdown.html" class="">Dropdown</a>
+                </li>
+              </ul>
+            </li><!--li.expanded<a href="#">Seite Level 1</a>
+            <ul>
+              <li><a href="#">Seite Level 2</a></li><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a>
+            </ul>-->
+          </ul>
+        </nav>
+      </div>
+      <!--.l-sticky-footer-->
+    </div>
+    <footer class="l-footer">
+      <div class="inner">
+        <!--include ../includes/module-search.jade-->
+        <!--include ../includes/nav-meta.jade-->
+        <!--include ../includes/module-social.jade-->
+      </div>
+    </footer>
+    <script src="js/footer.min.js"></script>
+    <script src="js/main.js"></script>
+  </body>
+</html>

data/template/index.html ADDED

@@ -0,0 +1,116 @@
+<!--include mixins/m-keyvisual--><!DOCTYPE html><!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--><!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--><!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]--><!--[if gt IE 8]><!-->
+<html lang="en" dir="ltr" class="no-js"><!--<![endif]-->
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/header.min.js" type="text/javascript"></script>
+    <!--script(type="text/javascript", src="http://use.typekit.net/uwa6eml.js")-->
+    <!--| <script type="text/javascript">try{Typekit.load();}catch(e){}</script>-->
+    <title>Index</title>
+  </head>
+  <body class="page-index">
+    <div class="l-site">
+      <header class="l-header">
+        <div class="inner">
+          <nav class="m-nav-primary">
+            <ul>
+              <li><a href="index.html" id="bestLink">Best</a></li>
+              <!--li: mixin menu-item('Best', 'index.html')-->
+              <li class="sidebarToggleContainer"><a href="#" id="sidebarToggle">Toggle sidebar</a></li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+      <div role="main" class="l-main">
+        <div class="inner">
+          <div class="l-primary">
+            <article class="article">
+              <h1>Index of the Best</h1>
+              <p>Follow the white rabbit. This is a work-in-progress.</p>
+              <p><strong>Todo:</strong></p>
+              <ul>
+                <li>Showcase typgraphy</li>
+                <li>Responsive typo</li>
+                <li>Test grid system</li>
+                <li>Test different responsive navigation patterns</li>
+                <li>Bulletproof Susy</li>
+              </ul>
+              <p><img src="http://placekitten.com/g/1000/160"></p>
+            </article>
+          </div>
+          <div class="l-secondary">
+            <nav class="m-menu m-menu-secondary"><!--ul
+              <li class="category">Base
+                <ul>
+                  <li><a href="colors.html" class="">Colors</a>
+                  </li>
+                  <li><a href="typography.html" class="">Typography</a>
+                  </li>
+                  <li><a href="forms.html" class="">Forms</a>
+                  </li>
+                </ul>
+              </li>
+              <li class="category">Layout
+                <ul>
+                  <li><a href="grid.html" class="">Grid</a>
+                  </li>
+                </ul>
+              </li>
+              <li class="expanded"><a href="#">Seite Level 1</a>
+                <ul>
+                  <li><a href="#">Seite Level 2</a></li>
+                </ul>
+              </li>-->
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div class="l-development">
+        <nav class="m-nav-development">
+          <ul>
+            <li class="category">Base
+              <ul>
+                <li><a href="colors.html" class="">Colors</a>
+                </li>
+                <li><a href="typography.html" class="">Typography</a>
+                </li>
+                <li><a href="forms.html" class="">Forms</a>
+                </li>
+              </ul>
+            </li>
+            <li class="category">Layout
+              <ul>
+                <li><a href="grid.html" class="">Grid</a>
+                </li>
+                <li><a href="breakpoints.html" class="">Breakpoints</a>
+                </li>
+              </ul>
+            </li>
+            <li class="category">Components
+              <ul>
+                <li><a href="fancybox.html" class="">Fancybox</a>
+                </li>
+                <li><a href="components/dropdown/dropdown.html" class="">Dropdown</a>
+                </li>
+              </ul>
+            </li><!--li.expanded<a href="#">Seite Level 1</a>
+            <ul>
+              <li><a href="#">Seite Level 2</a></li><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a>
+            </ul>-->
+          </ul>
+        </nav>
+      </div>
+      <!--.l-sticky-footer-->
+    </div>
+    <footer class="l-footer">
+      <div class="inner">
+        <!--include layouts/layout-footer.jade-->
+      </div>
+    </footer>
+    <script src="js/footer.min.js"></script>
+    <script src="js/main.js"></script>
+  </body>
+</html>