toadstool 0.0.0.1

data/views/forms.erb

@@ -0,0 +1,24 @@
+	<header class="toadstool_header">
+		<h1>form</h1>
+	</header>
+	
+	<section id="text_inputs">
+    <%= partial :'shared/_toadstool_subheader', :locals => { 
+      :header => 'text inputs', :text => 'The following form input text types are supported <code>input[type=email]</code>, <code>input[type=password]</code>, <code>input[type=text]</code> and <code>input[type=number]</code>' 
+    } %>
+    <%= partial :'shared/_html_example', :locals => { :path => 'ui_patterns/forms/text_input.erb' } %>
+    <%= partial :'shared/_sass_example', :locals => { :path => 'sass/_forms.scss' } %>
+  </section>
+	
+	
+	<%#= partial :"forms/username_input" %>
+	
+	<%#= partial :"forms/password_input" %>
+	
+	<%#= partial :"forms/primary_button" %>
+	
+	<%#= partial :"forms/disabled_button" %>
+	
+
+
+	<footer class="toadstool_footer"></footer>

data/views/forms/disabled_button.erb

@@ -0,0 +1,18 @@
+<section id="disabled_button">
+	<header class="toadstool_subheader">
+		<h2>disabled button</h2>
+		<article>
+			<p>Copy goes here about how form inputs work</p>
+			<!-- <p><a href="#" class="click_more_typography">Read more ...</a></p> -->
+		</article>
+		<article class="read_more_inputs hidden"></article>
+	</header>
+	
+	<article class="element_example">
+		<form>
+			<fieldset>
+				<button disabled>Sign in</button>
+			</fieldset>
+		</form>
+	</article>
+</section>

data/views/forms/password_input.erb

@@ -0,0 +1,22 @@
+<section id="password_inputs">
+	<header class="toadstool_subheader">
+		<h2>password inputs</h2>
+		<article>
+			<p>Copy goes here about how form inputs work</p>
+			<!-- <p><a href="#" class="click_more_typography">Read more ...</a></p> -->
+		</article>
+		<article class="read_more_inputs hidden"></article>
+	</header>
+	
+	<article class="element_example">
+		<form>
+			<fieldset>
+				<ol>
+					<li>
+						<label for="login_password">Password</label>
+						<input type="password" name="password" id="login_password" placeholder="password" tabindex="2" />
+					</li>			
+				</ol>
+		</form>
+	</article>
+</section>

data/views/forms/primary_button.erb

@@ -0,0 +1,18 @@
+<section id="primary_button">
+	<header class="toadstool_subheader">
+		<h2>primary button</h2>
+		<article>
+			<p>Copy goes here about how form inputs work</p>
+			<!-- <p><a href="#" class="click_more_typography">Read more ...</a></p> -->
+		</article>
+		<article class="read_more_inputs hidden"></article>
+	</header>
+	
+	<article class="element_example">
+		<form>
+			<fieldset>
+				<button>Sign in</button>
+			</fieldset>
+		</form>
+	</article>
+</section>

data/views/forms/username_input.erb

@@ -0,0 +1,23 @@
+<section id="username_inputs">
+	<header class="toadstool_subheader">
+		<h2>username inputs</h2>
+		<article>
+			<p>Copy goes here about how form inputs work</p>
+			<!-- <p><a href="#" class="click_more_typography">Read more ...</a></p> -->
+		</article>
+		<article class="read_more_inputs hidden"></article>
+	</header>
+	
+	<article class="element_example">
+		<form>
+			<fieldset>
+				<ol>
+					<li>
+						<label for="login_username">Username</label>
+						<input type="text" autocapitalize="off" autocorrect="off" name="username" id="login_username" placeholder="username" />
+					</li>		
+				</ol>
+			</fieldset>
+		</form>
+	</article>
+</section>

data/views/grid.erb

