stipe 0.0.2

data/stylesheets/stipe/grid/_mixins.scss

@@ -0,0 +1,66 @@
+///////// 12/16 col 960 grid system ///////////
+// ----------------------------------------
+// use example for a 12 col layout, 4 col width, conversion to %, add left/right padding and 1px border
+// @include grid(12, 4, $grid_padding: 36, $grid_border: 1);
+//
+// All values are entered as integers and conversion math is done in the mixin.
+// Do not enter combination values such as '36em'
+
+@mixin grid($col_count, $grid_child, $grid_padding_lr, $grid_padding_tb, $grid_border, $grid_uom, $col_gutter, $grid_type, $grid_align, $grid_context) {
+
+	@if $grid_type == 12 {
+		$col_width: 80 - $col_gutter;
+		@include the_grid($col_count, $col_width, $grid_uom, $grid_padding_lr, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context);
+	}
+	@else if $grid_type == 16 {
+		$col_width: 60 - $col_gutter;
+		@include the_grid($col_count, $col_width, $grid_uom, $grid_padding_lr, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align);
+	}
+}
+
+/////////// main content dusplay box //////////////
+// -----------------------------------------------
+@mixin full_width_block($main_col_count, $main_grid_align: center, $main_grid_uom: percent) {
+	$col_count: $main_col_count + 0.25;  // additional value compensates for not having 10px margin
+	@include grid($col_count, $grid_align: $main_grid_align, $grid_uom: $main_grid_uom);
+}
+
+
+///////// prefix value accounts for a full column in the grid ////////////
+// -----------------------------------------------------------------------
+@mixin prefix($grid_type, $col_count, $grid_uom: $grid_uom, $move: prefix) {
+	@include ppps ($grid_type, $col_count, $grid_uom, $move);
+}
+
+///////// suffix value accounts for a full column in the grid ////////////
+// -----------------------------------------------------------------------
+
+@mixin suffix($grid_type, $col_count, $grid_uom: $grid_uom, $move: suffix) {
+	@include ppps ($grid_type, $col_count, $grid_uom, $move);
+}
+
+///////// push value accounts for a full column in the grid ////////////
+// -----------------------------------------------------------------------
+
+@mixin push($grid_type, $col_count, $grid_uom: $grid_uom, $move: push) {
+	@include ppps ($grid_type, $col_count, $grid_uom, $move);
+	position: relative;
+}
+
+///////// pull value accounts for a full column in the grid ////////////
+// -----------------------------------------------------------------------
+
+@mixin pull($grid_type, $col_count, $grid_uom: $grid_uom, $move: pull) {
+	@include ppps ($grid_type, $col_count, $grid_uom, $move);
+	position: relative;
+}
+
+/////////// `Grid >> Children (Alpha ~ First, Omega ~ Last) ///////////
+// --------------------------------------------------------------------
+@mixin alpha() {
+	margin-left: 0;
+}
+
+@mixin omega() {
+	margin-right: 0;
+}

data/stylesheets/stipe/grid/lib/_grid_background.scss

@@ -0,0 +1,10 @@
+.grid_12_col_background {
+	background: url(/axle/images/12_col.gif);
+	margin-bottom: 20px;
+	float: left;	
+}
+
+.grid_12_col_background_shift {
+	@extend %grid_12_col_background;
+	background-position: -10px 0 !important;	
+}

data/stylesheets/stipe/grid/lib/_grid_margin.scss

@@ -0,0 +1,23 @@
+// this mixin is called into 'the_grid' 
+// supporting mixins for @mixin grid_placement
+@mixin grid_margin ($child, $margin_calc) {
+	float: left;
+	@if $child == alpha {
+		margin: {	
+			left: 0;
+			right: $margin_calc;
+		}
+	}
+	@else if $child == omega {
+		margin: {
+			left: $margin_calc;
+			right: 0;
+		}
+	}
+	@else if $child == none {
+		margin: {
+			left: $margin_calc;
+			right: $margin_calc;
+		}
+	}
+}

