stipe 0.0.2

data/stylesheets/stipe/stipe/_extends.scss

@@ -0,0 +1,42 @@
+
+
+//* Generic global UI objects */
+//* ------------------------- */
+%clearfix {
+	@include clearfix;
+}
+
+%standard_block_spacing {
+	@include standard_block_spacing;
+}
+
+%standard_hr {
+	@include standard_hr;
+}
+
+%standard_rounded_borders {
+	@include standard_rounded_border;
+}
+
+%box_sizing {
+	@include box_sizing;
+}
+
+// Standardized uses for box and text shadows //
+//* text shadows */
+//* ------------ */
+%primary_text_shadow {
+	@include primary_text_shadow;
+}
+%disabled_text_shadow {
+	@include disabled_text_shadow;
+}
+
+//* box shadows */
+//* ----------- */
+%primary_box_shadow {
+	@include primary_box_shadow;
+}
+%disabled_box_shadow {
+	@include disabled_box_shadow;
+}

data/stylesheets/stipe/stipe/_mixins.scss

@@ -0,0 +1,291 @@
+// This document is not to be edited as it will be versioned
+// -----------------------------------------------------------------
+
+
+// This document is to house Toadstools dynamic mixins with arguments
+// These mixins are not intended to be application specific
+
+
+// required default value to for vendor prefix support
+// -----------------------------------------------------
+$prefix_defaults: -moz- -webkit- -o- -ms- '';
+$webkit_support: -webkit- '';
+$moz_webkit_support: -moz- -webkit- '';
+
+
+
+
+/////// shadow arguments /////////
+// -------------------------------
+$shadow: #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em;
+$inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
+
+@mixin box_shadow ($shadow_color, $shadow, $prefixes: $prefix_defaults) {
+	@each $prefix in $prefixes {
+		#{$prefix}box-shadow: $shadow_color $shadow;
+	}
+}
+
+@mixin dual_box_shadow ($shadow_color, $shadow, $inset_color, $inset_shadow, $prefixes: $prefix_defaults) {
+	@each $prefix in $prefixes {
+		#{$prefix}box-shadow: $shadow_color $shadow, inset $inset_color $inset_shadow;
+	}
+}
+
+@mixin text_shadow ($shadow_color, $shadow, $prefixes: $prefix_defaults) {
+	@each $prefix in $prefixes {
+		#{$prefix}text-shadow: $shadow_color $shadow;
+	}
+}
+/////// shadow arguments /////////
+
+
+
+/////// border-radius arguments	/////////
+// --------------------------------------
+@mixin border_radius ($border_radius, $prefixes: $webkit_support) {
+	@each $prefix in $prefixes {
+		#{$prefix}border-radius: $border_radius;
+	}
+}
+/////// border-radius arguments	/////////
+
+
+
+/////// box-sizing arguments	/////////
+// --------------------------------------
+@mixin box_sizing ($box_sizing: border-box, $prefixes: $moz_webkit_support) {
+	@each $prefix in $prefixes {
+		#{$prefix}box-sizing: $box_sizing;
+	}
+}
+/////// box-sizing arguments	/////////
+
+
+
+/////////// image with gradient background ////////////
+// ------------------------------------------------- //
+
+// This tool is pretty crazy and a little complex. Purpose is to simplify the creation of dual background assets that consist of an image and a gradient background. 
+// This tool also requires that a gradient object be created as variables. 
+// Known restrictions ... images must be .png, position of background is currently hard-coded
+@mixin icon_gradient_background($icon_image, $fallback_color, $w3c_color_spec, $safari_color_spec, $ie_start, $ie_stop) {
+	// w3c //: 
+	@include linear_gradient_bkgimage ('#{$imgDir}#{$icon_image}.png',5% 50%, $fallback_color, $w3c_color_spec);
+	// legacy safari //
+	@include linear_gradient_bkgimage_legacy_safari ('#{$imgDir}#{$icon_image}.png', 5% 50%, $safari_color_spec);
+	// IE suck
+	@include linear_gradient_legacy_ie ($ie_start, $ie_stop);
+}
+
+// Example using this mixin
+// .your_new_class {
+// 	@include icon_gradient_background(
+// 		$icon_image: play_icon, 
+// 		$fallback_color: $echo_color_bravo, 
+// 		$w3c_color_spec: $alpha_color_gradient_var_w3c, 
+// 		$safari_color_spec: $alpha_color_gradient_var_legacy_safari, 
+// 		$ie_start: $echo_color_delta, 
+// 		$ie_stop: $echo_color_delta);
+// 	}
+// }
+
+
+
+/////// column count arguments	/////////
+// --------------------------------------
+@mixin column_count($col_count, $col_gap, $prefixes: $prefix_defaults) {
+	@each $prefix in $prefixes {
+		#{$prefix}column-count: $col_count;
+		#{$prefix}column-gap: $col_gap;
+	}
+}
+/////// column count arguments	/////////
+
+
+
+///////// flexbox arguments	/////////
+// -----------------------------------
+@mixin flexbox ($width, $height, $orient: horizontal, $pack: center, $align: center, $prefixes: $prefix_defaults) {
+	@each $prefix in $prefixes {
+		display: #{$prefix}box;
+		#{$prefix}box-orient: $orient;
+		#{$prefix}box-pack: $pack;
+		#{$prefix}box-align: $align;
+	}
+	height: $height;
+	width: $width;
+}
+
+	
+@mixin flex ($value, $prefixes: $prefix_defaults) {
+	@each $prefix in $prefixes {
+		#{$prefix}box-flex: $value;
+	}
+}
+///////// flexbox arguments	/////////
+
+
+
+/////// transition arguments //////////
+// http://www.w3schools.com/css3/css3_pr_transition.asp
+@mixin transition ($property, $duration, $timing_function, $delay, $prefixes: $prefix_defaults) {
+	@each $prefix in $prefixes {
+		#{$prefix}transition: $property $duration $timing_function $delay;
+	}
+}
+/////// transition arguments //////////
+
+
+
+/////// transform arguments //////////
+// http://www.w3schools.com/css3/css3_pr_transform.asp
+@mixin transform ($function, $prefixes: $prefix_defaults) {
+	@each $prefix in $prefixes {
+		#{$prefix}transform: $function;
+	}
+}
+/////// transform arguments //////////
+
+
+
+////////// style placeholder text //////////
+@mixin placeholder_styles ($color) {
+	color: $color;
+}
+
+@mixin placeholder ($color) {
+	&::-webkit-input-placeholder {
+		@include placeholder_styles ($color);
+	}
+	&:-moz-placeholder {
+		@include placeholder_styles ($color);
+	}
+	&:-ms-input-placeholder {
+		@include placeholder_styles ($color);
+	}
+}
+////////// style placeholder text //////////
+
+
+
+////////////// hide text ////////////
+// Kellum Method
+// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+@mixin hide_text {
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+}
+////////////// hide text ////////////
+
+
+
+/////// clearfix //////////
+@mixin clearfix () {
+	zoom: 1;
+	&:before {
+		content: "\0020";
+		display: block;
+		height: 0;
+		overflow: hidden;
+	}
+	&:after {
+		content: "\0020";
+		display: block;
+		height: 0;
+		overflow: hidden;
+		clear: both;
+	}
+}
+/////// clearfix //////////
+
+
+
+///////// inset border /////////
+@mixin inset_border () {
+	@include box_shadow(inset 0 0 1px, $alpha_gray);
+}
+///////// inset border /////////
+
+
+
+/////// center text trick	/////////
+// ---------------------------------
+// By setting the height of the block element and the line-height to the same value
+// this will typically center the text in the block.
+// If for some reason this needs adjustment, set a new value for the $line_height.
+//
+//
+@mixin center_text ($block_height, $line_height: $block_height) {
+	height: $block_height;
+	line-height: $line-height;
+}
+/////// center text trick	/////////
+
+
+
+// a standardized border radius
+// ----------------------------
+@mixin standard_rounded_border ($standard_round_corner, $standard_border_style, $standard_corner_width, $standard_border_color) {
+	@include border_radius(#{$standard_round_corner / $em}rem);
+	border: $standard_corner_width $standard_border_style $standard_border_color;
+}
+
+
+
+// This mixin is used for a linear layout of LIs versus using floats
+// Build off of the ``flexbox`` mixin, this tool allows for quick 
+// development of a ul/li layout using flexbox
+// -----------------------------------------------------------------
+@mixin ul_flexbox ($width :100%, $height: auto, $text_align :center) {
+  ul {
+    @include flexbox (horizontal, center, stretch, $width, $height);
+  }
+  li {
+    @include flex(1);
+    text-align: $text_align;
+    height: $height;
+    line-height: $height;
+  }
+}
+
+
+// Standard block clear and default spacing
+// This tool is designed to be a standard spacing element between markup blocks.
+// The only value to be adjusted is the margin-bottom spacing.  This is an argument addressed 
+// in the ``_config.scss`` file
+@mixin standard_block_spacing ($default_block_spacing) {
+	@include clearfix;
+	margin-bottom: #{$default_block_spacing / $em}em;
+}
+
+
+
+// This mixin allows for quick application of a UI to the <hr> tag
+// All values are set in the ``_config.scss`` file
+@mixin standard_hr ($standard_border_style, $standard_hr_width, $standard_hr_spacing, $standard_hr_color){
+	border-bottom: $standard_hr_width $standard_border_style $standard_hr_color;
+	padding-bottom: #{$standard_hr_spacing / $em}rem;
+	margin-bottom: #{$standard_hr_spacing / $em}rem;
+}
+
+
+
+// This series of mixins sets default values for consistant use of text and box shadows
+// throughout your site.  Values are set in the ``_config.scss`` file
+@mixin primary_text_shadow ($h-shadow, $v-shadow, $blur ) {
+	@include text_shadow ($shadow_color, #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
+}
+
+@mixin disabled_text_shadow ($h-shadow, $v-shadow, $blur ) {
+	@include text_shadow (fade-out($shadow_color, 0.5), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
+}
+
+@mixin primary_box_shadow ($h-shadow, $v-shadow, $blur ) {
+	@include box_shadow ($shadow_color, #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
+}
+
+@mixin disabled_box_shadow ($h-shadow, $v-shadow, $blur ) {
+	@include box_shadow (fade-out($shadow_color, 0.4), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
+}

data/stylesheets/stipe/toadstool/_buttons.scss

@@ -0,0 +1,29 @@
+[class*="toadstool"] {
+	.nav_toggle {		//background: -webkit-linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
+		//@include linear_gradient_w3c (#7d7e7d, #{#7d7e7d 0%, #0e0e0e 100%});
+		@include linear_gradient_w3c ($alpha_gray, #{$delta_gray 0%, $alpha_gray 100%});
+		&:hover {
+			@include linear_gradient_w3c ($alpha_gray, #{$alpha_gray 0%, $delta_gray 100%});
+			border-color: $alpha_gray;
+			box-shadow: 0 0 0;
+		}
+		text-shadow: 0 0 0;
+		box-shadow: 0 0 0;
+		border-color: $alpha_gray;
+		float: right;
+		display: none;
+		@media #{$mobile} {
+			display: block;
+			width: auto;
+			padding: em(15) em(10) em(10) em(10);
+			font-weight: normal;
+			span {
+				&:after {
+					content: "\f00b"; 
+					font-family: $icon_font_alpha;
+					font-size: 2em;
+				}
+			}
+		}
+	}
+}

data/stylesheets/stipe/toadstool/_config.scss

@@ -0,0 +1,228 @@
+// The config file is intended to allow users to quickly redefine core elements of the design
+// that will cascade throughout the css to get your design up and running FAST!
+
+
+
+///// Typography configuration /////
+// -----------------------------------------------------------------------------
+// $font_size: 12;
+// 
+$heading_1: 32;
+$heading_2: 24;
+// $heading_3: 28;
+// $heading_4: 18;
+// $heading_5: 18;
+// $heading_6: 18;
+// 
+// $line: $font_size * 1.5;
+// 
+// $small_point_size: 10;
+// $large_point_size: 14;
+// 
+// $primary_font_family: #{Arial, sans-serif};
+// $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif};
+$heading_font_family: #{'Lato', sans-serif};
+
+// $icon_font_alpha: #{'FontAwesome'};
+// $icon_font_bravo: #{'zocial'};
+
+
+///// Default webfont directory /////
+// -----------------------------------------------------------------------------
+// $webfont_directory: "/fonts/";
+
+
+
+///// default image directory /////
+// -----------------------------------------------------------------------------
+// In Sinatra, the images folder resides in the public directory.  This directory is not made publically accessible,
+// so simply referencing the images directory will be fine.
+// $imgDir: "/images/";
+
+
+
+/////// OOCSS generic base colors ////////
+// -----------------------------------------------------------------------------
+// Red, green, yellow, blue, accent and black is not law, but a common theme in most designs.
+// Using Toadstool, all you need to do is edit these 6 hex values and everything else is created
+// by magic, unicorns and fairy dust!
+$alpha_primary:   #5a2e2e;        // red
+$bravo_primary:   #3e4147;        // green
+$charlie_primary: #fffedf;        // yellow
+$delta_primary:   #2a2c31;        // blue
+$echo_primary:    #dfba69;        // accent
+//                  
+$alpha_gray:      #333;           //black
+
+
+
+/////// Toadstool color math ////////
+// -----------------------------------------------------------------------------
+// This is a bootstrap template for creating an array of colors
+// If this is not for you, feel free to comment out
+@import "stipe/color/default_color_pallet";
+
+// Don't like Stipe's color pallet, no worries. Uncomment these lines and go for it!
+// @import "color/color_math";
+// @import "color/grayscale_math";
+
+
+/////// Grid configuration ////////
+// -----------------------------------------------------------------------------
+// setting default units of measurement for Toadstool grid solution
+// $grid_type:                  12;             // sets default column grid
+// $grid_uom:                   percent;        // use either ``em`` or ``percent``
+// $grid_padding_lr:            0;              // sets default left/right padding inside grid block
+// $grid_padding_tb:            0;              // sets default top/bottom padding inside grid block
+// $grid_border:                0;              // sets default border width on all grid blocks
+// $grid_child:                 none;           // sets parent child relationship between grid blocks
+// $grid_align:                 default;        // by default grids float left. Optional argument is ``center``
+// $col_base:                   10;             // equal to 10px in the standard 960.gs
+// $col_gutter:                 $col_base * 2;  // sets default grid gutter width                            
+// $grid_960:                   960 / 100%;     // grid math for percentages
+
+
+
+
+/////// axle's semantic combinations ////////
+// Semantic variables should always be matched up with abstract values, never semantic to semantic
+// -----------------------------------------------------------------------------
+
+// abstract 'white' value to easily applied to semantic class objects
+// $white:                                #fff;
+
+// default shadow colors
+// $shadow_color:                         fade-out($alpha_gray, 0.5);
+
+// primary header font color
+// $primary_header_color:                 $alpha_gray;
+
+// primary font color for the app
+// $primary_text:                         $bravo_gray;
+
+// default <a href="#"> link color
+// $href_color:                           $delta_color;
+// $href_color_alt:                       $delta_color_bravo;
+
+// used with the <ins> tag
+// http://www.w3schools.com/tags/tag_ins.asp
+// $ins_color:                            $charlie_color;
+
+// used with the <mark> tag
+// http://www.w3schools.com/html5/tag_mark.asp
+// $mark_color:                           $charlie_color;
+
+// webkit tap highlight color
+// $webkit_tap_hightlight:                $delta_color_bravo;
+
+// overrides the default content selection color in the browser
+// $selection_color:                      $charlie_color;
+// $selection_text_color:                 $primary_text;
+
+// default border color
+// $border_color:                         $charlie_gray;
+
+
+
+// Config defaults for forms
+// -----------------------------------------------------------------------------
+// $alert_background_color:        $alpha_color;
+
+// $input_disabled:                $bravo_gray;
+// $input_disabled_bkg:            lighten($input_disabled, 75%);
+// $input_disabled_border:         lighten($input_disabled, 50%);
+// $input_disabled_text:           lighten($input_disabled, 50%);
+//                                 
+// $form_field_background_color:   $white;
+// $form_field_focus_color:        $white;
+// $form_field_fail_bkg:           $white;
+//                                 
+// $form_field_border:             $charlie_gray;
+// $form_field_border_fail:        $alpha_color;
+// $form_field_focus_border_color: $charlie_gray;
+//                                 
+// $form_field_text:               $primary_text;
+// $error_text:                    $alpha_color;
+// $form_field_fail:               $alpha_color;
+// $form_field_text_fail:          $alpha_color;
+// $instructional_text:            $charlie_gray;
+
+
+
+// Config defaults for buttons
+// -----------------------------------------------------------------------------
+// $primary_button_border_color:          $bravo_color;
+// $secondary_button_border_color:        $bravo_gray;
+// $button_text:                          $white;
+
+
+
+// Config defaults for ``standard_rounded_border`` mixin
+// -----------------------------------------------------------------------------
+$standard_round_corner:                3;                // sets default border radius
+$standard_corner_width:                1px;              // sets default border width
+$standard_border_color:                $border_color;    // sets default border color
+
+
+
+// Config defaults for ``standard_block_spacing`` mixin
+// -----------------------------------------------------------------------------
+$default_block_spacing:                20;               // sets margin-bottom
+
+
+
+// Config defaults for site border style
+// -----------------------------------------------------------------------------
+$standard_border_style:                solid;
+
+
+
+// Config defaults for ``standard_hr`` mixin
+// -----------------------------------------------------------------------------
+$standard_hr_spacing:                  40;               // sets padding and margin bottom
+$standard_hr_color:                    $delta_gray;
+$standard_hr_width:                    1px;
+
+
+
+// Config values for all default shadows
+// -----------------------------------------------------------------------------
+$h-shadow:                             0;                // horizontal shadow settings
+$v-shadow:                             2;                // vertical shaddow settings
+$blur:                                 3;                // blur settings
+
+$inset_color:                          $shadow_color;    // for use with ``dual_box_shadow`` mixin
+$ih-shadow:                            0;                // inset horizontal shadow settings
+$iv-shadow:                            2;                // inset vertical shaddow settings
+$iblur:                                3;                // inset blur settings
+
+
+
+
+/////////////// UI @media breakpoint defaults ////////////////
+// -----------------------------------------------------------------------------
+// $tablet:                    "screen and (max-width: 64em)";
+// $tablet_portrait:           "screen and (max-width: 50em) and (orientation: portrait)";
+// $tablet_landscape:          "screen and (max-width: 50em) and (orientation: landscape)";
+// 
+// $mobile:                    "screen and (max-width: 30em)";
+// $mobile_portrait:	          "screen and (max-width: 30em) and (orientation : portrait)";
+// $mobile_landscape:	        "screen and (max-width: 30em) and (orientation : landscape)"; 
+
+
+// Compass function for creating grid background
+// -----------------------------------------------------------------------------
+// @import "compass/layout/grid-background";
+// $grid-background-total-columns: 12;
+// $grid-background-column-width: 60px;
+// $grid-background-gutter-width: 20px;
+// $grid-background-offset: 10px;
+// $grid-background-column-color: scale-color($echo_primary,$lightness:80%);
+
+
+
+
+
+
+
+