stipe 0.0.2

data/README.md

@@ -0,0 +1,13 @@
+#Stipe Compass Extension
+While developing the Toadstool Styleguide framework I realized that we were beginning to build a core series of mixins. It is this core that is the constant between deployments of the Toadstool framework. To better manage this we are in the process of treating this library as a Compass extension and soon to be gem.
+
+##Please don't mind the mess ...
+This is a work in progress, if you are following along at home, pull master a lot :D
+
+This project is in rapid development Stipe has not yet been processed into a Gem. Until such time, you need to clone the Stipe project into a sibling directory from the Toadstool project. 
+
+projects
+	-- stipe
+	-- toadstool
+	
+To make use of the Stipe gem in it's interim state, there is a secondary `Gemfile.local` file that contains a route to the in-development Stipe library. Using Bundler, run this command `bundle --gemfile Gemfile.local`

data/lib/stipe.rb

@@ -0,0 +1,4 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+
+Compass::Frameworks.register('stipe', :path => extension_path)

data/stylesheets/stipe/_color.scss

@@ -0,0 +1,7 @@
+//
+// Standardized abstract color objects.  NOT to be used as classes appended to a block in the HTML.
+// Preferred uses include @extend %class; or repurpose the mixin within the class.
+//
+
+@import "color/default_color_pallet";
+

data/stylesheets/stipe/_forms.scss

@@ -0,0 +1,24 @@
+// form colors
+$alert_background_color:        $alpha_color !default;
+
+$input_disabled:                $bravo_gray !default;
+$input_disabled_bkg:            lighten($input_disabled, 75%) !default;
+$input_disabled_border:         lighten($input_disabled, 50%) !default;
+$input_disabled_text:           lighten($input_disabled, 50%) !default;
+                                
+$form_field_background_color:   $white !default;
+$form_field_focus_color:        $white !default;
+$form_field_fail_bkg:           $white !default;
+                                
+$form_field_border:             $charlie_gray !default;
+$form_field_border_fail:        $alpha_color !default;
+$form_field_focus_border_color: $charlie_gray !default;
+                                
+$form_field_text:               $primary_text !default;
+$error_text:                    $alpha_color !default;
+$form_field_fail:               $alpha_color !default;
+$form_field_text_fail:          $alpha_color !default;
+$instructional_text:            $charlie_gray !default;
+
+@import "forms/mixins";
+@import "forms/extends";

data/stylesheets/stipe/_gradients.scss

@@ -0,0 +1,11 @@
+// Toadstool core v0.0.0.1
+// This document is not to be edited as it will be versioned
+// -----------------------------------------------------------------
+
+// @import "gradients/mixins/color_gradients";
+
+// This is where new magic may come from
+@import "gradients/mixins/area_51";
+@import "gradients/mixins/linear_gradient_bkgimage";
+
+@import "gradients/extends";

data/stylesheets/stipe/_grid.scss