data/stylesheets/stipe/grid/lib/_grid_placement.scss

@@ -0,0 +1,66 @@
+// supporting mixin for @mixin the_grid
+// 'grid_placement' sets display, float and margin for the block
+@mixin grid_placement($grid_align, $grid_uom, $grid_child, $grid_context_width, $margin) {
+	
+	@include box_sizing;
+	
+	@if $grid_align == center {
+		margin: 0 auto;
+	}
+	@else if $grid_align == left {
+		margin: 0;
+	}
+	
+	@else {
+		@if $grid_child == alpha {
+			@if $grid_uom == em {
+				$margin_calc: #{$margin / $em}em;
+				@include grid_margin($grid_child, $margin_calc);
+			}
+			@else if $grid_uom == combo {
+				$margin_calc: #{$margin / $em}em;
+				@include grid_margin($grid_child, $margin_calc);
+			}
+			@else if $grid_uom == percent {
+				$margin_calc: $margin / $grid_context_width * 100%;
+				@include grid_margin($grid_child, $margin_calc);
+			}
+		}
+		
+		@else if $grid_child == omega {
+			@if $grid_uom == em {
+				$margin_calc: #{$margin / $em}em;
+				@include grid_margin($grid_child, $margin_calc);
+			}
+			@else if $grid_uom == combo {
+				$margin_calc: #{$margin / $em}em;
+				@include grid_margin($grid_child, $margin_calc);
+			}
+			@else if $grid_uom == percent {
+				$margin_calc: $margin / $grid_context_width * 100%;
+				@include grid_margin($grid_child, $margin_calc);
+			}
+		}
+		
+		@else if $grid_child == none {
+			@if $grid_uom == em {
+				$margin_calc: #{$margin / $em}em;
+				@include grid_margin($grid_child, $margin_calc);
+			}
+			@else if $grid_uom == combo {
+				$margin_calc: #{$margin / $em}em;
+				@include grid_margin($grid_child, $margin_calc);
+			}
+			@else if $grid_uom == percent {
+				$margin_calc: $margin / $grid_context_width * 100%;
+				@include grid_margin($grid_child, $margin_calc);
+			}
+		}
+		
+		@else if $grid_child == alphaomega {
+			margin-left: 0;
+			margin-right: 0;
+		}
+
+	}	
+}

data/stylesheets/stipe/grid/lib/_push_logic.scss

@@ -0,0 +1,52 @@
+// Sass math that will determine the width of the push, pull, prefix and suffix and write appropiate CSS
+// ---------------------------- //
+@mixin push_logic ($col_count, $grid_uom, $move, $width_gutter) {
+	@if $grid_uom == em {
+		$padding_width: #{($width_gutter * $col_count) / $em}em;
+		@if $move == suffix {
+			padding-right: $padding_width;
+		}
+		@else if $move == prefix {
+			padding-left: $padding_width;
+		}
+		@else if $move == push {
+			left: #{($width_gutter * $col_count) / $em}em;
+		}
+		@else if $move == pull {
+			right: #{($width_gutter * $col_count) / $em}em;
+		}
+	}
+	@else if $grid_uom == percent {
+		$grid_width: ($width_gutter * $col_count) / $grid_960;
+		$padding_width: #{($width_gutter * $col_count) / $grid_960};
+		@if $move == suffix {
+			padding-right: $padding_width;
+		}
+		@else if $move == prefix {
+			padding-left: $padding_width;
+		}
+		@else if $move == push {
+			left: ($width_gutter * $col_count) / $grid_960;
+		}
+		@else if $move == pull {
+			right: ($width_gutter * $col_count) / $grid_960;
+		}
+	}
+	@include box_sizing(content-box);
+}
+
+
+// Push, Pull, Prefix, Suffix logic 
+// Paired down reusable logic, based on $type will determine width + gutter and 
+// send values to the push_logic mixin to determine the value of the Push, Pull, Prefix or Suffix
+// ------------------------------------------------------------------ //
+@mixin ppps ($type, $col_count, $grid_uom, $move) {
+	@if $type == 12 {
+		$width_gutter: 80;
+		@include push_logic ($col_count, $grid_uom, $move, $width_gutter);
+	}
+	@else if $type == 16 {
+		$width_gutter: 60;
+		@include push_logic ($col_count, $grid_uom, $move, $width_gutter);
+	}
+}

