toadstool 0.0.0.1 → 0.0.0.3

data/lib/templates/project/sass/buttons/_extends.scss

@@ -0,0 +1,3 @@
+// Use this to build custom extends for your project
+// -----------------------------------------------------------------------
+

data/lib/templates/project/sass/buttons/_mixins.scss

@@ -0,0 +1,2 @@
+// Use this to build custom extends for your project
+// -----------------------------------------------------------------------

data/lib/templates/project/sass/color/_color_defaults.scss

@@ -0,0 +1,98 @@
+/////// Toadstool's semantic variables /////// 
+// Semantic variables should always be matched up with abstract values, never semantic to semantic
+// -----------------------------------------------------------------------------
+
+// primary header font color
+$primary_header_color:                 $alpha_gray;
+
+// default heading font weight
+$heading_font_weight:                  normal;
+
+// primary font color for the app
+$primary_text:                         $bravo_gray;
+$secondary_text:                       $bravo_gray;
+
+// default `href` link color
+$href_color:                           $delta_color;
+$href_color_alt:                       $delta_color_bravo;
+
+// default shadow colors
+$shadow_color:                         fade-out($alpha_gray, 0.5);
+
+// default border color
+$border_color:                         $charlie_gray;
+
+
+
+/////// HTML 5 feature colors ///////
+// -----------------------------------------------------------------------------
+// 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:                      lighten($alpha_color, 50%);
+$selection_text_color:                 $primary_text;
+
+
+
+/////// 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:                  $alpha_color_juliet;
+                                
+$form_field_border:                    $charlie_gray;
+$form_field_border_fail:               $alpha_color_echo;
+$form_field_focus_border_color:        $charlie_gray;
+
+$form_field_text_fail:                 $alpha_color_echo;
+$form_label_color:                     $alpha_gray;
+$optional_field_text_color:            $delta_gray;
+$instructional_text:                   $charlie_gray;
+$placeholder_text:                     $hotel_gray;
+$inline_alert_bkg_color:               $alpha_color_delta;
+$inline_alert_text_color:              $white;
+
+// Non-color defaults (currently not represented in the SG view)
+// ---------------------------------------------------------
+$form_field_text:                     $primary_text;
+
+
+
+/////// Config defaults for buttons /////// 
+// -----------------------------------------------------------------------------
+$button-color:                        $delta-color;
+$secondary_button_border_color:       $bravo_gray;
+$button_text:                         $white;
+
+// Depricated variable
+$primary_button_border_color:         $bravo_color;
+
+
+
+/////// Config defaults for ``standard_rounded_border`` mixin /////// 
+// -----------------------------------------------------------------------------
+$standard_border_color:               $border_color;    // sets default border color
+
+/////// Config defaults for ``standard_hr`` mixin /////// 
+// -----------------------------------------------------------------------------
+$standard_hr_color:                   $delta_gray;
+
+/////// Config values for all default shadows /////// 
+// -----------------------------------------------------------------------------
+$inset_color:                         $shadow_color;    // for use with ``dual_box_shadow`` mixin

data/{sass → lib/templates/project/sass}/color/_color_math.scss

@@ -1,4 +1,4 @@
-@import "stipe/color/default_color_pallet";  // do not edit, necessary dependency for cascading defaults
+@import "stipe/color/default_color_palette";  // do not edit, necessary dependency for cascading defaults
 
 $alpha_color:$alpha_primary;
 $alpha_color_bravo:scale-color($alpha_color,$lightness:10%);

data/lib/templates/project/sass/color/_extends.scss

