toadstool 0.0.0.1 → 0.0.0.3

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

@@ -18,20 +18,14 @@
 
 // Want web fonts? We got those too.
 // ------------------------------------------------------------------------------
-@import "web_fonts";
+@import "typography/web_fonts"; // edit this to add web font libraries
 
 
 
 // Following sequence will load the necessary Stipe libraries
 // ------------------------------------------------------------------------------
-@import "stipe/media";
-@import "stipe/stipe";
-@import "stipe/typography";
-@import "stipe/grid";
-@import "stipe/color";
-@import "stipe/gradients";
-@import "stipe/forms";
-@import "stipe/buttons";
+@import "compass/css3";                      // Including the Compass CSS3 mixins
+@import "stipe/manifest";
 @import "color/extends";
 
 
@@ -42,4 +36,6 @@
 @import "forms";
 @import "buttons";
 @import "design";
-@import "modules";
+@import "ui_patterns/example_pattern/example_pattern";
+@import "modules/example_module/example_module";
+@import "layouts/example_layout";

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

@@ -5,7 +5,7 @@
 
 // Toadstool styleguide UI manifest
 // ------------------------------------------------------------------------------
-@import "stipe/toadstool/ui_manifest";           // do not delete
+@import "toadstool-styleguide";           // do not delete
 @import "color/extends";
 
 // Toadstool styleguide UI custom styles

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

@@ -0,0 +1,13 @@
+// Use this Sass file to create custom typography silent placeholder extends per your project
+// -----------------------------------------------------------------------
+
+// Example: Uncomment this rule to see the effect on the style guide
+// -----------------------------------------------------------------------
+// %headings_1 {
+//   text-decoration: underline;
+//   text-shadow: 0 0 20px $shadow_color;
+//   &:first-letter {
+//     color: orange;
+//     font-size: 3em;
+//   }
+// }

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

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

data/{sass → lib/templates/project/sass/typography}/_web_fonts.scss

@@ -1,13 +1,10 @@
-
-// -----------------------------------------------------------
 @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
+// 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";

data/lib/templates/project/toadstool.rb

@@ -0,0 +1,94 @@
+# Those little ditties that Sinatra needs to make the magic happen
+# -----------------------------------------------------------------------
+require 'rubygems'
+require 'net/http'
+
+# If you're using bundler, you will need to add this
+require 'bundler/setup'
+
+require 'sinatra'
+require 'sinatra/partial'
+
+set :partial_template_engine, :erb
+
+
+# Helpers to add a new horn section to the band
+# -----------------------------------------------------------------------
+helpers do
+  include ERB::Util
+  alias_method :code, :html_escape
+
+  # write better links
+  def link_to_unless_current(location, text )
+    if request.path_info == location
+      text
+    else
+      link_to location, text
+    end
+  end
+
+  def link_to(url,text=url,opts={})
+    attributes = ""
+    opts.each { |key,value| attributes << key.to_s << "=\"" << value << "\" "}
+    "<a href=\"#{url}\" #{attributes}>#{text}</a>"
+  end
+
+
+  # html_example is a convenienence method that wraps ERB partial @file in our standard example markup
+  # with the rendered HTML in an <article> and the code in a collapsible div below.
+  #
+  # Use in a view as
+  #   <%= html_example 'ui_patterns/typography/_body_copy' %>
+  #
+  # @param file path to an ERB partial, relative to /views and omitting the extension,
+  #             e.g.: 'ui_patterns/typography/_body_copy'
+
+  def html_example(file)
+    file = File.new(File.join('views', file + '.erb'))
+
+    partial :'shared/_html_example', :locals => { :content => file.read(), :mtime => file.mtime, :path => file.path }
+  end
+
+
+  # sass_example is the same as html_example, but for Sass partials.
+  #
+  # Use in a view as
+  #   <%= sass_example 'forms/_extends' %>
+  #
+  # @param file path to an SCSS partial, relative to /sass and omitting the extension,
+  #             e.g.: 'forms/_extends'
+
+  def sass_example(file)
+    file = File.new(File.join('sass', file + '.scss'))
+
+    code_toggle file.read(), file.path, file.mtime
+  end
+
+
+  # code_toggle is a internal convenience method that wraps our collapsible example code div.
+  # You shouldn't need to use it directly.
+  #
+  # @param content  string of HTML or SCSS content
+  # @param path     path to the file being displayed
+  # @param mtime    mtime of the file being displayed
+
+  def code_toggle(content, path, mtime)
+    partial :'shared/_code_toggle', :locals => { :content => content, :mtime => mtime, :path => path }
+  end
+
+end
+
+
+# Without this, there is no app. No really, there is nothing.
+# -----------------------------------------------------------------------
+get '/' do
+  erb :typography
+end
+
+get %r{([\w\./_-]+)} do
+  if File.exists?('views' + params[:captures].first.gsub(/.(\/)$/, '') + '/index.erb')
+    erb :"#{params[:captures].first.gsub(/.(\/)$/, '')}/index"
+  else
+    erb :"#{params[:captures].first}"
+  end
+end