data/stylesheets/stipe/grid/lib/_the_grid.scss

@@ -0,0 +1,98 @@
+// 'the_grid' determines width by taking column count, calculates gutter count
+// default setting for grid is ``em`` this is specified in ``_config.scss``
+
+@mixin the_grid($col_count, $col_width, $grid_uom, $grid_padding_lr, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context) {
+	
+	$col_gutter_width: ($col_count - 1) * $col_gutter + ($col_count * $col_width); //determines full col width with gutters
+	
+	$grid_context_width: $grid_context * 80; // determines width of contextual grid block for calculating percentages 
+	
+	@include grid_placement($grid_align, $grid_uom, $grid_child, $grid_context_width, $margin: $col_gutter / 2);
+	
+	@if $grid_uom == em {
+		@if $grid_border > 0 {
+			border: #{$grid_border}px $standard_border_style $border_color;
+		}
+		
+		@if $grid_padding_lr > 0 {
+			padding: {
+				left: em($grid_padding_lr);
+				right: em($grid_padding_lr);
+			}
+		}
+		@if $grid_padding_tb > 0 {
+			padding: {
+				top: em($grid_padding_tb);
+				bottom: em($grid_padding_tb);
+			}
+		}
+		$grid_width: em($col_gutter_width);
+		width: $grid_width;
+		
+		
+		// fallback for unsupported browsers
+		$grid_width_fallback: $col_gutter_width - (($grid_padding_lr * 2) + ($grid_border * 2));
+		
+		@if $grid_width_fallback < $col_gutter_width {
+			.ie7 & {
+		   	width: #{$grid_width_fallback}px;
+		   }
+		}
+	}	
+
+	@else if $grid_uom == percent {
+		@if $grid_border > 0 {
+			border: #{$grid_border}px $standard_border_style $border_color;
+		}
+		
+		$grid_width: $col_gutter_width / $grid_context_width * 100%;
+		@if $grid_padding_lr > 0 {
+			padding: {
+				//left: $grid_padding_lr / $grid_960;
+				left: $grid_padding_lr / $grid_context_width * 100%;
+				right: $grid_padding_lr / $grid_context_width * 100%;
+			}
+		}
+		@if $grid_padding_tb > 0 {
+			padding: {
+				top: $grid_padding_tb / $grid_context_width * 100%;
+				bottom: $grid_padding_tb / $grid_context_width * 100%;
+			}
+		}
+		width: $grid_width;
+		
+		// fallback for unsupported browsers
+		$grid_width_fallback: $col_gutter_width - (($grid_padding_lr * 2) + ($grid_border * 2));
+		
+		@if $grid_width_fallback < $col_gutter_width {
+			.ie7 & {
+		   	width: $grid_width_fallback / $grid_context_width * 100%;
+		   }
+		}
+	}
+	@else if $grid_uom == combo {
+		$grid_width: $col_gutter_width / $grid_context_width * 100%;
+		@if $grid_padding_lr > 0 {
+			padding: {
+				left: em($grid_padding_lr);
+				right: em($grid_padding_lr);
+			}
+		}
+		@if $grid_padding_tb > 0 {
+			padding: {
+				top: em($grid_padding_tb);
+				bottom: em($grid_padding_tb);
+			}
+		}
+		width: $grid_width;
+		
+		// fallback for unsupported browsers
+		$grid_width_fallback: $col_gutter_width - (($grid_padding_lr * 2) + ($grid_border * 2));
+		
+		@if $grid_width_fallback < $col_gutter_width {
+			.ie7 & {
+		   	width: $grid_width_fallback / $grid_context_width * 100%;
+		   }
+		}
+	}
+}

data/stylesheets/stipe/resets/_eric_meyer.scss

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