@@ -0,0 +1,109 @@
+// OOCSS Color placeholders are necessary at the style guide level as to ensure that 
+// the colors are being generated from the proper context. 
+
+@import "../config";
+
+
+// This mixin loops through a list of values to produce the necessary silent placeholders
+@mixin name_color_loop {
+	@each $name in $color_names {
+	  $i: index($color_names, $name);
+	  %#{$name} {
+	    background: nth($color_var, $i);
+	  }
+	}
+}
+
+/////// OOCSS color blocks ////////
+// ----------------------------------------------
+
+//* Standard grayscale objects */
+//* -------------------------- */
+%white {
+	background-color: $white;
+}
+
+$color_names: alpha_gray bravo_gray charlie_gray delta_gray echo_gray fox_gray golf_gray hotel_gray india_gray;
+$color_var: $alpha_gray $bravo_gray $charlie_gray $delta_gray $echo_gray $fox_gray $golf_gray $hotel_gray $india_gray;
+@each $name in $color_names {
+  $i: index($color_names, $name);
+  %#{$name} {
+    background: nth($color_var, $i);
+  }
+}
+
+@include name_color_loop;
+
+
+// Alpha and Bravo color objects
+// ----------------------------------------------
+$alpha_color_names: alpha_color alpha_color_bravo alpha_color_charlie alpha_color_delta alpha_color_echo alpha_color_fox alpha_color_golf alpha_color_hotel alpha_color_india alpha_color_juliet;
+$alpha_color_var: $alpha_color $alpha_color_bravo $alpha_color_charlie $alpha_color_delta $alpha_color_echo $alpha_color_fox $alpha_color_golf $alpha_color_hotel $alpha_color_india $alpha_color_juliet;
+
+$bravo_color_names: bravo_color bravo_color_bravo bravo_color_charlie bravo_color_delta bravo_color_echo bravo_color_fox bravo_color_golf bravo_color_hotel bravo_color_india bravo_color_juliet;
+$bravo_color_var: $bravo_color $bravo_color_bravo $bravo_color_charlie $bravo_color_delta $bravo_color_echo $bravo_color_fox $bravo_color_golf $bravo_color_hotel $bravo_color_india $bravo_color_juliet;
+
+// Sass' join function can only jpin two lists.
+// Until I get a better idea, this is what I get.
+
+$color_names: join($alpha_color_names, $bravo_color_names);
+$color_var: join($alpha_color_var, $bravo_color_var);
+
+@include name_color_loop;
+
+// Charlie and Delta color objects
+// ----------------------------------------------
+$charlie_color_names: charlie_color charlie_color_bravo charlie_color_charlie charlie_color_delta charlie_color_echo charlie_color_fox charlie_color_golf charlie_color_hotel charlie_color_india charlie_color_juliet;
+$charlie_color_var: $charlie_color $charlie_color_bravo $charlie_color_charlie $charlie_color_delta $charlie_color_echo $charlie_color_fox $charlie_color_golf $charlie_color_hotel $charlie_color_india $charlie_color_juliet;
+
+$delta_color_names: delta_color delta_color_bravo delta_color_charlie delta_color_delta delta_color_echo delta_color_fox delta_color_golf delta_color_hotel delta_color_india delta_color_juliet;
+$delta_color_var: $delta_color $delta_color_bravo $delta_color_charlie $delta_color_delta $delta_color_echo $delta_color_fox $delta_color_golf $delta_color_hotel $delta_color_india $delta_color_juliet;
+
+$color_names: join($charlie_color_names, $delta_color_names);
+$color_var: join($charlie_color_var, $delta_color_var);
+
+@include name_color_loop;
+
+// Echo color objects
+// ----------------------------------------------
+$color_names: echo_color echo_color_bravo echo_color_charlie echo_color_delta echo_color_echo echo_color_fox echo_color_golf echo_color_hotel echo_color_india echo_color_juliet;
+$color_var: $echo_color $echo_color_bravo $echo_color_charlie $echo_color_delta $echo_color_echo $echo_color_fox $echo_color_golf $echo_color_hotel $echo_color_india $echo_color_juliet;
+
+@include name_color_loop;		
+
+
+/////// semantic color blocks ////////
+// ----------------------------------------------
+$color_names: 'white' shadow_color primary_header_color heading_font_weight primary_text secondary_text href_color ins_color mark_color webkit_tap_hightlight selection_color selection_text_color border_color primary_button_border_color secondary_button_border_color button_text standard_hr_color standard_border_color;
+$color_var: $white $shadow_color $primary_header_color $heading_font_weight $primary_text $secondary_text $href_color $ins_color $mark_color $webkit_tap_hightlight $selection_color $selection_text_color $border_color $primary_button_border_color $secondary_button_border_color $button_text $standard_hr_color $standard_border_color; 
+
+@include name_color_loop;
+
+
+/////// Config defaults for forms /////// 
+// -----------------------------------------------------------------------------
+
+$color_names: alert_background_color input_disabled input_disabled_bkg input_disabled_border input_disabled_text form_field_background_color form_field_focus_color form_field_fail_bkg form_field_border form_field_border_fail form_field_focus_border_color form_field_text_fail form_label_color optional_field_text_color instructional_text placeholder_text inline_alert_bkg_color inline_alert_text_color;
+$color_var: $alert_background_color $input_disabled $input_disabled_bkg $input_disabled_border $input_disabled_text $form_field_background_color $form_field_focus_color $form_field_fail_bkg $form_field_border $form_field_border_fail $form_field_focus_border_color $form_field_text_fail $form_label_color $optional_field_text_color $instructional_text $placeholder_text $inline_alert_bkg_color $inline_alert_text_color; 
+
+@include name_color_loop;
+
+
+
+/////// Config defaults for buttons /////// 
+// -----------------------------------------------------------------------------
+
+$color_names: button_color primary_button_border_color secondary_button_border_color button_text;
+$color_var: $button_color $primary_button_border_color $secondary_button_border_color $button_text; 
+
+@include name_color_loop;
+
+
+
+
+
+
+
+
+
+

