best 0.0.1 → 0.0.2

data/template/sass/_m-navigation.scss

@@ -0,0 +1,43 @@
+
+// Navigation
+// ============================================================================
+.selected,
+.selected:visited {
+	color: $anchor-color-selected;
+	&:hover {
+		color: lighten($anchor-color-selected, 25);
+	}
+}
+
+
+.m-nav-primary {
+	@include navigation-horizontal;
+	margin-bottom: $gutter-width;
+	
+	// The "Best" link
+	li:first-child a {
+		@include border-radius(50%);
+		@include transition(background-color 150ms ease-in, color 150ms ease-in);
+		font-weight: bold;
+		background-color: darken($white,10);
+		text-decoration: none;
+		&:hover {
+			background-color: $white;
+		}
+	}
+	a {
+		padding: em(16) em(10) em(15);
+	}
+}
+
+.m-nav-development {
+	@include navigation;
+	padding-bottom: $gutter-width;
+	margin-left: $gutter-width;
+	a {
+		padding: em(5) em(10);
+	}
+	ul ul {
+		margin-bottom: em(20);
+	}
+}

data/template/sass/_m-offcanvas.scss

@@ -0,0 +1,60 @@
+
+// Off-canvas layout
+// ============================================================================
+@mixin off-canvas($primary: '.l-main', $secondary: '.l-secondary', $secondary-width: 14em) {
+	$oskars-bezier: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
+	#{$primary},
+	#{$secondary} {
+		@include transition(margin 200ms $oskars-bezier);
+	}
+	#{$secondary} {
+		width: $secondary-width;
+		background: $lightgray;
+	}
+
+	// Variant A: Push main content on click
+	@media (max-width: 50em) {
+		.l-main {
+			overflow: hidden;
+		}
+		#{$primary} {
+			float: right;
+			width: 100%;
+		}
+		#{$secondary} {
+			margin-left: -100%;
+		}
+		
+		// Make room for the sidebar
+		.sidebar-is-active {
+			#{$primary} {
+				margin-right: ($secondary-width + 2em) * -1;
+			}
+			#{$secondary} {
+				margin-left: 0;
+			}
+		}
+	}
+
+	// Variant B: Overlayed on hover
+	@media (min-width: 50em) and (max-width: $container-width + ($secondary-width*2 - 6em)) {
+		.sidebarToggleContainer {
+			display: none;
+		}
+	}
+	@media (min-width: 50em) {
+		#{$secondary} {
+			position: fixed;
+			top: 0;
+			left: 0;
+			height: 100%;
+			z-index: 100;
+			margin-left: ($secondary-width - 1em)*-1;
+			&:hover,
+			.sidebar-is-active & {
+				margin-left: 0;
+			}
+		}
+	}
+}

data/template/sass/_module.scss

@@ -0,0 +1,63 @@
+
+// Modules
+// ============================================================================
+
+
+
+// Logo
+// ============================================================================
+.site-title {
+	@include rem(font-size, $base-font-size);
+	> a {
+		display: block;
+		text-decoration: none;
+	}
+}
+
+
+
+// Typography
+// ============================================================================
+.font-size-xl { @include rem(font-size, $font-size-xl); }
+.font-size-l { @include rem(font-size, $font-size-l); }
+.font-size-m { @include rem(font-size, $font-size-m); }
+.font-size-s { @include rem(font-size, $font-size-s); }
+.font-size-xs { @include rem(font-size, $font-size-xs); }
+
+
+
+// Grid test
+// ============================================================================
+.m-gridtest {
+	@include susy-grid-background;
+	
+	[class*="ag"] {
+		margin-bottom: 1em;
+		text-align: center;
+		padding-top: 1em;
+		background-color: rgba(31, 0, 255, 0.4);
+		color: $white;
+		//outline: 2px solid;
+	}
+
+	//$class-slug: [class*="ag"] !default
+	@for $i from 1 through 10 {
+		.ag#{$i} {
+			//outline-color: darken($white, $i*8);
+		}
+	}
+}
+
+.ag1 { @include span-columns(2,10); } 
+.ag2 { @include span-columns(6,10); }
+	.ag4 { @include span-columns(3,6); }
+	.ag5 { @include span-columns(3 omega,6); }
+	
+	.ag6 { @include span-columns(2,6); }
+	.ag7 { @include span-columns(4 omega,6); }
+		.ag8 { @include span-columns(2,4); }
+		.ag9 { @include span-columns(2 omega,4); }
+		.ag10 { @include span-columns(4 omega,4); }
+
+.ag3 { @include span-columns(2 omega,10); }
+.ag11 { clear: both; background-color: $lightgray;}