@@ -0,0 +1,127 @@
+	<header class="toadstool_header">
+		<h1>grids</h1>
+	</header>
+	
+	<%= partial :"grids/use_definition" %>
+	
+	<article class="element_example col_12_grid shift">
+		<ul>
+			<li class="grid-1">1 col</li>
+			<li class="grid-11">11 col</li>
+		</ul>
+		<ul>
+			<li class="grid-2">2 col</li>
+			<li class="grid-10">10 col</li>
+		</ul>
+		<ul>
+			<li class="grid-3">3 col</li>
+			<li class="grid-9">9 col</li>
+		</ul>
+		<ul>
+			<li class="grid-4">4 col</li>
+			<li class="grid-8">8 col</li>
+		</ul>
+		<ul>
+			<li class="grid-5">5 col</li>
+			<li class="grid-7">7 col</li>
+		</ul>
+		<ul>
+			<li class="grid-6">6 col</li>
+			<li class="grid-6">6 col</li>
+		</ul>
+		<ul>
+			<li class="grid-7">7 col</li>
+			<li class="grid-5">5 col</li>
+		</ul>
+		<ul>
+			<li class="grid-8">8 col</li>
+			<li class="grid-4">4 col</li>
+		</ul>
+		<ul>
+			<li class="grid-9">9 col</li>
+			<li class="grid-3">3 col</li>
+		</ul>
+		<ul>
+			<li class="grid-10">10 col</li>
+			<li class="grid-2">2 col</li>
+		</ul>
+		<ul>
+			<li class="grid-11">11 col</li>
+			<li class="grid-1">1 col</li>
+		</ul>
+		<ul>
+			<li class="grid-12">12 col</li>
+		</ul>
+	</article>
+	
+	<article class="element_example col_10_grid">
+		<ul>
+			<li class="grid-1">1 col</li>
+			<li class="grid-9">9 col</li>
+		</ul>
+		<ul>
+			<li class="grid-2">2 col</li>
+			<li class="grid-8">8 col</li>
+		</ul>
+		<ul>
+			<li class="grid-3">3 col</li>
+			<li class="grid-7">7 col</li>
+		</ul>
+		<ul>
+			<li class="grid-4">4 col</li>
+			<li class="grid-6">6 col</li>
+		</ul>
+		<ul>
+			<li class="grid-5">5 col</li>
+			<li class="grid-5">5 col</li>
+		</ul>
+		<ul>
+			<li class="grid-6">6 col</li>
+			<li class="grid-4">4 col</li>
+		</ul>
+		<ul>
+			<li class="grid-7">7 col</li>
+			<li class="grid-3">3 col</li>
+		</ul>
+		<ul>
+			<li class="grid-8">8 col</li>
+			<li class="grid-2">2 col</li>
+		</ul>
+		<ul>
+			<li class="grid-9">9 col</li>
+			<li class="grid-1">1 col</li>
+		</ul>
+		<ul>
+			<li class="grid-10">10 col</li>
+			<li class="grid-11">11 col</li>
+			<li class="grid-12">12 col</li>
+		</ul>
+	</article>
+	
+	<article class="element_example col_4_grid">
+		<ul>
+			<li class="grid-1">1 col</li>
+			<li class="grid-3">3 col</li>
+		</ul>
+		<ul>
+			<li class="grid-2">2 col</li>
+			<li class="grid-2">2 col</li>
+		</ul>
+		<ul>
+			<li class="grid-3">3 col</li>
+			<li class="grid-1">1 col</li>
+		</ul>
+		<ul>
+			<li class="grid-4">4 col</li>
+			<li class="grid-5">5 col</li>
+			<li class="grid-6">6 col</li>
+			<li class="grid-7">7 col</li>
+			<li class="grid-8">8 col</li>
+			<li class="grid-9">9 col</li>
+			<li class="grid-10">10 col</li>
+			<li class="grid-11">11 col</li>
+			<li class="grid-12">12 col</li>
+		</ul>
+	</article>
+	
+	<%= partial :"grids/grid_arguments" %>

data/views/grid24.erb