data/lib/templates/project/sass/color/readme.md

@@ -0,0 +1,63 @@
+#How does Toadstool manage colors?
+The goal of Toadstool and Stipe are to use colors in an intelligent manor, versus CSS with hex values randomly applied throughout the code. 
+
+Nested in the [config.scss](http://goo.gl/rmCQP) file of your Toadstool style guide will be options to change Stipe's default colors. Simply uncomment these lines and replace the hex values with the color palette you wish. 
+
+```scss
+// $alphaprimary:   #5a2e2e;        // red
+// $bravoprimary:   #3e4147;        // green
+// $charlieprimary: #fffedf;        // yellow
+// $deltaprimary:   #2a2c31;        // blue
+// $echoprimary:    #dfba69;        // accent
+
+// $alphagray:      #333;           //black
+```
+
+These primary color values will be processed through your style guide's `color_math.scss` and `grayscale_math.scss` files. In these files you will see an array of new abstract color values being created using Sass' [scale-color](http://goo.gl/SQisc) function. Like the following example:
+
+```scss
+$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;
+```
+
+##Color application
+As you develop your site's CSS, you are encouraged to make use of these abstract color values. In your style guide's [config.scss](http://goo.gl/mi2UC) file there is an array of semantically named color variables using Stipe's abstract color variables as their values like so:
+
+```scss
+// default shadow colors
+$shadow_color:                         fade-out($alphagray, 0.5);
+
+// primary header font color
+$primary_header_color:                 $alphagray;
+
+// primary font color for the app
+$primary_text:                         $bravogray;  
+```
+
+You are encouraged to update the `_config.scss` file values to better suit your site. As new color values are needed, add them to the `_config.scss` file. 
+
+There may be times when you will want to simply refer to the abstract color like the following:
+```scss
+block {
+  background: $alpha_color_golf;
+}
+```
+
+While this is perfectly acceptable, I would encourage you to create a semantically named variable and apply the abstract name as the value in the `_config.scss` file. 
+
+##Why the abstraction?
+Some may ask, _"Why would you want to make these abstractions versus simply applying the hex value?"_
+
+Even if you are creating a list of semantically names variables, not using this array of abstract values means that you will be applying repeated hex values to all your semantically named variables. Hex values are not names that easily roll off the tongue and can easily become confused.
+
+Using abstract naming gives the color values personality and thus makes it easier to discuss. It is easier to say, _"Please use alpha_color_charlie."_ versus saying, _"Please use #8C4747."_
+
+Another benefit is that all these abstract variables are gnerated by using Sass' color functions. This keeps all the color editing in one place. Then if at any time that the color palette needs to be updated, simply update the primary color hex values and then all your site's colors are updated in the cascading fashion they were applied. 

data/lib/templates/project/sass/forms/_extends.scss

@@ -0,0 +1,3 @@
+// Use this Sass file to create custom form silent placeholder extends per your project
+// -----------------------------------------------------------------------
+

data/lib/templates/project/sass/forms/_mixins.scss

@@ -0,0 +1,3 @@
+// Use this Sass file to create custom form mixins per your project
+// -----------------------------------------------------------------------
+

data/lib/templates/project/sass/readme.md

@@ -0,0 +1,142 @@
+#Toadstool and Sass
+The Toadstool style guide framework makes heavy use of Sass as it's primary styling language. Primary features of Sass not only include the ability to modularize your UI code, but also engineer your UI code in an abstract manor that allows for infinite reusability. 
+
+The look of your Toadstool style guide is driven from the [Stipe](http://goo.gl/68RPd) gem. All the Sass files you see in this directory are to be used to generate the final CSS for your project. 
+
+##Sass manifest files
+In your project there are two Sass manifest files, `style.scss` and `toadstool.scss`. Your `style.scss` is what will be used for your production project while the `toadstool.scss` will only be used for the style guide view.
+
+For the most part there will be no need to edit the `toadstool.scss` file. All the UI that you see in the Toadstool views is being generated from Sass written in the [Stipe](http://goo.gl/68RPd) gem.
+
+The `style.scss` on the other hand is the principal manifest of your generated CSS. Let's go step-by-step into this file so that we understand what is happening here.
+
+###The _config.scss file. 
+
+```scss
+// App Config - this is where most of your magic will happen
+// ------------------------------------------------------------------------------
+@import "config";  // Editing defaults here will override any set in the Stipe gem
+
+```
+
+The `_config.scss` file serves as the core UI configuration for your new UI. In this document are a series of pre-set variables. Including, but not limited to the following. [Read more](http://goo.gl/iLR3o) about how the config file works.
+* Typography
+* Images directory
+* Color palette
+* Grid configuration
+* Semantic color variables
+* Form UI variables
+* Buttons
+* Borders
+* Spacing
+* Shadows
+* Breakpoints
+
+###CSS reset
+Toadstool comes pre-set with a Toadstool specific CSS reset. This reset address the most common UI settings. Stipe comes pre-loaded with Eric Meyer's reset as well and since we are using Compass, if you want, you could use that reset as well. Simply address the lines below in your `_config.scss` file.
+
+If you have your own reset, you can use that too. Simply uncomment the local `@import "reset";` line and in the file structure of the style guide put your reset. 
+
+```scss
+// Choose the CSS reset by selectively commenting/uncommenting the import files
+// ------------------------------------------------------------------------------
+@import "stipe/resets/toadstool";           // Default toadstool reset
+// @import "stipe/resets/eric_meyer";       // http://meyerweb.com/eric/tools/css/reset/reset.css
+// @import "compass/reset";                 // Reset supported by the Compass gem
+
+// Don't want to use any of these? Kool, we can respect that
+// ------------------------------------------------------------------------------
+// @import "reset";
+
+```
+
+###Web fonts
+Web fonts in Stipe and Toadstool are really easy to manage. In the `_config.scss` file you are already importing the `_web_fonts.scss` file.  
+
+```scss
+// Want web fonts? We got those too.
+// ------------------------------------------------------------------------------
+@import "web_fonts";
+
+```
+
+The `_web_fonts.scss` file itself is your manifest for all imported web fonts. Zocial and Font-Awesome are already installed for your use. Simply uncomment the following to take advantage:
+
+```scss
+// Pre-loaded web fonts for your use, enjoy!
+// Fonts needed to be loaded in path specified above in relation to the rendered CSS file
+// -----------------------------------------------------------
+// To activate 'zocial' uncomment both lines
+// @import "stipe/typography/web_fonts/zocial";
+// @import "stipe/typography/web_fonts/zocial_characters";
+
+// To activate 'font_awesome' uncomment both lines
+// @import "stipe/typography/web_fonts/font_awesome";
+// @import "stipe/typography/web_fonts/font_awesome_pua";
+```
+
+To install your own, simply use the `font-face` mixin:
+```scss
+@font-face {
+	@include font-face ($font_family: [name of family], $font-file:  [name of file], $font_weight: [value], $font_style: [value]);
+```
+
+If you prefer to use a Google Font, use the following as example:
+```scss
+// Install google fonts
+// -----------------------------------------------------------
+@import url(http://fonts.googleapis.com/css?family=Emblema+One);
+```
+
+###Using the Stipe gem
+The Stipe gem will be installed on your machine and the following line calles in the necessary libraries.
+```scss
+// Following sequence will load the necessary Stipe libraries
+// ------------------------------------------------------------------------------
+@import "stipe/manifest";
+``` 
+
+Color management is a little tricky as the placeholder classes that are extended into your project need to be processed in context with the color specifications dictated in your `_config.scss` file. So, the following is included:
+```scss
+@import "color/extends";
+```
+
+###Your styles
+Finally we have your styles included in the manifest. 
+```scss
+// This where you start building your own styles. 
+// ------------------------------------------------------------------------------
+@import "typography";
+@import "forms";
+@import "buttons";
+@import "design";
+@import "ui_patterns";    // manifest files
+@import "modules";        // manifest files
+@import "layouts";        // manifest files
+```
+
+Elemental files include `typography`, `forms`, `buttons`, `design`. The Sass necessary for the site's design are to be edited directly in these files. 
+
+Collective manifest files include `ui_patterns`, `modules` and `layouts`. No Sass is ever to be written in these files. They are only to `@import` the various UI Patterns, Modules and Layouts. 
+
+##Typography
+Setting basic typography is a pretty simple task, so this is why I set out to make this a consistent pattern so I never have to do this again. Toadstool's typography pulls a lot of CSS rules from the Stipe gem. These rules are represented in your local Toadstool style guide, but the rules are commented out. 
+
+Core typography settings for your style guide require little intervention. By simply updating the correct variables in the `_config.scss` file, you can effect great change. But if needed, you can either edit the CSS rule directly with the selector or actually over-ride the extended silent placeholder that drives the UI for that block element. 
+
+If these typography settings are unwanted, simply remove `@import "stipe/typography/default";` from the manifest file and populate the Sass file with the appropriate CSS rules. 
+
+It should also be noted that neither Toadstool or Stipe use pixles. EMs are the preferred way to draw relationships between elements in the UI. Again Toadstool/Stipe aim to make life easier, so deep in the Stipe's core are [typography functions](http://goo.gl/g2sPk) to address integer conversion to em value.
+
+```scss
+@function em($target, $context: $font_size) {
+  @return ($target / $context) * 1em;
+}
+```
+
+##Forms
+Toadstool comes pre-loaded with the basic elements that make up a form UI. You will find very basic CSS rules in your version of the Toadstool style guide. 
+
+##Buttons
+
+##The design dumping ground