best 0.0.1 → 0.0.2

data/framework/best/stylesheets/best/form/_form-validation.scss

@@ -0,0 +1,25 @@
+// Form validation
+// ============================================================================
+/* Not done. Don't use. */
+
+@import "compass/css3/border-radius";
+
+
+@mixin form-validation() {
+	.field-help {
+		@include border-bottom-left-radius(1em);
+		@include border-bottom-right-radius(1em);
+		margin: 0 1em;
+		padding: .3em 1em .4em;
+		background: green;
+		color: #fff;
+	}
+	form .error {
+		background: red;
+		color: #fff;
+	}
+	input[type=text].field_error,
+	textarea.field_error {
+		border-color: red;
+	}
+}

data/framework/best/stylesheets/best/layout/_dl-horizontal.scss

@@ -0,0 +1,32 @@
+// Horizontal list
+// ============================================================================
+
+/* Can't even remember what this is… */
+
+/*
+	<div class="m-dl-horizontal">
+		<dl>
+			<dt><i class="icon icon-headset"></i></dt>
+			<dd>text<small>small text</small></dd>
+			<dt><i class="icon icon-chat"></i></dt>
+			<dd>text<small>small text</small></dd>
+			<dt><i class="icon icon-mail"></i></dt>
+			<dd>text<small>small text</small></dd>
+		</dl>
+	</div>
+*/
+
+@mixin dl-horizontal($width: 3.75em) {
+	dt {
+		float: left;
+		width: $width;
+		overflow: hidden;
+		clear: left;
+		text-align: right;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	dd {
+		margin-left: $width;
+	}
+}

data/framework/best/stylesheets/best/layout/_equal-heights.scss

@@ -0,0 +1,70 @@
+// Equal heights
+// ============================================================================
+/* Equal height columns. Needs testing. */
+/*
+	<div class="l-equal-heights">
+		<div class="l-col"></div>
+		<div class="l-col"></div>
+	</div>
+*/
+
+@mixin equal-heights($selector: unquote('.article')) {
+	display: table;
+	width: 100%;
+	table-layout: fixed;
+	overflow: hidden;
+	#{$selector} {
+		display: table-cell;
+		float: none;
+		vertical-align: top;
+	}
+}
+
+/*
+## Alternative method
+Also see: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
+(not ready for use in combination with Susy)
+
+```` $('.l-tertiary .article').wrapAll('<div class="container-eq eq-4"><div class="container-eq eq-3"><div class="container-eq eq-2"><div class="container-eq eq-1">');````
+*/
+
+@mixin equal-heights-alt($selector: unquote('.article'), $column-width: 22.68%, $gutter-width: 3.093%) {
+	.container-eq {
+		clear: left;
+		float: left;
+		width: 100%;
+	}
+	.eq-1 {
+		clear: none;
+		position:relative;
+		right: 25%;
+		background: #fff689; /* column 1 background colour */
+	}
+	.eq-2 {
+		position:relative;
+		right: 25%;
+		background: #ffa7a7; /* column 2 background colour */
+	}
+	.eq-3 {
+		position:relative;
+		right: 25%;
+		background: #89ffa2; /* column 3 background colour */
+	}
+	.eq-4 {
+		overflow:hidden;
+		background: #b2f0f9; /* column 4 background colour */
+	}
+
+	#{$selector} {
+		float: left;
+		width: $column-width;
+		position: relative;
+		overflow: hidden;
+
+		&:nth-child(1) { left: 77%;}
+		&:nth-child(2) { left: 81%;}
+		&:nth-child(3) { left: 85%;}
+		&:nth-child(4) { left: 89%;}
+	}
+
+}

data/framework/best/stylesheets/best/layout/_layout-center.scss

@@ -0,0 +1,20 @@
+// Layout center
+// ============================================================================
+/* Centers an element and gives a max-width. Useful for containers. Not so useful
+now that we're using Susy */
+
+/*
+	<div class="layout-center">This will be centered and given a max-width.</div>
+*/
+
+
+@import "compass/utilities/general/clearfix";
+
+
+
+@mixin layout-center($max-width: 60em, $padding: 1em) {
+	@include pie-clearfix;
+	max-width: $max-width;
+	margin-left: auto; margin-right: auto;
+	padding-left: $padding; padding-right: $padding;
+}

data/framework/best/stylesheets/best/layout/_mediablock.scss

@@ -0,0 +1,34 @@
+// Media Block
+// =============================================================================
+/* The infamous media block module. Instant win */
+/*
+	<div class="media-block">
+		<figure class="media">This is fluid.</figure>
+		<div class="entry">This as well.</div>
+	</div>
+*/
+
+@import "compass/utilities/general/clearfix";
+
+
+
+@mixin media-block($media-selector: unquote(".media"), $entry-selector: unquote(".entry"), $margin-right: 1em) {
+	@include pie-clearfix;
+	// overflow:hidden;
+	// _overflow:visible;
+	// *zoom:1;
+
+	#{$media-selector} {
+		float: left;
+		margin-right: $margin-right;
+		img { display: block;}
+	}
+	#{$entry-selector} {
+		// overflow:hidden;
+		// _overflow:visible;
+		display: table-cell;
+		width: 10000px;
+		*width: auto;
+		*zoom: 1;
+	}
+}