@@ -0,0 +1,59 @@
+	<header class="toadstool_header">
+		<h1>grids</h1>
+	</header>
+	
+	<%= partial :"grids/use_definition" %>
+	
+	<article class="element_example col_24_grid shift">
+		<ul>
+			<li class="grid-1-24">1</li>
+			<li class="grid-23-24">23 col</li>
+		</ul>
+		<ul>
+			<li class="grid-2-24">2 col</li>
+			<li class="grid-22-24">22 col</li>
+		</ul>
+		<ul>
+			<li class="grid-3-24">3 col</li>
+			<li class="grid-21-24">21 col</li>
+		</ul>
+		<ul>
+			<li class="grid-4-24">4 col</li>
+			<li class="grid-20-24">20 col</li>
+		</ul>
+		<ul>
+			<li class="grid-5-24">5 col</li>
+			<li class="grid-19-24">19 col</li>
+		</ul>
+		<ul>
+			<li class="grid-6-24">6 col</li>
+			<li class="grid-18-24">18 col</li>
+		</ul>
+		<ul>
+			<li class="grid-7-24">7 col</li>
+			<li class="grid-17-24">17 col</li>
+		</ul>
+		<ul>
+			<li class="grid-8-24">8 col</li>
+			<li class="grid-16-24">16 col</li>
+		</ul>
+		<ul>
+			<li class="grid-9-24">9 col</li>
+			<li class="grid-15-24">15 col</li>
+		</ul>
+		<ul>
+			<li class="grid-10-24">10 col</li>
+			<li class="grid-14-24">14 col</li>
+		</ul>
+		<ul>
+			<li class="grid-11-24">11 col</li>
+			<li class="grid-13-24">13 col</li>
+		</ul>
+		<ul>
+			<li class="grid-12-24">12 col</li>
+			<li class="grid-12-24">12 col</li>
+		</ul>
+	</article>
+	
+	
+	<%= partial :"grids/grid_arguments" %>

data/views/grids/grid_arguments.erb

@@ -0,0 +1,22 @@
+<section id="grid_arguments">
+	<header class="toadstool_subheader">
+		<h2>grid arguments</h2>
+		<article>
+			<p>Additional arguments can be passed into the grid mixin to include <code>$grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_uom, $col_gutter, $grid_type, $grid_align, $grid_context</code></p>
+
+			<ul>
+				<li><code>$grid_padding_l</code> => adds padding LEFT, takes integer value</li>
+				<li><code>$grid_padding_r</code> => adds padding RIGHT, takes integer value</li>
+				<li><code>$grid_padding_tb</code> => adds padding TOP and BOTTOM, takes integer value</li>
+				<li><code>$grid_border</code> => takes integer value, adds border using <code>$border_color</code> and <code>$standard_border_style</code> configs found in <code>_config.scss</code>.</li>
+				<li><code>$border_place</code> => options are <code>left</code> and <code>right</code>. Argument will place a single border on either the left or right side of the block.</li>
+				<li><code>$grid_uom</code> => set to percent by default, accepts <code>em</code> as argument.</li>
+				<li><code>$col_gutter</code> => takes integer to adjust col gutter</li>
+				<li><code>$grid_type</code> => set to 12 col by default, allows for on-the-fly adjustment to grid type <b>Feature is currently inoperable</b></li>
+				<li><code>$grid_align</code> => takes <code>center</code> as argument</li>
+				<li><code>$grid_context</code> => Adjusts column widths based on nested grid context. Necessary when calcuclating with percentages</li>
+			</ul>
+			<p>Stipe uses the <code>box-size</code> CSS property, but this is not supported by IE7. By entereing values like <code>$grid_padding_l, $grid_padding_r, $grid_border</code>, Stipe will calculate a width that IE7 can use.</p>
+		</article>
+	</header>
+</section>

data/views/grids/use_definition.erb

@@ -0,0 +1,12 @@
+<section id="grid_use_definition">
+	<header class="toadstool_subheader">
+		<h2>grid use definition</h2>
+		<article>
+			<p>To use grids in Toadstool, Stipe comes with some awesome Mixins for easy creation of custom grids as well as commonly used silent classes.</p>
+			<p>Stipe's grid system is based on the original 960.gs solution; there are concepts like columns, gutters and nesting. For the most part when framing a UI, simply extend already pre-defined <a href="http://goo.gl/W1QlA" target="_blank">silent classes</a> like <code>@extend %grid_4</code>. These pre-formatted silent classes already come with additional support for mobile devices. </p>
+			<p>If you require more customization of a given grid, use <code>@include grid($col_count)</code>, replacing <code>$col_count</code> with the number of colums you need. </p>
+			<p>For nested grids, Stipe supports 'alpha' and 'omega' concepts. For added spice, if you want to remove both margins, 'alphaomega' works too. Example <code>@include grid(5, alpha)</code>.</p>
+			<p>Since Stipe's grid is pure math, you can pass in floating point numbers as well. Example, using <code>@include grid(12, alphaomega)</code> will remove the margin on the outside of the grid, but will not be 100% across. Increasing the value fractionally (<code>@include grid(12.25, alphaomega)</code>) will address the missing space. </p>
+		</article>
+	</header>
+</section>