data/stylesheets/stipe/resets/_toadstool.scss

@@ -0,0 +1,212 @@
+// Toadstool core v0.0.0.1
+// This document is not to be edited as it will be versioned
+// -----------------------------------------------------------------
+
+
+
+
+// *-------------------------------------------------------------------------------
+// *
+// *	HTML5 Reset :: style.css
+// *	----------------------------------------------------------
+// *	We have learned much from/been inspired by/taken code where offered from:
+// *	
+// *	Eric Meyer					:: http://ericmeyer.com
+// *	HTML5 Doctor				:: http://html5doctor.com
+// *	and the HTML5 Boilerplate	:: http://html5boilerplate.com
+// *	
+// *	Mods by Dale Sande			:: toadstool awesome
+// *	
+// *-------------------------------------------------------------------------------
+
+
+// * Let's default this puppy out
+// *-------------------------------------------------------------------------------
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	//outline: 0;
+	vertical-align: baseline;
+	background: transparent;
+}
+
+body {
+	//line-height: 1;
+	font-size: 100%;
+	-webkit-font-smoothing: antialiased;
+}
+
+article, aside, figure, footer, header, hgroup, nav, section {
+	display: block;
+}
+
+// * Responsive images and other embedded objects
+// * Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
+// * There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue.
+
+img, object, embed {
+	max-width: 100%;
+}
+
+img {
+	border-style: none;
+	border-color: transparent;
+	border-width: 0;
+}
+
+// * we use a lot of ULs that aren't bulleted. 
+// * don't forget to restore the bullets within content.
+
+ol,ul {
+	list-style: none;
+}
+
+blockquote, q {
+	quotes: none;
+}
+
+blockquote {
+	&:before, &:after {
+		content: '';
+		content: none;
+	}
+}
+
+q {
+	&:before, &:after {
+		content: '';
+		content: none;
+	}
+}
+
+a {
+	margin: 0;
+	padding: 0;
+	font-size: 100%;
+	vertical-align: baseline;
+	background: transparent;
+	&:focus {
+		text-decoration: underline ;
+		outline: none;
+	}
+}
+
+del {
+	text-decoration: line-through;
+}
+
+
+pre {
+	//white-space: pre
+	// * CSS2
+	white-space: pre-wrap;
+	// * CSS 2.1
+	//white-space: pre-line
+	// * CSS 3 (and 2.1 as well, actually)
+	word-wrap: break-word;
+	// * IE
+}
+
+input {
+	&[type="radio"] {
+		vertical-align: text-bottom;
+	}
+}
+
+input, textarea, select, button {
+	font-family: inherit;
+	font-weight: inherit;
+	background-color: #fff;
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
+table {
+	font-size: inherit;
+	font: 100%;
+}
+
+sub {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+}
+
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+// * standardize any monospaced elements
+
+pre, code, kbd, samp {
+	font-family: monospace, sans-serif;
+}
+
+// * hand cursor on clickable elements
+
+.clickable, label {
+	cursor: pointer;
+}
+
+input {
+	&[type=button], &[type=submit] {
+		cursor: pointer;
+	}
+}
+
+button {
+	cursor: pointer;
+	margin: 0;
+	width: auto;
+	overflow: visible;
+}
+
+a.button {
+	display: inline-block;
+}
+
+// * scale images in IE7 more attractively
+
+.ie7 img {
+	-ms-interpolation-mode: bicubic;
+}
+
+// * Ok, this is where the fun starts.
+// *-------------------------------------------------------------------------------
+
+a:link {
+	-webkit-tap-highlight-color: $webkit_tap_hightlight;
+}
+
+ins {
+	background-color: $ins_color;
+	color: black;
+	text-decoration: none;
+}
+
+mark {
+	background-color: $mark_color;
+	color: $primary_text;
+	font-style: italic;
+	font-weight: bold;
+}
+	
+::selection {
+	background: $selection_color;
+	color: $selection_text_color;
+}
+
+::-moz-selection {
+	background: $selection_color;
+	color: $selection_text_color;
+}