@@ -0,0 +1,59 @@
+// Toadstool core v0.0.0.1
+// This document is not to be edited as it will be versioned
+// -----------------------------------------------------------------
+
+
+// ...............
+// 960 GRID SYSTEM
+// ...............
+//
+// Created by Nathan Smith. See the official site for more info: http://960.gs/
+//
+// GPL license:
+// http://www.gnu.org/licenses/gpl.html
+//
+// MIT license:
+// http://www.opensource.org/licenses/mit-license.php
+// ---------------------------------------------------------------------------
+
+// ......................
+// Toadstool Grid System
+// ......................
+//
+// Created by Dale Sande
+//
+// ---------------------------------------------------------------------------
+
+
+// setting default units of measurement for Toadstool grid solution
+// -----------------------------------------------------------------
+$grid_type:           12 !default;             // sets default column grid
+$grid_context:        12 !default;             // sets default context of grid width for percentage calculations
+$grid_uom:            percent !default;        // use either ``em`` or ``percent``
+$grid_padding_lr:     0 !default;              // sets default left/right padding inside grid block
+$grid_padding_tb:     0 !default;              // sets default top/bottom padding inside grid block
+$grid_border:         0 !default;              // sets default border width on all grid blocks
+$grid_child:          none !default;           // sets parent child relationship between grid blocks
+$grid_align:          default !default;        // by default grids float left. Optional argument is ``center``
+$col_base:            10 !default;             // equal to 10px in the standard 960.gs
+$col_gutter:          $col_base * 2 !default;  // sets default grid gutter width
+$grid_960:            960 / 100% !default;     // grid math for percentages
+
+
+// the_grid calculates all the variables to define with width of the grid column
+@import "grid/lib/the_grid";
+
+// grid_placement based on $child will define alpha or omega placement
+@import "grid/lib/grid_placement";
+
+// grid_margin applies $margin_calc from grid_placement
+@import "grid/lib/grid_margin";
+
+// Logic support for Push, Pull, Prefix and Suffix
+@import "grid/lib/push_logic";
+
+// The mixins that make this grid thing work
+@import "grid/mixins";
+
+// The extends that make it awesome
+// @import "grid/extends";

data/stylesheets/stipe/_media.scss

@@ -0,0 +1,14 @@
+// media query support
+// -----------------------------------------------------
+
+// I have found that for most designs, the primary breakpoints are with $tablet_portrait first then $mobile.
+
+$mobile:                    "screen and (max-width: 40em)" !default;
+$mobile_portrait:	          "screen and (max-width: 40em) and (orientation : portrait)" !default;
+$mobile_landscape:	        "screen and (max-width: 40em) and (orientation : landscape)" !default; 
+
+$tablet:                    "screen and (max-width: 64em)" !default;
+$tablet_portrait:           "screen and (max-width: 64em) and (orientation: portrait)" !default;
+$tablet_landscape:          "screen and (max-width: 64em) and (orientation: landscape)" !default;
+
+$desktop:                   "screen and (max-width: 120em) and (min-width: 50em)" !default;

data/stylesheets/stipe/_stipe.scss

@@ -0,0 +1,13 @@
+// Base variables
+
+$imgDir:    "/images/" !default;
+
+$font_size: 12 !default;
+$line:      $font_size * 1.5 !default;
+
+//// !do not edit! ////
+$em:          $font_size; // $em ALWAYS == $font-size
+$line_height: #{$line / $em}em;
+
+@import "stipe/mixins";
+@import "stipe/extends";

data/stylesheets/stipe/_typography.scss

@@ -0,0 +1,44 @@
+// * ------------------
+// Type defaults
+// * ------------------
+// only need to edit default font size and family, magical SASS takes care of the rest
+$font_size:             12 !default;
+
+$heading_1:             46 !default;
+$heading_2:             32 !default;
+$heading_3:             28 !default;
+$heading_4:             18 !default;
+$heading_5:             18 !default;
+$heading_6:             18 !default;
+
+$small_point_size:      10 !default;
+$large_point_size:      14 !default;
+
+$line:                  $font_size * 1.5 !default;
+
+$primary_font_family: #{Arial, sans-serif} !default;
+$secondary_font_family: #{"Helvetica Neue", Arial, sans-serif} !default;
+$heading_font_family: #{"Helvetica Neue", Arial, sans-serif} !default;
+
+$icon_font_alpha: #{'FontAwesome'} !default;
+$icon_font_bravo: #{'zocial'} !default;
+
+// Headings default arguments
+$heading_size: $heading_1 !default;
+$heading_font_family: $heading_font_family !default;
+$heading_color: $primary_header_color !default;
+$heading_font_weight: normal !default;
+
+//// !do not edit! ////
+$em:          $font_size; // $em ALWAYS == $font-size
+$line_height: #{$line / $em}em;
+
+
+// *-------------------------------------------------------------------------------
+// intent of the 'text' SCSS is that all essential text elements for the application are placed here
+// individual element styling will be addressed in element name spaced SCSS files
+// *-------------------------------------------------------------------------------
+
+@import "typography/functions";
+@import "typography/mixins";
+@import "typography/extends";