data/views/layout.erb

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	
+	<title>Toadstool - Sinatra based styleguide bootstrap</title>
+	
+	<meta http-equiv="Content-Language" content="en-us" />
+	<meta name="description" content="">
+	<meta name="keywords" content="">
+	<meta name="author" content="">
+	
+	<!--  Mobile Viewport Fix, use at own risk -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+	
+	<!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
+	<link rel="shortcut icon" href="/images/favicon.ico">
+	<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
+	
+	<!-- CSS : implied media="screen" -->
+	<link rel="stylesheet" href="/stylesheets/style.css" />
+	<link rel="stylesheet" href="/stylesheets/toadstool.css" />
+	
+	<!--[if lte IE 8]>
+		<link rel="stylesheet" media="all" href="/styles/ie.css"/><![endif]-->
+		
+	<script src="http://code.jquery.com/jquery-latest.js"></script>
+	<script src="http://modernizr.com/downloads/modernizr.js"></script>
+	<script src="/javascripts/modernizr.mods.js"></script>
+	<script src="/javascripts/prettify.js"></script>
+	<script src="/javascripts/application.js"></script>
+	
+</head>
+
+<body onload="prettyPrint()">
+	<section class="styleguide_main_content">
+		<%= partial :"shared/_main_header" %>
+		<%= partial :"shared/_main_nav" %>
+		
+		<article class="styleguide_article">
+			<%= yield %>
+		</article>
+		
+		<%= partial :"shared/_main_footer" %>
+		</section>
+</body>
+
+
+
+<div class="emBox">
+	<span class="screen-width">0</span> / <span class="screen-width-px">0</span>
+</div>
+</html>
+
+

data/views/modules/example_module/readme.md

@@ -0,0 +1,29 @@
+#Build a module
+
+One of the core concepts of Toadstool is the law of abstraction. The Achilles heel of UI dev is the lack of abstraction of code from the visual application. We have been trained over the years that content and UI has a single application and any re-work will require editing of the markup. But the latest techniques and technologies have shown us otherwise. 
+
+##Definition a module
+A module is a single UI element that serves the purpose of either delivering content and/or interaction. A module is a self-contained series of design elements and possibly UI patterns. Regardless of fixed, fluid or responsive experience, the module itself does not have a defined space. It should always take up 100% width and it's height dictated by the content continued within. 
+
+When developers subscribe to this engineering method, then the application of module to a view should never require any additional coding. The structure of the view will dictate placement via a grid system.  
+
+##Know when you are doing it wrong
+If you find yourself coding elemental and/or UI patterns within a module, this should be a smell to refactor. 
+
+###Here is a simple example of a reusable module
+```html
+<article class="information_panels">
+  <h2>Salvia high life sartorial</h2>
+  <div>
+    <h3>Quinoa echo park salvia high life sartorial</h3>
+    <p>Skateboard tattooed cliche 8-bit banh mi blog biodiesel, freegan locavore vice 
+    wayfarers salvia keytar yr. Mustache iphone mixtape, cliche keytar vegan blog etsy 
+    beard retro banh mi letterpress next level echo park.</p>
+  </div>
+  <div>
+    <h3>Quinoa echo park salvia high life sartorial</h3>
+    <p>Skateboard tattooed cliche 8-bit banh mi blog biodiesel, freegan locavore vice 
+    wayfarers salvia keytar yr. Mustache iphone mixtape, cliche keytar vegan blog etsy 
+    beard retro banh mi letterpress next level echo park.</p>
+  </div>
+</article>

data/views/modules/readme.md

@@ -0,0 +1,10 @@
+#What is a module
+
+In Toadstool's eyes, the module is the single most important things you can build. It is the final object that will be placed in the view to create the experience. But the module is not the starting point, but a destination. 
+
+Starting with the elemental building blocks of the UI, then depending on the size of the module you will either assemble the final module here or using a combination of elements and UI patterns will then assemble the module. 
+
+The idea behind the module is keeping your code DRY. 
+
+##Refactoring is the KEY! 
+The difference between modules and UI patterns are really in the eye of the beholder. There is no clear divisional line between the two. The only assistance I can offer is ... if the module feels large and there are repeated objects within, then there is a good chance that you have an opportunity to peal out a UI pattern within that module.