data/template/sass/style.scss

@@ -0,0 +1,38 @@
+
+// Best/Rough Template
+// by: Oskar Rough Mosumgaard & Steve Sinnwell
+//
+// Remember to check config.rb and the import paths therein
+// ============================================================================
+
+
+// Best must be imported first as it includes some needed functions ("em" etc.)
+@import "best";
+
+// Project configuration
+@import "_config.scss";
+
+// Rem module for easy px-fallbacks
+@import "rem";
+
+// Susy for robust layout math
+@import "susy";
+@include border-box-sizing;
+
+// Compass
+@import "compass/typography/text/replacement";
+@import "compass/css3";
+
+// Fancybox
+// Remember to include the script in footer.js as well.
+//@import "../components/fancybox/source/jquery.fancybox.css";
+
+
+// Project styles (should be emptied for every new project)
+@import "_base.scss";
+@import "_layout.scss";
+@import "_module.scss";
+@import "_labs.scss";
+@import "_m-navigation.scss";
+@import "_m-colors.scss";
+@import "_m-breakpoints.scss";

data/template/typography.html

@@ -0,0 +1,120 @@
+
+<!--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>Typography</title>
+  </head>
+  <body class="page-typography">
+    <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>
+              <h1>Typography</h1>
+              <p>Gimme some tasty typography. Ok?!</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              <h2>This is my h2 header</h2>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.</p>
+              <p class="font-size-xl">XL $base-font-size*3;</p>
+              <p class="font-size-l">L: $base-font-size*2;</p>
+              <p class="font-size-m">M: $base-font-size;</p>
+              <p class="font-size-s">S: $base-font-size*.75;</p>
+              <p class="font-size-xs">XS: $base-font-size*.5;</p>
+            </article>
+            <div class="m-breakpoints">
+              <div class="breakpoint--small">I'm the small breakpoint</div>
+              <div class="breakpoint--medium">I'm the medium breakpoint</div>
+              <div class="breakpoint--large">I'm the large breakpoint</div>
+            </div>
+          </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="selected">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="selected">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>

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: best
 version: !ruby/object:Gem::Version 
-  hash: 29
+  hash: 27
   prerelease: 
   segments: 
   - 0
   - 0
-  - 1
-  version: 0.0.1
+  - 2
+  version: 0.0.2
 platform: ruby
 authors: 
 - Steve Sinnwell
@@ -74,7 +74,134 @@ extensions: []
 extra_rdoc_files: []
 
 files: 
+- README.md
+- framework/best/best.rb
+- framework/best/stylesheets/_best.scss
+- framework/best/stylesheets/best/_button.scss
+- framework/best/stylesheets/best/_effects.scss
+- framework/best/stylesheets/best/_form.scss
+- framework/best/stylesheets/best/_layout.scss
+- framework/best/stylesheets/best/_navigation.scss
+- framework/best/stylesheets/best/_reset.scss
+- framework/best/stylesheets/best/_utilities.scss
+- framework/best/stylesheets/best/effects/_iterative.scss
+- framework/best/stylesheets/best/effects/_keyframes.scss
+- framework/best/stylesheets/best/form/_form-layout.scss
+- framework/best/stylesheets/best/form/_form-style.scss
+- framework/best/stylesheets/best/form/_form-validation.scss
+- framework/best/stylesheets/best/layout/_dl-horizontal.scss
+- framework/best/stylesheets/best/layout/_equal-heights.scss
+- framework/best/stylesheets/best/layout/_layout-center.scss
+- framework/best/stylesheets/best/layout/_mediablock.scss
+- framework/best/stylesheets/best/navigation/_navigation-breadcrumb.scss
+- framework/best/stylesheets/best/navigation/_navigation-dropdown.scss
+- framework/best/stylesheets/best/navigation/_navigation-horizontal.scss
+- framework/best/stylesheets/best/navigation/_navigation.scss
+- framework/best/stylesheets/best/navigation/_tinynav.scss
+- framework/best/stylesheets/best/reset/_normalize.scss
+- framework/best/stylesheets/best/utilities/_em.scss
 - lib/best.rb
