toadstool 0.0.0.1

data/readme.md

@@ -0,0 +1,37 @@
+#Welcome to Toadstool
+![toadstool logo](/Anotheruiguy/toadstool/raw/master/public/images/toadstool-logo.png "toadstool - put that in your styleguide")
+
+Toadstool is a Styleguide framework. Concepts are simple, build in the abstract and apply to the semantic. 
+
+Toadstool is currently developed as a Sinatra app using Sass (SCSS) and Compass. We have made recent updates that makes the core set of Sass functions into a Compass extension. 
+
+##To run the app
+Toadstool is built using ``Sinatra``, but you can run the app using ``shotgun`` if you prefer.
+
+**To run** ``ruby toadstool.rb`` will start the app. If you are running a VM you may need to run ``ruby toadstool.rb -o 0.0.0.0``.  If you are so inclined, feel free to reset the port like so ``ruby toadstool.rb -o 0.0.0.0 -p 3000``
+
+A `Rakefile` has been added to the project, simply running `rake server` will start the app. 
+
+##Sass / Compass
+The Compass config is included in toadstool.rb, no need to run as a separate process. 
+
+*Note:* Sinatra serves the rendered Sass from memory without generating actual CSS files. However, 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. 
+
+#Stipe Compass Extension
+Stipe is the life blood of the Toadstool style guide framework. Consisting of a series of mixins, extends and defaults that give Toadstool that 'instant on' experience. 
+
+[Stipe](https://rubygems.org/gems/stipe)
+
+##To install
+`gem install stipe`
+
+Current gem version dependency => 0.0.3.8
+
+##To use 
+To use the Stipe gem, using Bundler `gem 'stipe'`
+
+Stipe is a Compass Extension, so Compass is set as a depdency. You will need to include `require 'stipe'` in your config.rb file.
+
+
+###Please don't mind the mess ...
+This is a work in progress, if you are following along at home, pull master a lot :D

data/sass/_buttons.scss

@@ -0,0 +1,20 @@
+// Toadstool comes pre-loaded with a series of pre-developed buttons
+// Special thanks to Chad for the work (http://hellohappy.org/css3-buttons/)
+// To use, simply uncomment the buttons you want and extend the silent class
+// --------------------------------------------------------------------
+// Minimal
+@import "buttons/minimal_config"; // Minimal config options
+@import "stipe/buttons/lib/minimal"; // Sass UI code
+
+// Cupid-green
+@import "buttons/cupid_config"; // Minimal config options
+@import "stipe/buttons/lib/cupid-green"; // Sass UI code
+
+
+
+// buttons
+// --------------------------------------------------------------------
+//* toadstool buttons */
+button, a.button {
+	@extend %stipe_buttons; // pre-loaded silent class, I know you want to nuke this!
+}

data/sass/_config.scss

@@ -0,0 +1,216 @@
+// 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: 46;
+// $heading_2: 32;
+// $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: #{"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 /////
+// -----------------------------------------------------------------------------
+// $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
+// @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_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_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
+
+
+
+
+/////// 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;
+
+// default heading font weight
+// $heading_font_weight:                  normal;
+
+// 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;
+// $placeholder_text:              $hotel_gray;
+// $form_label_color:              $alpha_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
+// $is-shadow:                            2;                // inset spread 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)";

data/sass/_design.scss

@@ -0,0 +1,6 @@
+// Grid background for column view
+// @import "stipe/grid/debug";
+
+
+
+///////// global //////////

data/sass/_forms.scss

@@ -0,0 +1,18 @@
+input[type=text], input[type=password], input[type="date"], select {
+  @extend %input_fields;  // style comes from stipe/forms/_extends.scss 
+}
+
+input[type=text], input[type=password], input[type="date"] {
+  @media #{$mobile} {
+    -webkit-appearance: none;  // this is to remove the default inner shadow
+    -moz-appearance: none; // if this ever works, Moz bug for over a year
+  }
+}
+
+input[disabled], textarea[disabled], select[disabled], .disabled {
+  @extend %disabled_inputs; // style comes from stipe/forms/_extends.scss
+}
+
+label {
+  @extend %form_labels; // style comes from stipe/forms/_extends.scss
+}

data/sass/_modules.scss

@@ -0,0 +1,12 @@
+
+// Resource file that will import designated mixin and extend files
+// --------------------------------------------
+
+// List mixins to import here
+// --------------------------------------------
+@import "modules/example_module/mixins";
+
+
+// List extends to import here
+// --------------------------------------------
+@import "modules/example_module/extends";

data/sass/_reset.scss

@@ -0,0 +1,5 @@
+// There is nothing in this reset, if you are not happy with the reset options installed with Toadstool, 
+// please feel free to roll your own. 
+
+// Simple refer to this document via the config.scss file and ROCK IT!
+// --------------------------------------------------------------------------------

data/sass/_typography.scss

@@ -0,0 +1,93 @@
+// 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
+
+
+
+// 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;
+}
+
+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 as I can tell
+// code here to combat legacy code
+a {
+	// &:link {
+	// 	color: $href_color;
+	// 	text-decoration: none;
+	// }
+	// &:hover, &:active {
+	// 	text-decoration: underline;
+	// }
+	// &:visited {
+	// 	color: $href_color;
+	// }
+}

data/sass/_web_fonts.scss

@@ -0,0 +1,32 @@
+
+// -----------------------------------------------------------
+@import "stipe/typography/mixins"; // Do not edit, needed to pull in necessary mixin
+$webfont_directory: "/fonts/" !default; // edit this directory in the '_config.scss' file if needed.
+
+
+
+// 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";
+
+
+
+// Install your own
+// -----------------------------------------------------------
+//@font-face {
+//	@include font-face ($font_family: [name of family], $font-file:  [name of file], $font_weight: [value], $font_style: [value]);
+//}
+
+
+
+// Install google fonts
+// -----------------------------------------------------------
+// @import url(http://fonts.googleapis.com/css?family=Emblema+One);