toadstool 0.0.0.1 → 0.0.0.3

data/lib/templates/project/readme.md

@@ -0,0 +1,79 @@
+#Welcome to Toadstool
+![toadstool logo](/Anotheruiguy/toadstool/raw/master/public/images/toadstool-logo.png "toadstool - put that in your styleguide")
+
+	VERSION 0.1.0 / STIPE gem dependency 0.0.5.7
+
+Toadstool is a Style Guide framework. Concepts are simple, build in the abstract and apply to the semantic. 
+
+##Run the app
+Toadstool is a Sinatra rack app. Simply clone the app into a new directory, `bundle install` and then `rake server`
+
+To simulate "production" mode run `rake server production`. This task will compile your Sass with the compressed output style and closely simulates Heroku's environment. We use this mode to perform final QA prior to deployment to Heroku.
+
+##Sass / Compass
+Processing your Sass to CSS can happen a few ways. 
+
+By default Toadstool is set up to compile the Sass once via the following Rakefile command. This is the most efficient way to do this and ensures that a static version of the Sass is made available in production. 
+```ruby
+desc "Compile the app's Sass"
+task "assets:precompile" do
+  system("bundle exec compass compile")
+end
+```
+This task is automatically invoked when you run `rake server`; there should be no need to run it manually.
+
+###Toadstool and Sass
+The Toadstool style guide framework makes heavy use of Sass as it's primary styling language [read more ...](http://goo.gl/72YhA)
+
+###Developing Sass
+Be sure to run the `compass watch` process in the background. This really is the best way to process edited Sass as in the terminal it will be easy to see the Sass error log if there are issues.
+
+###Running Sass in memory
+If you want run process Sass in memory, [uncomment these lines](http://goo.gl/HAKNR). Then comment out [this rake task](http://goo.gl/bvzEx).
+
+*Note:* Running Sass in memory will not generate actual CSS files. If you have CSS files in public/stylesheets, those will be served instead. If you edit your Sass, but don't see your changes in the browser, delete any CSS files in public/stylesheets.
+
+Running Sass in memory can also be quite slow, especially as your Sass library grows in size and complexity. 
+
+###Debug Sass
+By default your Sass will be run in [debug mode](http://goo.gl/a0UKV). By simply [changing your output](http://goo.gl/VN7g7) to `compressed`, this will over-ride the debugging and compress all your CSS for production.
+
+###Glob-based import support
+A great feature supported in Rails 3.1+ projects is the ability to import files like so `@import "directory/*";`. In order to bring this capibility to other projects Toadstool requires the `sass-globbing` gem.
+
+If you are using this in a Rails 3.1+ project, the gem is not required.
+
+##What is a Style Guide Framework?
+While bootstrap frameworks are all the rage, I feel that there are some things that they do very well and then some things that they do very poorly. What they do well is give a team/developer a quick spring board to get a new app up and running. For a team/developer that is light on UI skillz, that is a good thing. But what I have heard time and time again from one developer to the next is that as the app continues to mature this 'bootstrap' UI is now a burden to bear.
+
+After all, it is a 'bootstrap' framework, not a 'production' framework. This is where Toadstool comes in, a real life production framework, a framework, a guideline, a process to make really awesome production ready code. 
+
+##Stipe
+A core element of the Toadstool style guide framework is the [Stipe](https://github.com/Anotheruiguy/stipe) gem. A collection of commonly used Mixins and more-so a growing number of easily useable silent placeholder classes to make development quicker, easier and more flexible. [Stipe](https://github.com/Anotheruiguy/stipe) and Toadstool, when used correctly can quickly become the foundational framework for all your development projects. Making it more accessible to new developers on your teams and ensures that returning to a legacy project is not a daunting task of relearning the UI code.  
+
+##Toadstool is more, it's a process
+In the countless projects I have been involved in, one constant is the lack of abstraction between the design element, HTML and CSS for the widget and the view. 
+
+Toadstool aims to give structure to the styleguide development process.
+
+##Don't go chasing waterfalls 
+In the old waterfall days, it was common to think a project's problems all the way through. Specification documents and comps that encompassed almost the entire project before line one of code was ever written was the expectation. Oh, those were the days. 
+
+For developers, It was easier for them to see the future and write patterned code, but the expense was to great. All the upfront planning was very time consuming and when developers began to layout patterns in their code based on those assumptions, changes down the road were much harder to manage. Not to mention expensive and opportunities for broken code were to high. Anyone remember writing tests in those days?
+
+With modern agile practices, the idea is to not solve the problem until it is an official problem. Sure we can speculate, but the idea is to not execute until it is appropriate. So, what does that mean for designers and developers? For developers that is pretty easy to answer, don't develop that feature until it is time. But for designers, this has been a harder problem to solve. After all, the designer's role has traditionally been to be the ones who think ahead. Developers have looked to them to be ready when the time comes. 
+
+##Designers get agile, the comp has failed you
+Up till now the designer's deliverable has been, and in most cases, continues to be the comp. While most of the development world has moved on from waterfall, I see time and time again designers holding onto the same processes. Given a project I have seen design teams go overboard in trying to solve problems that don't yet exist. This leads them down a path of no return having thought so deep into solving a problem that the attachment to a solution becomes too great. When the times comes that there needs to be adjustments to the solution to fit the changing needs of the business, 'turning the boat' comes with great costs and is usually meet with frustrations, if not full out resistance. 
+
+Getting agile with code prototypes fills the gap where the comp fails. All to often when composing the comp, the designer feels the need to design the whole experience of a single view. This means a lot of time in Photoshop and duplicating screens again and again just to adjust subtle nuances. This means making changes comes at to great a cost. And too many times the designers become obsessed with minor pixel adjustments that take time, work, endless review cycles all for what? When we go from picture to code, we will be using `em` or `%` as our values. In a device driven world, these pixel measurements are abstracted to relationships and will adjust based on the viewport of the device.
+
+Version control is another issue of great frustration. Many times the 'comp' from the designer will go through other experimental iterations that may accidentally get incorporated into a design delivered to a developer. This is a classic case of 'signal vs noise' issue. A developer will typically pick up on these inconsistent nuances and make the changes to the layout of the view. It is this simple issue that commonly leads to unnecessary work and frustrations. 
+
+Another common versioning issue is that there may be changes in the view that are not appropriately managed in the next series of comps that are coming down the line. In the waterfall comp design process, many of the screens are created way ahead of time and as the project progresses things change. It is very time consuming and expensive to go back and update all the comps with the changes that have happened in the UI since that view was designed. So again we find ourselves measuring final deliverables against an imperfect measuring stick that leads to confusion and frustration. 
+
+What if we were to bite this off into smaller chunks? What if at fist we we're to only decide things like color pallet, typography, forms and buttons? This is pretty cool and most will agree that this is a process that most designers go through. The breakdown is how to document these choices. Historically designers did this with the comp. Today I say do it with a style guide. 
+
+##Element, module, view
+The process is simple, the ideas are basic and the process is tried and true. Toadstool is set up to support some basic concepts that help you build a solid UI foundation that will allow for greater team integration, promote quality code reuse and build solid consistency in your app.  [Clean out your Sass Junk-Drawer](http://gist.io/4436524) is a post written that best details this process and Toadstool's file structure.
+

data/lib/templates/project/sass/_buttons.scss

@@ -0,0 +1,37 @@
+// Toadstool comes pre-loaded with a series of pre-developed buttons
+// All style attributes are managed in the `_config.scss` file
+// -----------------------------------------------------------------------------
+// $button-color:  $delta-color;
+// $button-text-color: $white;
+// $button-line-height: 32;
+// $button-border-radius: 3;
+// $button-padding: 20;
+// $button-font-size: 18;
+// $button-weight: bold;
+// $button-text-shadow: true;
+// $button-box-shadow: true;
+// --------------------------------------------------------------------
+
+// Custom button extends and mixins
+// -----------------------------------------------------------------------
+@import "buttons/mixins";
+@import "buttons/extends";
+
+// buttons
+// --------------------------------------------------------------------
+button, a.button {
+  @include gloss-default;
+  &:nth-child(2) {
+    @include shiny-default;
+  }
+  &:nth-child(3) {
+    @include flat-default;
+  }
+  &:nth-child(4) {
+    @include three-dee;
+  }
+  margin-left: 1em;
+  &:nth-child(1) {
+    margin-left: 0;
+  }
+}

data/{sass → lib/templates/project/sass}/_config.scss

@@ -1,9 +1,9 @@
 // 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!
 
+// For instruction, please see https://github.com/Anotheruiguy/toadstool/blob/master/sass/doc-src/config.md
 
-
-///// Typography configuration /////
+/////// Typography configuration/////// 
 // -----------------------------------------------------------------------------
 // $font_size: 12;
 // 
@@ -19,33 +19,26 @@
 // $small_point_size: 10;
 // $large_point_size: 14;
 // 
-$primary_font_family: #{"Helvetica Neue", Arial, sans-serif};
+// $primary_font_family: #{"Helvetica Neue", Arial, sans-serif};
 // $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif};
 // $heading_font_family: #{"Helvetica Neue", Arial, sans-serif};
 
-// $icon_font_alpha: #{'FontAwesome'};
-// $icon_font_bravo: #{'zocial'};
-
-
-///// Default webfont directory /////
+/////// Default webfont directory/////// 
 // -----------------------------------------------------------------------------
 // $webfont_directory: "/fonts/";
 
-
-
-///// default image directory /////
+/////// 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 ////////
+/////// 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
@@ -54,25 +47,20 @@ $primary_font_family: #{"Helvetica Neue", Arial, sans-serif};
 
 // $alpha_gray:      #333;           //black
 
-
-
-/////// Toadstool color math ////////
+/////// Toadstool color math /////// 
 // -----------------------------------------------------------------------------
-// This is a bootstrap template for creating an array of colors
-// @import "stipe/color/default_color_pallet";
-
-// Don't like Stipe's color pallet, no worries. Uncomment these lines and go for it!
+// Local color functions to create default color palette
 @import "color/color_math";
 @import "color/grayscale_math";
+@import "color/color_defaults";
 
-
-/////// Grid configuration ////////
+/////// 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_l:             0 !default;      // sets default left/right padding inside grid block
-$grid_padding_r:             0 !default;      // sets default left/right padding inside grid block
+// $grid_padding_l:             0;              // sets default left/right padding inside grid block
+// $grid_padding_r:             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
@@ -81,19 +69,13 @@ $grid_padding_r:             0 !default;      // sets default left/right padding
 // $col_gutter:                 $col_base * 2;  // sets default grid gutter width                            
 // $grid_960:                   960 / 100%;     // grid math for percentages
 
-
-
-
-/////// Toadstool's semantic variables ////////
+/////// Toadstool's semantic variables /////// 
 // 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;
 
@@ -102,16 +84,27 @@ $grid_padding_r:             0 !default;      // sets default left/right padding
 
 // primary font color for the app
 // $primary_text:                         $bravo_gray;
+// $secondary_text:                       $bravo_gray;
 
-// default <a href="#"> link color
+// default `href` link color
 // $href_color:                           $delta_color;
 // $href_color_alt:                       $delta_color_bravo;
 
-// used with the <ins> tag
+// 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
+// used with the `mark` tag
 // http://www.w3schools.com/html5/tag_mark.asp
 // $mark_color:                           $charlie_color;
 
@@ -122,12 +115,9 @@ $grid_padding_r:             0 !default;      // sets default left/right padding
 // $selection_color:                      $charlie_color;
 // $selection_text_color:                 $primary_text;
 
-// default border color
-// $border_color:                         $charlie_gray;
 
 
-
-// Config defaults for forms
+/////// Config defaults for forms /////// 
 // -----------------------------------------------------------------------------
 // $alert_background_color:        $alpha_color;
 
@@ -138,59 +128,69 @@ $grid_padding_r:             0 !default;      // sets default left/right padding
 //                                 
 // $form_field_background_color:   $white;
 // $form_field_focus_color:        $white;
-// $form_field_fail_bkg:           $white;
-//                                 
+// $form_field_fail_bkg:           $alpha_color_juliet;
+                                
 // $form_field_border:             $charlie_gray;
-// $form_field_border_fail:        $alpha_color;
+// $form_field_border_fail:        $alpha_color_echo;
 // $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;
+
+// $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;
-// $form_label_color:              $alpha_gray;
-
-
+// $inline_alert_bkg_color:        $alpha_color_delta;
+// $inline_alert_text_color:       $white;
 
-// Config defaults for buttons
-// -----------------------------------------------------------------------------
-// $primary_button_border_color:          $bravo_color;
-// $secondary_button_border_color:        $bravo_gray;
-// $button_text:                          $white;
+// Non-color defaults (currently not represented in the SG view)
+// ---------------------------------------------------------
+// $form_field_border_radius:      $standard_round_corner;                                
+// $form_field_text:               $primary_text;
+// $form_field_height:             35;
+// $form_field_padding:            6;
+// $form_label_weight:             bold;
+// $form_label_lineheight:         20;
+// $inline_alert_lineheight:       30;
+// $inline_alert_left_padding:     12;
+// $inline_alert_weight:           bold;
+// $inline_alert_top_margin:       12;
+// $inline_alert_border_width:     1;
 
 
 
-// Config defaults for ``standard_rounded_border`` mixin
+/////// Config defaults for buttons /////// 
+// -----------------------------------------------------------------------------
+// $button-color:  $delta-color;
+// $button-text-color: $white;
+// $button-line-height: 32;
+// $button-border-radius: 3;
+// $button-padding: 20;
+// $button-font-size: 18;
+// $button-weight: bold;
+// $button-text-shadow: true;
+// $button-box-shadow: true;
+
+/////// 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
+/////// Config defaults for ``standard_block_spacing`` mixin /////// 
 // -----------------------------------------------------------------------------
 // $default_block_spacing:                20;               // sets margin-bottom
 
-
-
-// Config defaults for site border style
+/////// Config defaults for site border style /////// 
 // -----------------------------------------------------------------------------
 // $standard_border_style:                solid;
 
-
-
-// Config defaults for ``standard_hr`` mixin
+/////// 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
+/////// Config values for all default shadows /////// 
 // -----------------------------------------------------------------------------
 // $h-shadow:                             0;                // horizontal shadow settings
 // $v-shadow:                             2;                // vertical shaddow settings
@@ -202,15 +202,22 @@ $grid_padding_r:             0 !default;      // sets default left/right padding
 // $is-shadow:                            2;                // inset spread shaddow settings
 // $iblur:                                3;                // inset blur settings
 
-
-
-
-/////////////// UI @media breakpoint defaults ////////////////
+/////// 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)";
+// $mobile_portrait:	         "screen and (max-width: 30em) and (orientation : portrait)";
+// $mobile_landscape:	         "screen and (max-width: 30em) and (orientation : landscape)";
+
+/////// Vendor prefix defaults /////// 
+// -----------------------------------------------------------------------------
+// $prefix_defaults: -moz- -webkit- -o- -ms- '';
+// $webkit_support: -webkit- '';
+// $moz_support: -moz- '';
+// $ms_support: -ms- ''; 
+// $moz_webkit_support: -moz- -webkit- '';
+// $moz_ms_support: -moz- -ms- '';
+// $webkit_ms_support: -webkit- -ms- '';

data/lib/templates/project/sass/_forms.scss

@@ -0,0 +1,41 @@
+// Where does this code come from?
+
+// Placeholder extends with the `stipe_` prefix come from the Stipe gem. 
+// TO DO: link to github forms/extends
+// TO DO: link to github forms/mixins
+
+// TO DO: breakout list of config options
+
+// The variable UI parts of these placeholders are managed via your `_config.scss` file.
+
+// Import custom extends and mixins
+// -----------------------------------------------------------------------
+@import "forms/mixins";
+@import "forms/extends";
+
+// Your styles
+// -----------------------------------------------------------------------
+input[type=email], input[type=password], input[type=text], input[type=number] {
+  @extend %stipe_input_fields; 
+}
+
+// not represented in the style guide view
+input[disabled], textarea[disabled], select[disabled], .disabled {
+  @extend %stipe_disabled_inputs;
+}
+
+label {
+  @extend %stipe_form_labels;
+}
+
+.instructional {
+  @extend %stipe_instructional;
+}
+
+.fail {
+  @extend %stipe_fail;
+}
+
+.inline_alert {
+  @extend %stipe_inline_alert;
+}

data/lib/templates/project/sass/_typography.scss

@@ -0,0 +1,98 @@
+// Twitter's 'Font-Awesome' is installed in Toadstool, see http://goo.gl/4JkBd for list of icon options
+// Stipe has all icon classes loaded as silent classes, to activate use the following example
+// -----------------------------------------------------------------------
+// .icon-glass {
+//  @extend %icon-glass;
+// }
+
+// Zocial's icon font is installed in Toadstool, see http://goo.gl/t92t5 for list of icon options
+// Stipe has all icon classes loaded as silent classes, to activate use the following example
+// -----------------------------------------------------------------------
+// .zocial-amazon {
+//  @extend %zocial-amazon;
+// }
+
+// Import of default text bootstrap settings
+// -----------------------------------------------------------------------
+@import "stipe/typography/default"; // Comment out if unwanted
+
+// Custom typography extends and mixins
+// -----------------------------------------------------------------------
+@import "typography/mixins";
+@import "typography/extends";
+
+// Customize the following to fit your specifications
+// Commented out styles represent Toadstool's default bootstrap styles
+// -----------------------------------------------------------------------
+html {
+  // font: em($font_size, 16) $primary_font_family;
+  // line-height: baseline($font_size);
+  // color: $primary_text;
+}
+
+// Heading CSS rules
+// -----------------------------------------------------------------------
+// Before editing CSS rules in this document, be sure that you have address the configurable variables
+// in the `_config.scss` file
+
+// $heading_1, $heading_2, $heading_3, $heading_4, $heading_5, $heading_6
+// $heading_font_family, $primary_header_color and $heading_font_weight
+// Bottom margins and line-height are managed via the vertical rythem mixin in Stipe
+
+h1 {
+  // font-size: 2em;  // user agent default
+  // @extend %headings_1;
+}
+
+h2 {
+  // font-size: 1.5em;  // user agent default
+  // @extend %headings_2;
+}
+
+h3 {
+  // font-size:  1.17em;  // user agent default
+  // @extend %headings_3;
+}
+
+h4 {
+  // font-size:  1em;  // user agent default
+  // @extend %headings_4;
+}
+
+h5 {
+  // font-size:  0.83em;  // user agent default
+  // @extend %headings_5;
+}
+
+h6 {
+   // font-size:  0.75em;  // user agent default
+   // @extend %headings_6;
+}
+
+// Standard body text support
+// -----------------------------------------------------------------------
+p {
+  // margin-bottom: baseline-margin($font_size);
+  // text-indent: 0;
+}
+
+b {
+  // &:after {
+  //  content: " ";
+  // }
+}
+
+
+// :link Pseudo-class is totally not necessary, but in come cases needed
+a {
+  // &:link {
+  //  color: $href_color;
+  //  text-decoration: none;
+  // }
+  // &:hover, &:active {
+  //  text-decoration: underline;
+  // }
+  // &:visited {
+  //  color: $href_color;
+  // }
+}