data/stylesheets/stipe/buttons/_extends.scss

@@ -0,0 +1,13 @@
+// Default display Stipe buttons
+// ---------------------------------------------------------
+
+%stipe_buttons {
+	@extend %minimal;
+	margin-right: em(10);
+	&:last-child {
+		margin: 0;
+	}
+	&:nth-child(n+2) {
+		@extend %cupid-green;
+	}
+}

data/stylesheets/stipe/buttons/doc-src/buttons.md

@@ -0,0 +1,3 @@
+#Buttons
+
+Instructions as how to use pre-fab buttons and how to make your own.

data/stylesheets/stipe/buttons/lib/_cupid-green.scss

@@ -0,0 +1,54 @@
+$cupid_background: #7fbf4d !default;
+$cupid_gradient: $cupid_background 0%, #63a62f 100% !default;
+$cupid_background_hover: darken($cupid_background, 4) !default;
+$cupid_gradient_hover: $cupid_background_hover 0%, #5e9e2e 100% !default;
+$cupid_border_color: #63a62f #63a62f #5b992b #63a62f !default;
+$cupid_border_radius: em(3) !default;
+$cupid_inset_box_shadow: #96ca6d !default;
+$cupid_inset_box_shadow_hover: #8dbf67 !default;
+$cupid_inset_box_shadow_active: #548c29 !default;
+$cupid_text_color: #fff !default;
+$cupid_text_weight: bold !default;
+$cupid_font_family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif !default;
+$cupid_font_size: em(12) !default;
+$cupid_padding: em(7) 0 em(8) 0 !default;
+$cupid_text_shadow_color: #4c9021 !default; 
+$cupid_width: em(150) !default;
+
+%cupid-green {
+  @include linear_gradient_w3c ($cupid_background, #{$cupid_gradient});
+  border-width: 1px;
+  border-style: solid;
+  border-color: $cupid_border_color;
+  @include border_radius($cupid_border_radius);
+  @include box_shadow(inset 0 1px 0 0, $cupid_inset_box_shadow);
+  color: $cupid_text_color;
+  font: $cupid_text_weight $cupid_font_size #{$cupid_font_family};
+  line-height: 1em;
+  padding: $cupid_padding;
+  text-align: center;
+  text-shadow: 0 -1px 0 $cupid_text_shadow_color;
+  width: $cupid_width; 
+  &:hover {
+	  @include linear_gradient_w3c ($cupid_background_hover, #{$cupid_gradient_hover});
+    @include box_shadow(inset 0 1px 0 0, $cupid_inset_box_shadow_hover);
+    cursor: pointer;
+  }
+  &:active {
+	  border-width: 1px;
+	  border-style: solid;
+	  border-color: darken(nth($cupid_border_color, 4), 5);
+	  @include box_shadow(inset 0 0 8px 4px, $cupid_inset_box_shadow_active);
+  }
+}
+
+
+
+
+
+
+
+
+
+
+

data/stylesheets/stipe/buttons/lib/_minimal.scss

@@ -0,0 +1,36 @@
+$minimal_background: #e3e3e3 !default;
+$minimal_border_color: #bbb !default;
+$minimal_border_radius: em(3);
+$minimal_inset_shadow_color: #f6f6f6 !default;
+$minimal_font_color: #333 !default;
+$minimal_font_weight: bold !default;
+$minimal_font_size: em(12) !default;
+$minimal_font_family: "helvetica neue", helvetica, arial, sans-serif !default;
+$minimal_padding: em(8) 0 em(9) !default;
+$minimal_text_shadow: 0 1px 0 #fff !default;
+$minimal_width: em(150) !default;
+
+
+%minimal {
+  background: $minimal_background;
+  border: 1px solid $minimal_border_color;
+  @include border_radius($minimal_border_radius);
+  @include box_shadow(inset 0 0 1px 1px, $minimal_inset_shadow_color);
+  color: $minimal_font_color;
+  font: $minimal_font_weight $minimal_font_size #{$minimal_font_family};
+  line-height: 1em;
+  padding: $minimal_padding;
+  text-align: center;
+  text-shadow: $minimal_text_shadow;
+  width: $minimal_width; 
+  &:hover {
+	  background: darken($minimal_background, 5);
+    @include box_shadow(inset 0 0 1px 1px, darken($minimal_inset_shadow_color, 5));
+    color: darken($minimal_font_color, 7);
+    cursor: pointer;
+  }
+  &:active {
+	  background: darken($minimal_background, 8);
+    @include box_shadow(inset 0 0 1px 1px, darken($minimal_inset_shadow_color, 5));
+  }
+}

data/stylesheets/stipe/color/_color_math.scss

@@ -0,0 +1,61 @@
+$alpha_color:$alpha_primary !default;
+$alpha_color_bravo:scale-color($alpha_color,$lightness:10%) !default;
+$alpha_color_charlie:scale-color($alpha_color,$lightness:20%) !default;
+$alpha_color_delta:scale-color($alpha_color,$lightness:30%) !default;
+$alpha_color_echo:scale-color($alpha_color,$lightness:40%) !default;
+$alpha_color_fox:scale-color($alpha_color,$lightness:50%) !default;
+$alpha_color_golf:scale-color($alpha_color,$lightness:60%) !default;
+$alpha_color_hotel:scale-color($alpha_color,$lightness:70%) !default;
+$alpha_color_india:scale-color($alpha_color,$lightness:80%) !default;
+$alpha_color_juliet:scale-color($alpha_color,$lightness:90%) !default;
+
+$bravo_color:$bravo_primary !default;
+$bravo_color_bravo:scale-color($bravo_color,$lightness:10%) !default;
+$bravo_color_charlie:scale-color($bravo_color,$lightness:20%) !default;
+$bravo_color_delta:scale-color($bravo_color,$lightness:30%) !default;
+$bravo_color_echo:scale-color($bravo_color,$lightness:40%) !default;
+$bravo_color_fox:scale-color($bravo_color,$lightness:50%) !default;
+$bravo_color_golf:scale-color($bravo_color,$lightness:60%) !default;
+$bravo_color_hotel:scale-color($bravo_color,$lightness:70%) !default;
+$bravo_color_india:scale-color($bravo_color,$lightness:80%) !default;
+$bravo_color_juliet:scale-color($bravo_color,$lightness:90%) !default;
+
+$charlie_color:$charlie_primary !default;
+$charlie_color_bravo:scale-color($charlie_color,$lightness:10%) !default;
+$charlie_color_charlie:scale-color($charlie_color,$lightness:20%) !default;
+$charlie_color_delta:scale-color($charlie_color,$lightness:30%) !default;
+$charlie_color_echo:scale-color($charlie_color,$lightness:40%) !default;
+$charlie_color_fox:scale-color($charlie_color,$lightness:50%) !default;
+$charlie_color_golf:scale-color($charlie_color,$lightness:60%) !default;
+$charlie_color_hotel:scale-color($charlie_color,$lightness:70%) !default;
+$charlie_color_india:scale-color($charlie_color,$lightness:80%) !default;
+$charlie_color_juliet:scale-color($charlie_color,$lightness:90%) !default;
+
+$delta_color:$delta_primary !default;
+$delta_color_bravo:scale-color($delta_color,$lightness:10%) !default;
+$delta_color_charlie:scale-color($delta_color,$lightness:20%) !default;
+$delta_color_delta:scale-color($delta_color,$lightness:30%) !default;
+$delta_color_echo:scale-color($delta_color,$lightness:40%) !default;
+$delta_color_fox:scale-color($delta_color,$lightness:50%) !default;
+$delta_color_golf:scale-color($delta_color,$lightness:60%) !default;
+$delta_color_hotel:scale-color($delta_color,$lightness:70%) !default;
+$delta_color_india:scale-color($delta_color,$lightness:80%) !default;
+$delta_color_juliet:scale-color($delta_color,$lightness:90%) !default;
+
+$echo_color:$echo_primary !default;
+$echo_color_bravo:scale-color($echo_color,$lightness:10%) !default;
+$echo_color_charlie:scale-color($echo_color,$lightness:20%) !default;
+$echo_color_delta:scale-color($echo_color,$lightness:30%) !default;
+$echo_color_echo:scale-color($echo_color,$lightness:40%) !default;
+$echo_color_fox:scale-color($echo_color,$lightness:50%) !default;
+$echo_color_golf:scale-color($echo_color,$lightness:60%) !default;
+$echo_color_hotel:scale-color($echo_color,$lightness:70%) !default;
+$echo_color_india:scale-color($echo_color,$lightness:80%) !default;
+$echo_color_juliet:scale-color($echo_color,$lightness:90%) !default;
+
+
+
+
+
+
+

data/stylesheets/stipe/color/_default_color_pallet.scss

@@ -0,0 +1,56 @@
+//
+// Standardized abstract color objects.  NOT to be used as classes appended to a block in the HTML.
+// Preferred uses include @extend %class; or repurpose the mixin within the class.
+//
+
+$alpha_primary:   #ec0036 !default; // red
+$bravo_primary:   #299505 !default; // green
+$charlie_primary: #ffff87 !default; // yellow
+$delta_primary:   #2c46b7 !default; // blue
+$echo_primary:    #fc6432 !default; // accent
+          
+$alpha_gray:      #000 !default;    //black
+
+
+@import "color_math";
+@import "grayscale_math";
+
+
+
+/////// Toadstool'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;
+
+// default shadow colors
+$shadow_color:          fade-out($alpha_gray, 0.5) !default;
+
+// primary header font color
+$primary_header_color:  $alpha_gray !default;
+
+// primary font color for the app
+$primary_text:          $bravo_gray !default;
+
+// default <a href="#"> link color
+$href_color:            $delta_color !default;
+$href_color_alt:        $delta_color_bravo !default;
+
+// used with the <ins> tag
+// http://www.w3schools.com/tags/tag_ins.asp
+$ins_color:             $charlie_color !default;
+
+// used with the <mark> tag
+// http://www.w3schools.com/html5/tag_mark.asp
+$mark_color:            $charlie_color !default;
+
+// webkit tap highlight color
+$webkit_tap_hightlight: $delta_color_bravo !default;
+
+// overrides the default content selection color in the browser
+$selection_color:       $charlie_color !default;
+$selection_text_color:  $primary_text !default;
+
+// default border color
+$border_color:          $charlie_gray !default;

data/stylesheets/stipe/color/_extends.scss

@@ -0,0 +1,222 @@
+/////// OOCSS color blocks ////////
+// ----------------------------------------------
+
+//* Standard grayscale objects */
+//* -------------------------- */
+%white {
+	background-color: $white;
+}
+
+%alpha_gray {
+	background-color: $alpha_gray;
+}
+
+%bravo_gray {
+	background-color: $bravo_gray;
+}
+	
+%charlie_gray {
+	background-color: $charlie_gray;
+}
+
+%delta_gray {
+	background-color: $delta_gray;
+}
+	
+%echo_gray {
+	background-color: $echo_gray;
+}
+	
+%fox_gray {
+	background-color: $fox_gray;
+}
+
+%golf_gray {
+	background-color: $golf_gray;
+}
+
+%hotel_gray {
+	background-color: $hotel_gray;
+}
+
+%india_gray {
+	background-color: $india_gray;
+}
+
+
+
+//* Standard color objects */
+//* ---------------------- */
+%alpha_color {
+	background-color: $alpha_color;
+}
+%alpha_color_bravo {
+	background-color: $alpha_color_bravo;
+}
+%alpha_color_charlie {
+	background-color: $alpha_color_charlie;
+}
+%alpha_color_delta {
+	background-color: $alpha_color_delta;
+}
+%alpha_color_echo {
+	background-color: $alpha_color_echo;
+}
+%alpha_color_fox {
+	background-color: $alpha_color_fox;
+}
+%alpha_color_golf {
+	background-color: $alpha_color_golf;
+}
+%alpha_color_hotel {
+	background-color: $alpha_color_hotel;
+}
+%alpha_color_india {
+	background-color: $alpha_color_india;
+}
+%alpha_color_juliet {
+	background-color: $alpha_color_juliet;
+}
+
+
+
+
+
+%bravo_color {
+	background-color: $bravo_color;
+}
+%bravo_color_bravo {
+	background-color: $bravo_color_bravo;
+}
+%bravo_color_charlie {
+	background-color: $bravo_color_charlie;
+}
+%bravo_color_delta {
+	background-color: $bravo_color_delta;
+}
+%bravo_color_echo {
+	background-color: $bravo_color_echo;
+}
+%bravo_color_fox {
+	background-color: $bravo_color_fox;
+}
+%bravo_color_golf {
+	background-color: $bravo_color_golf;
+}
+%bravo_color_hotel {
+	background-color: $bravo_color_hotel;
+}
+%bravo_color_india {
+	background-color: $bravo_color_india;
+}
+%bravo_color_juliet {
+	background-color: $bravo_color_juliet;
+}
+
+
+
+
+
+	
+%charlie_color {
+	background-color: $charlie_color;
+}
+%charlie_color_bravo {
+	background-color: $charlie_color_bravo;
+}
+%charlie_color_charlie {
+	background-color: $charlie_color_charlie;
+}
+%charlie_color_delta {
+	background-color: $charlie_color_delta;
+}
+%charlie_color_echo {
+	background-color: $charlie_color_echo;
+}
+%charlie_color_fox {
+	background-color: $charlie_color_fox;
+}
+%charlie_color_golf {
+	background-color: $charlie_color_golf;
+}
+%charlie_color_hotel {
+	background-color: $charlie_color_hotel;
+}
+%charlie_color_india {
+	background-color: $charlie_color_india;
+}
+%charlie_color_juliet {
+	background-color: $charlie_color_juliet;
+}
+
+
+
+
+
+	
+%delta_color {
+	background-color: $delta_color;
+}
+%delta_color_bravo {
+	background-color: $delta_color_bravo;
+}
+%delta_color_charlie {
+	background-color: $delta_color_charlie;
+}
+%delta_color_delta {
+	background-color: $delta_color_delta;
+}
+%delta_color_echo {
+	background-color: $delta_color_echo;
+}
+%delta_color_fox {
+	background-color: $delta_color_fox;
+}
+%delta_color_golf {
+	background-color: $delta_color_golf;
+}
+%delta_color_hotel {
+	background-color: $delta_color_hotel;
+}
+%delta_color_india {
+	background-color: $delta_color_india;
+}
+%delta_color_juliet {
+	background-color: $delta_color_juliet;
+}
+
+
+
+
+
+	
+%echo_color {
+	background-color: $echo_color;
+}
+%echo_color_bravo {
+	background-color: $echo_color_bravo;
+}
+%echo_color_charlie {
+	background-color: $echo_color_charlie;
+}
+%echo_color_delta {
+	background-color: $echo_color_delta;
+}
+%echo_color_echo {
+	background-color: $echo_color_echo;
+}
+%echo_color_fox {
+	background-color: $echo_color_fox;
+}
+%echo_color_golf {
+	background-color: $echo_color_golf;
+}
+%echo_color_hotel {
+	background-color: $echo_color_hotel;
+}
+%echo_color_india {
+	background-color: $echo_color_india;
+}
+%echo_color_juliet {
+	background-color: $echo_color_juliet;
+}