data/lib/templates/project/views/color_palettes.erb

@@ -0,0 +1,371 @@
+	<header class="toadstool_header">
+		<h1>colors</h1>
+	</header>
+
+  <article class="colorcode">
+    <header class="toadstool_subheader">
+      <h2>Typography</h2>
+    </header>
+    <div class="primary_header_color">
+      <p>$primary_header_color</p>
+    </div>
+    <div class="primary_text">
+      <p>$primary_text</p>
+    </div>
+    <div class="secondary_text">
+      <p>$secondary_text</p>
+    </div>
+    <div class="href_color">
+      <p>$href_color</p>
+    </div>
+  </article>
+
+
+  <article class="colorcode">  
+    <header class="toadstool_subheader">
+      <h2>Borders, rules and shadows</h2>
+    </header>
+    <div class="shadow_color">
+      <p>$shadow_color</p>
+    </div>
+    <div class="border_color">
+      <p>$border_color</p>
+    </div>
+    <div class="standard_hr_color">
+      <p>$standard_hr_color</p>
+    </div>
+    <div class="standard_border_color">
+      <p>$standard_border_color</p>
+    </div>
+  </article>
+
+  <article class="colorcode">  
+    <header class="toadstool_subheader">
+      <h2>Form elements</h2>
+    </header>
+    
+    <div class="alert_background_color">
+      <p>$alert_background_color</p>
+    </div>
+    <div class="input_disabled">
+      <p>$input_disabled</p>
+    </div>
+    <div class="input_disabled_bkg">
+      <p>$input_disabled_bkg</p>
+    </div>
+    <div class="input_disabled_border">
+      <p>$input_disabled_border</p>
+    </div>
+    <div class="input_disabled_text">
+      <p>$input_disabled_text</p>
+    </div>
+    <div class="form_field_background_color">
+      <p>$form_field_background_color</p>
+    </div>
+    <div class="form_field_focus_color">
+      <p>$form_field_focus_color</p>
+    </div>
+    <div class="form_field_fail_bkg">
+      <p>$form_field_fail_bkg</p>
+    </div>
+    <div class="form_field_border">
+      <p>$form_field_border</p>
+    </div>
+    <div class="form_field_border_fail">
+      <p>$form_field_border_fail</p>
+    </div>
+    <div class="form_field_focus_border_color">
+      <p>$form_field_focus_border_color</p>
+    </div>
+    <div class="form_field_text_fail">
+      <p>$form_field_text_fail</p>
+    </div>
+    <div class="form_label_color">
+      <p>$form_label_color</p>
+    </div>
+    <div class="optional_field_text_color">
+      <p>$optional_field_text_color</p>
+    </div>
+    <div class="instructional_text">
+      <p>$instructional_text</p>
+    </div>
+    <div class="placeholder_text">
+      <p>$placeholder_text</p>
+    </div>
+    <div class="inline_alert_bkg_color">
+      <p>$inline_alert_bkg_color</p>
+    </div>
+    <div class="inline_alert_text_color">
+      <p>$inline_alert_text_color</p>
+    </div>
+  </article>
+
+  <article class="colorcode">  
+    <header class="toadstool_subheader">
+      <h2>Buttons</h2>
+    </header>
+    <div class="button_color">
+      <p>$button_color</p>
+    </div>
+    <!-- <div class="primary_button_border_color">
+      <p>$primary_button_border_color</p>
+    </div> -->
+    <div class="secondary_button_border_color">
+      <p>$secondary_button_border_color</p>
+    </div>
+    <div class="button_text">
+      <p>$button_text</p>
+    </div>
+  </article>
+
+	<article class="colorcode">
+		<header class="toadstool_subheader">
+      <h2>HTML5 colors<a href="#">(view all)</a></h2>
+		</header>
+    <div class="webkit_tap_hightlight">
+        <p>$webkit_tap_hightlight</p>
+      </div>
+		<section class="hidden">
+      <div class="ins_color">
+        <p>$ins_color</p>
+      </div>
+      <div class="selection_color">
+        <p>$selection_color</p>
+      </div>
+      <div class="selection_text_color">
+        <p>$selection_text_color</p>
+      </div>
+      <div class="mark_color">
+        <p>$mark_color</p>
+      </div>
+    </section>
+  </article>
+
+
+	<article class="colorcode">
+		<header class="toadstool_subheader">
+			<h2>grayscale<a href="#">(view all)</a></h2>
+		</header>
+    <div class="alpha_gray">
+      <p>$alpha_gray</p>
+    </div>
+		<section class="hidden">  		
+  		<div class="bravo_gray">
+  			<p>$bravo_gray</p>
+  		</div>
+  		<div class="charlie_gray">
+  			<p>$charlie_gray</p>
+  		</div>
+  		<div class="delta_gray">
+  			<p>$delta_gray</p>
+  		</div>
+  		<div class="echo_gray">
+  			<p>$echo_gray</p>
+  		</div>
+  		<div class="fox_gray">
+  			<p>$fox_gray</p>
+  		</div>
+  		<div class="golf_gray">
+  			<p>$golf_gray</p>
+  		</div>
+  		<div class="hotel_gray">
+  			<p>$hotel_gray</p>
+  		</div>
+  		<div class="india_gray">
+  			<p>$india_gray</p>
+  		</div>
+      <div class="white">
+        <p>$white</p>
+      </div>
+    </section>
+	</article>
+	
+	<article class="colorcode">
+  		<header class="toadstool_subheader">
+  			<h2>alpha color scale<a href="#">(view all)</a></h2>
+  		</header>
+      <div class="alpha_color">
+          <p>$alpha_color</p>
+        </div>
+  		<section class="hidden">
+    		<div class="alpha_color_bravo">
+    			<p>$alpha_color_bravo</p>
+    		</div>
+    		<div class="alpha_color_charlie">
+    			<p>$alpha_color_charlie</p>
+    		</div>
+    		<div class="alpha_color_delta">
+    			<p>$alpha_color_delta</p>
+    		</div>
+    		<div class="alpha_color_echo">
+    			<p>$alpha_color_echo</p>
+    		</div>
+    		<div class="alpha_color_fox">
+    			<p>$alpha_color_fox</p>
+    		</div>
+    		<div class="alpha_color_golf">
+    			<p>$alpha_color_golf</p>
+    		</div>
+    		<div class="alpha_color_hotel">
+    			<p>$alpha_color_hotel</p>
+    		</div>
+    		<div class="alpha_color_india">
+    			<p>$alpha_color_india</p>
+    		</div>
+    		<div class="alpha_color_juliet">
+    			<p>$alpha_color_juliet</p>
+    		</div>
+      </section>
+  	</article>
+  	
+  	<article class="colorcode">
+  		<header class="toadstool_subheader">
+  			<h2>bravo color scale<a href="#">(view all)</a></h2>
+  		</header>
+      <div class="bravo_color">
+        <p>$bravo_color</p>
+      </div>
+  		<section class="hidden">
+    		<div class="bravo_color_bravo">
+    			<p>$bravo_color_bravo</p>
+    		</div>
+    		<div class="bravo_color_charlie">
+    			<p>$bravo_color_charlie</p>
+    		</div>
+    		<div class="bravo_color_delta">
+    			<p>$bravo_color_delta</p>
+    		</div>
+    		<div class="bravo_color_echo">
+    			<p>$bravo_color_echo</p>
+    		</div>
+    		<div class="bravo_color_fox">
+    			<p>$bravo_color_fox</p>
+    		</div>
+    		<div class="bravo_color_golf">
+    			<p>$bravo_color_golf</p>
+    		</div>
+    		<div class="bravo_color_hotel">
+    			<p>$bravo_color_hotel</p>
+    		</div>
+    		<div class="bravo_color_india">
+    			<p>$bravo_color_india</p>
+    		</div>
+    		<div class="bravo_color_juliet">
+    			<p>$bravo_color_juliet</p>
+    		</div>
+      </section>
+  	</article>
+  	
+  	<article class="colorcode">
+  		<header class="toadstool_subheader">
+  			<h2>charlie color scale<a href="#">(view all)</a></h2>
+  		</header>
+      <div class="charlie_color">
+        <p>$charlie_color</p>
+      </div>
+  		<section class="hidden">
+    		<div class="charlie_color_bravo">
+    			<p>$charlie_color_bravo</p>
+    		</div>
+    		<div class="charlie_color_charlie">
+    			<p>$charlie_color_charlie</p>
+    		</div>
+    		<div class="charlie_color_delta">
+    			<p>$charlie_color_delta</p>
+    		</div>
+    		<div class="charlie_color_echo">
+    			<p>$charlie_color_echo</p>
+    		</div>
+    		<div class="charlie_color_fox">
+    			<p>$charlie_color_fox</p>
+    		</div>
+    		<div class="charlie_color_golf">
+    			<p>$charlie_color_golf</p>
+    		</div>
+    		<div class="charlie_color_hotel">
+    			<p>$charlie_color_hotel</p>
+    		</div>
+    		<div class="charlie_color_india">
+    			<p>$charlie_color_india</p>
+    		</div>
+    		<div class="charlie_color_juliet">
+    			<p>$charlie_color_juliet</p>
+    		</div>
+      </section>
+  	</article>
+  	
+  	<article class="colorcode">
+  		<header class="toadstool_subheader">
+  			<h2>delta color scale<a href="#">(view all)</a></h2>
+  		</header>
+      <div class="delta_color">
+        <p>$delta_color</p>
+      </div>
+  		<section class="hidden">
+    		<div class="delta_color_bravo">
+    			<p>$delta_color_bravo</p>
+    		</div>
+    		<div class="delta_color_charlie">
+    			<p>$delta_color_charlie</p>
+    		</div>
+    		<div class="delta_color_delta">
+    			<p>$delta_color_delta</p>
+    		</div>
+    		<div class="delta_color_echo">
+    			<p>$delta_color_echo</p>
+    		</div>
+    		<div class="delta_color_fox">
+    			<p>$delta_color_fox</p>
+    		</div>
+    		<div class="delta_color_golf">
+    			<p>$delta_color_golf</p>
+    		</div>
+    		<div class="delta_color_hotel">
+    			<p>$delta_color_hotel</p>
+    		</div>
+    		<div class="delta_color_india">
+    			<p>$delta_color_india</p>
+    		</div>
+    		<div class="delta_color_juliet">
+    			<p>$delta_color_juliet</p>
+    		</div>
+      </section>
+  	</article>
+  	
+  	<article class="colorcode">
+  		<header class="toadstool_subheader">
+  			<h2>echo color scale<a href="#">(view all)</a></h2>
+  		</header>
+      <div class="echo_color">
+        <p>$echo_color</p>
+      </div>
+  		<section class="hidden">
+    		<div class="echo_color_bravo">
+    			<p>$echo_color_bravo</p>
+    		</div>
+    		<div class="echo_color_charlie">
+    			<p>$echo_color_charlie</p>
+    		</div>
+    		<div class="echo_color_delta">
+    			<p>$echo_color_delta</p>
+    		</div>
+    		<div class="echo_color_echo">
+    			<p>$echo_color_echo</p>
+    		</div>
+    		<div class="echo_color_fox">
+    			<p>$echo_color_fox</p>
+    		</div>
+    		<div class="echo_color_golf">
+    			<p>$echo_color_golf</p>
+    		</div>
+    		<div class="echo_color_hotel">
+    			<p>$echo_color_hotel</p>
+    		</div>
+    		<div class="echo_color_india">
+    			<p>$echo_color_india</p>
+    		</div>
+    		<div class="echo_color_juliet">
+    			<p>$echo_color_juliet</p>
+    		</div>
+      </section>
+  	</article>