toadstool 0.0.0.1

data/sass/style.scss

@@ -0,0 +1,45 @@
+// App Config - this is where most of your magic will happen
+// ------------------------------------------------------------------------------
+@import "config";  // Editing defaults here will override any set in the Stipe gem
+
+
+
+// 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";
+
+
+
+// Want web fonts? We got those too.
+// ------------------------------------------------------------------------------
+@import "web_fonts";
+
+
+
+// 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 "color/extends";
+
+
+
+// This where you start building your own styles. 
+// ------------------------------------------------------------------------------
+@import "typography";
+@import "forms";
+@import "buttons";
+@import "design";
+@import "modules";

data/sass/toadstool.scss

@@ -0,0 +1,14 @@
+// App Config - this is where most of your magic will happen
+// ------------------------------------------------------------------------------
+// @import "config";  // Editing defaults here will override any set in the Stipe gem
+
+
+// Toadstool styleguide UI manifest
+// ------------------------------------------------------------------------------
+@import "stipe/toadstool/ui_manifest";           // do not delete
+@import "color/extends";
+
+// Toadstool styleguide UI custom styles
+// ------------------------------------------------------------------------------
+
+

data/sass/ui_patterns/_color_grid.scss

@@ -0,0 +1,286 @@
+//* Standard grayscale objects */
+//* -------------------------- */
+.white {
+	@extend %white;
+}
+
+.alpha_gray {
+	@extend %alpha_gray;
+}
+
+.bravo_gray {
+	@extend %bravo_gray;
+}
+	
+.charlie_gray {
+	@extend %charlie_gray;
+}
+
+.delta_gray {
+	@extend %delta_gray;
+}
+	
+.echo_gray {
+	@extend %echo_gray;
+}
+	
+.fox_gray {
+	@extend %fox_gray;
+}
+
+.golf_gray {
+	@extend %golf_gray;
+}
+
+.hotel_gray {
+	@extend %hotel_gray;
+}
+
+.india_gray {
+	@extend %india_gray;
+}
+
+
+
+//* Standard color objects */
+//* ---------------------- */
+.alpha_color {
+	@extend %alpha_color;
+}
+.alpha_color_bravo {
+	@extend %alpha_color_bravo;
+}
+.alpha_color_charlie {
+	@extend %alpha_color_charlie;
+}
+.alpha_color_delta {
+	@extend %alpha_color_delta;
+}
+.alpha_color_echo {
+	@extend %alpha_color_echo;
+}
+.alpha_color_fox {
+	@extend %alpha_color_fox;
+}
+.alpha_color_golf {
+	@extend %alpha_color_golf;
+}
+.alpha_color_hotel {
+	@extend %alpha_color_hotel;
+}
+.alpha_color_india {
+	@extend %alpha_color_india;
+}
+.alpha_color_juliet {
+	@extend %alpha_color_juliet;
+}
+
+
+
+
+
+.bravo_color {
+	@extend %bravo_color;
+}
+.bravo_color_bravo {
+	@extend %bravo_color_bravo;
+}
+.bravo_color_charlie {
+	@extend %bravo_color_charlie;
+}
+.bravo_color_delta {
+	@extend %bravo_color_delta;
+}
+.bravo_color_echo {
+	@extend %bravo_color_echo;
+}
+.bravo_color_fox {
+	@extend %bravo_color_fox;
+}
+.bravo_color_golf {
+	@extend %bravo_color_golf;
+}
+.bravo_color_hotel {
+	@extend %bravo_color_hotel;
+}
+.bravo_color_india {
+	@extend %bravo_color_india;
+}
+.bravo_color_juliet {
+	@extend %bravo_color_juliet;
+}
+
+
+
+
+
+	
+.charlie_color {
+	@extend %charlie_color;
+}
+.charlie_color_bravo {
+	@extend %charlie_color_bravo;
+}
+.charlie_color_charlie {
+	@extend %charlie_color_charlie;
+}
+.charlie_color_delta {
+	@extend %charlie_color_delta;
+}
+.charlie_color_echo {
+	@extend %charlie_color_echo;
+}
+.charlie_color_fox {
+	@extend %charlie_color_fox;
+}
+.charlie_color_golf {
+	@extend %charlie_color_golf;
+}
+.charlie_color_hotel {
+	@extend %charlie_color_hotel;
+}
+.charlie_color_india {
+	@extend %charlie_color_india;
+}
+.charlie_color_juliet {
+	@extend %charlie_color_juliet;
+}
+
+
+
+
+
+	
+.delta_color {
+	@extend %delta_color;
+}
+.delta_color_bravo {
+	@extend %delta_color_bravo;
+}
+.delta_color_charlie {
+	@extend %delta_color_charlie;
+}
+.delta_color_delta {
+	@extend %delta_color_delta;
+}
+.delta_color_echo {
+	@extend %delta_color_echo;
+}
+.delta_color_fox {
+	@extend %delta_color_fox;
+}
+.delta_color_golf {
+	@extend %delta_color_golf;
+}
+.delta_color_hotel {
+	@extend %delta_color_hotel;
+}
+.delta_color_india {
+	@extend %delta_color_india;
+}
+.delta_color_juliet {
+	@extend %delta_color_juliet;
+}
+
+
+
+
+
+	
+.echo_color {
+	@extend %echo_color;
+}
+.echo_color_bravo {
+	@extend %echo_color_bravo;
+}
+.echo_color_charlie {
+	@extend %echo_color_charlie;
+}
+.echo_color_delta {
+	@extend %echo_color_delta;
+}
+.echo_color_echo {
+	@extend %echo_color_echo;
+}
+.echo_color_fox {
+	@extend %echo_color_fox;
+}
+.echo_color_golf {
+	@extend %echo_color_golf;
+}
+.echo_color_hotel {
+	@extend %echo_color_hotel;
+}
+.echo_color_india {
+	@extend %echo_color_india;
+}
+.echo_color_juliet {
+	@extend %echo_color_juliet;
+}
+
+
+/////// semantic color blocks ////////
+// ----------------------------------------------
+.white {
+	background: $white;
+}
+
+.shadow_color {
+	background: $shadow_color;
+}
+
+.primary_header_color {
+	background: $primary_header_color;
+}
+
+.heading_font_weight {
+	background: $heading_font_weight;
+}
+
+.primary_text {
+	background: $primary_text;
+}
+
+.href_color {
+	background: $href_color;
+}
+
+.ins_color {
+	background: $ins_color;
+}
+
+.mark_color {
+	background: $mark_color;
+}
+
+.webkit_tap_hightlight {
+	background: $webkit_tap_hightlight;
+}
+
+.selection_color {
+	background: $selection_color;
+}
+
+.selection_text_color {
+	background: $selection_text_color;
+}
+
+.border_color {
+	background: $border_color;
+}
+
+.primary_button_border_color {
+	background: $primary_button_border_color;
+}
+
+.secondary_button_border_color {
+	background: $secondary_button_border_color;
+}
+
+.button_text {
+	background: $button_text;
+}
+
+.standard_hr_color {
+	background: $standard_hr_color;
+}