+- template/breakpoints.html
+- template/codekit-config.json
+- template/colors.html
+- template/components/custom-select/arrow.gif
+- template/components/custom-select/custom-select.css
+- template/components/custom-select/custom-select.html
+- template/components/custom-select/custom-select.js
+- template/components/custom-select/customSelect.jquery.js
+- template/components/custom-select/customSelect.jquery.min.js
+- template/components/dropdown/dropdown.css
+- template/components/dropdown/dropdown.html
+- template/components/dropdown/dropdown.js
+- template/components/example component/component.css
+- template/components/example component/component.html
+- template/components/example component/component.js
+- template/components/fancybox/CHANGELOG.md
+- template/components/fancybox/component.json
+- template/components/fancybox/demo/1_b.jpg
+- template/components/fancybox/demo/1_s.jpg
+- template/components/fancybox/demo/2_b.jpg
+- template/components/fancybox/demo/2_s.jpg
+- template/components/fancybox/demo/3_b.jpg
+- template/components/fancybox/demo/3_s.jpg
+- template/components/fancybox/demo/4_b.jpg
+- template/components/fancybox/demo/4_s.jpg
+- template/components/fancybox/demo/5_b.jpg
+- template/components/fancybox/demo/5_s.jpg
+- template/components/fancybox/demo/ajax.txt
+- template/components/fancybox/demo/iframe.html
+- template/components/fancybox/demo/index.html
+- template/components/fancybox/lib/jquery-1.8.2.min.js
+- template/components/fancybox/lib/jquery.mousewheel-3.0.6.pack.js
+- template/components/fancybox/README.md
+- template/components/fancybox/source/blank.gif
+- template/components/fancybox/source/fancybox_loading.gif
+- template/components/fancybox/source/fancybox_overlay.png
+- template/components/fancybox/source/fancybox_sprite.png
+- template/components/fancybox/source/helpers/fancybox_buttons.png
+- template/components/fancybox/source/helpers/jquery.fancybox-buttons.css
+- template/components/fancybox/source/helpers/jquery.fancybox-buttons.js
+- template/components/fancybox/source/helpers/jquery.fancybox-media.js
+- template/components/fancybox/source/helpers/jquery.fancybox-thumbs.css
+- template/components/fancybox/source/helpers/jquery.fancybox-thumbs.js
+- template/components/fancybox/source/jquery.fancybox.css
+- template/components/fancybox/source/jquery.fancybox.js
+- template/components/fancybox/source/jquery.fancybox.pack.js
+- template/components/jquery/component.json
+- template/components/jquery/composer.json
+- template/components/jquery/jquery.js
+- template/components/jquery/jquery.min.js
+- template/config.rb
+- template/css/style.css
+- template/fancybox.html
+- template/forms.html
+- template/grid.html
+- template/index.html
+- template/jade/--- from cybex as inspiration/keyvisuals.jade
+- template/jade/--- from cybex as inspiration/m-carousel.jade
+- template/jade/--- from cybex as inspiration/m-faq.jade
+- template/jade/--- from cybex as inspiration/m-keyvisual.jade
+- template/jade/--- from cybex as inspiration/m-search.jade
+- template/jade/--- from cybex as inspiration/m-slideshow.jade
+- template/jade/--- from cybex as inspiration/m-social.jade
+- template/jade/breakpoints.jade
+- template/jade/colors.jade
+- template/jade/fancybox.jade
+- template/jade/forms.jade
+- template/jade/grid.jade
+- template/jade/includes/module-development.jade
+- template/jade/includes/nav-development.jade
+- template/jade/includes/nav-meta.jade
+- template/jade/includes/nav-primary.jade
+- template/jade/includes/nav-secondary.jade
+- template/jade/index.jade
+- template/jade/layouts/layout-footer.jade
+- template/jade/layouts/layout-header.jade
+- template/jade/layouts/layout-html5.jade
+- template/jade/layouts/layout-page.jade
+- template/jade/mixins/form-helpers.jade
+- template/jade/mixins/mixin-menu.jade
+- template/jade/typography.jade
+- template/js/footer.js
+- template/js/footer.min.js
+- template/js/header.js
+- template/js/header.min.js
+- template/js/main.js
+- template/js/main.min.js
+- template/js/vendor/jquery.flexslider.min.js
+- template/js/vendor/modernizr-custom.js
+- template/readme.md
+- template/sass/_base.scss
+- template/sass/_config.scss
+- template/sass/_labs.scss
+- template/sass/_layout.scss
+- template/sass/_m-breakpoints.scss
+- template/sass/_m-colors.scss
+- template/sass/_m-navigation.scss
+- template/sass/_m-offcanvas.scss
+- template/sass/_module.scss
+- template/sass/style.scss
+- template/typography.html
 homepage: http://kopfwelt.com/best/
 licenses: []