data/framework/best/stylesheets/best/navigation/_navigation-breadcrumb.scss

@@ -0,0 +1,59 @@
+// Navigation Breadcrumb
+// ============================================================================
+/* Use for breadcrumbs */
+/*
+    <p>Just testing</p>
+    <nav class="oskartestingstyledocco">
+    	<ul>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+    	</ul>
+    </nav>
+*/
+
+@import "best/navigation/navigation";
+@import "compass/utilities/general/clearfix";
+
+
+
+@mixin navigation-breadcrumb($alignment : left) {
+	@include navigation;
+	@include pie-clearfix;
+
+	li {
+		float: left;
+	}
+	.divider {
+		padding: 0 0.6em;
+	}
+}
+
+
+// /**
+//  * Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`.
+//  */
+// .breadcrumb > li:before{
+//     content:"» ";
+// }
+// /**
+//  * Remove separator from first item in the list.
+//  */
+// .breadcrumb > li:first-child:before,
+// .breadcrumb--path > li:first-child:before{
+//     content:"";
+//     display:none;
+// }
+// /**
+//  * For denoting a path-like structure, GitHub style.
+//  */
+// .breadcrumb--path > li:before{
+//     content:"/ ";
+// }
+// /**
+//  * Denote the root of the tree.
+//  */
+// .breadcrumb__root{
+//     font-weight:bold;
+// }

data/framework/best/stylesheets/best/navigation/_navigation-dropdown.scss

@@ -0,0 +1,39 @@
+// Navigation Dropdown
+// ============================================================================
+/* Use for dropdowns. Doesn't include styling. */
+/*
+    <nav class="dropdown">
+    	<ul>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+    	</ul>
+    </nav>
+*/
+
+@import "best/navigation/navigation";
+@import "compass/utilities/general/clearfix";
+
+
+
+@mixin navigation-dropdown {
+
+	li {
+		position: relative;
+
+		&:hover > ul {
+			display: block;
+		}
+	}
+
+	li ul {
+		position: absolute;
+		top: auto;
+		z-index: 10;
+	}
+	li li {
+		float: none;
+		margin: 0;
+	}
+}

data/framework/best/stylesheets/best/navigation/_navigation-horizontal.scss

@@ -0,0 +1,34 @@
+// Navigation Horizontal
+// ============================================================================
+/* Use for horizontal navigation */
+/*
+    <p>Just testing</p>
+    <nav class="oskartestingstyledocco">
+    	<ul>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+    	</ul>
+    </nav>
+*/
+
+@import "best/navigation/navigation";
+@import "compass/utilities/general/clearfix";
+
+@mixin navigation-horizontal($alignment: left, $spacing: 1em) {
+	@include navigation;
+	
+	ul {
+		@include pie-clearfix;
+	}
+	li {
+		float: left;
+		@if($alignment == left) {
+			margin-right: $spacing;
+		}
+		@else {
+			margin-left: $spacing;
+		}
+	}
+}

data/framework/best/stylesheets/best/navigation/_navigation.scss

@@ -0,0 +1,28 @@
+
+// Navigation
+// ============================================================================
+/* Used as a base for navigation. */
+/*
+    <p>Just testing</p>
+    <nav class="oskartestingstyledocco">
+    	<ul>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+			<li><a href="#">Link</a></li>
+    	</ul>
+    </nav>
+*/
+
+@mixin navigation {
+	ul {
+		padding: 0;
+		margin: 0;
+	}
+	li {
+		list-style: none;
+	}
+	a {
+		display: inline-block;
+	}
+}

data/framework/best/stylesheets/best/navigation/_tinynav.scss

@@ -0,0 +1,18 @@
+// Tinynav
+// ============================================================================
+/*
+	tinynav() quickly enables you to enable (yo!) tinynav to your navigation. This is dependant on the tinynav.js script
+*/
+
+
+@mixin tinynav($breakpoint: 600px, $menu-selector: unquote(".m-menu-primary > ul")) {
+	
+	// above breakpoint hide tinynav
+	.tinynav { display: none; }
+	
+	// below breakpoint show tinynav and hide menu
+	@media screen and (max-width: $breakpoint) {
+		.tinynav { display: block; }
+		#{$menu-selector} { display: none; }
+	}
+}

data/framework/best/stylesheets/best/reset/_normalize.scss

@@ -0,0 +1,376 @@
+// Normalize
+// ============================================================================
+/*
+In a customized version for Best
+*/
+
+
+/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/*
+ * Corrects `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/*
+ * Corrects `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/*
+ * Addresses styling for `hidden` attribute not present in IE 8/9.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Sets default font family to sans-serif.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Removes default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+
+/*
+ * Corrects font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*
+ * Sets consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/*
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * Removes border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+    height: auto;
+}
+
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/*
+ * Addresses margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * 1. Corrects font family not being inherited in all browsers.
+ * 2. Corrects font size not being inherited in all browsers.
+ * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/*
+ * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to `content-box` in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE 8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/*
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+// Fluid Media
+img, embed, object, video, iframe { max-width: 100%; }