data/toadstool.rb

@@ -0,0 +1,84 @@
+# Those little ditties that Sinatra needs to make the magic happen
+# -----------------------------------------------------------------------
+require 'rubygems'
+require 'compass'
+require 'sass'
+require 'net/http'
+
+require 'stipe'               # installed as a gem
+# require '../stipe/lib/stipe.rb' # locally as a Compass extension
+
+# 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
+
+end
+
+
+# It's like Sammy and Dino, but not really
+# -----------------------------------------------------------------------
+configure do
+  Compass.add_project_configuration(File.join(Sinatra::Application.root, 'config.rb'))
+end
+
+# at a minimum, the main sass file must reside within the ./views directory. here, we create a ./views/stylesheets directory where all of the sass files can safely reside.
+get '/stylesheets/:name.css' do
+  content_type 'text/css', :charset => 'utf-8'
+  scss(:"../sass/#{params[:name]}", Compass.sass_engine_options )
+end
+
+
+# Without this, there is no nav. 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
+
+# get '/' do
+#   slim :typography
+# end
+
+# get %r{([\w\./_-]+)} do
+#   if File.exists?('views' + params[:captures].first.gsub(/.(\/)$/, '') + '/index.slim')
+#     erb :"#{params[:captures].first.gsub(/.(\/)$/, '')}/index"
+#   else
+#     erb :"#{params[:captures].first}"
+#   end
+# end
+
+
+

data/views/abstract_colors.erb

@@ -0,0 +1 @@
+<h1>abstract colors</h1>

data/views/alerts.erb

@@ -0,0 +1 @@
+<h1>alerts</h1>

data/views/buttons.erb

@@ -0,0 +1 @@
+<h1>buttons</h1>

data/views/color_palettes.erb

@@ -0,0 +1,221 @@
+	<header class="toadstool_header">
+		<h1>colors</h1>
+	</header>
+	
+	<%#= partial :"grids/use_definition" %>
+	
+	<article class="colorcode">
+		<header class="toadstool_subheader">
+			<h2>grayscale objects</h2>
+		</header>
+		<div class="white border">
+			<p>%white</p>
+		</div>
+		<div class="alpha_gray">
+			<p>%alpha_gray</p>
+		</div>
+		<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>
+	</article>
+	
+	<article class="colorcode">
+		<header class="toadstool_subheader">
+			<h2>alpha objects</h2>
+		</header>
+		<div class="alpha_color">
+			<p>%alpha_color</p>
+		</div>
+		<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>
+	</article>
+	
+	<article class="colorcode">
+		<header class="toadstool_subheader">
+			<h2>bravo objects</h2>
+		</header>
+		<div class="bravo_color">
+			<p>%bravo_color</p>
+		</div>
+		<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>
+	</article>
+	
+	<article class="colorcode">
+		<header class="toadstool_subheader">
+			<h2>charlie objects</h2>
+		</header>
+		<div class="charlie_color">
+			<p>%charlie_color</p>
+		</div>
+		<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>
+	</article>
+	
+	<article class="colorcode">
+		<header class="toadstool_subheader">
+			<h2>delta objects</h2>
+		</header>
+		<div class="delta_color">
+			<p>%delta_color</p>
+		</div>
+		<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>
+	</article>
+	
+	<article class="colorcode">
+		<header class="toadstool_subheader">
+			<h2>echo objects</h2>
+		</header>
+		<div class="echo_color">
+			<p>%echo_color</p>
+		</div>
+		<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>
+	</article>