toadstool 0.0.0.1

data/views/semantic_colors.erb

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

data/views/shared/_html_example.erb

@@ -0,0 +1,31 @@
+<%# Returns the extension (the portion of file name in path after the period) %>
+<% extname = File.extname(path) %>
+
+<%# Returns components of the filename, + last component of the filename sans the extension  %>
+<% fullPath = File.dirname(path) + '/' + File.basename(path, extname)%>
+
+<%# Returns components of the filename, + last component of the filename w/the extension  %>
+<% fullPathExtname = File.dirname(path) + '/' + File.basename(path)%>
+
+<%# prepends path to fullPathExtname %>
+<% mtime_path = 'views/' + fullPathExtname %>
+
+<%# wrapps fullPathExtname for display in the view %>
+<% file_path = '< File path: ' + fullPathExtname + ' ' + '>' %>
+
+<%# ---------------------------------------------- %>
+
+<article class="element_example">
+<%= partial fullPath %>
+</article>
+
+<div class="example_code">
+  <p class="codeToggle"><a href="#">view</a></p>
+  <pre class="prettyprint linenums hidden">
+<%= code partial fullPath %>
+  </pre>
+  <p><%= path %></p>
+  <p class="mtime">
+    Last modified: <%= File.mtime(mtime_path) %>
+  </p>
+</div>

data/views/shared/_main_footer.erb

@@ -0,0 +1,12 @@
+<footer class="toadstool_main_footer">
+	Toadstool &copy; 2012 -  
+	<script type="text/javascript">
+		var currentDate = new Date()
+		//var day = currentDate.getDate()
+		//var month = currentDate.getMonth() + 1
+		var year = currentDate.getFullYear()
+		document.write(year)
+	</script>
+	<a href="https://twitter.com/anotheruiguy">@anotheruiguy</a> and <a href="https://twitter.com/jed_foster">@jed_foster</a>.
+	It is available for use and modification under the <a href="https://github.com/Anotheruiguy/toadstool/blob/master/doc-src/mit_license.md">MIT license</a>.
+</footer>

data/views/shared/_main_header.erb

@@ -0,0 +1,4 @@
+<header class="toadstool_main_header">
+	<h1>logo here</h1>
+	<button class="nav_toggle"><span></span></button>	
+</header>

data/views/shared/_main_nav.erb

@@ -0,0 +1,16 @@
+<nav class="toadstool_nav mobi_hidden">
+	<ol>
+		<li><%= link_to_unless_current '/', 'Typography' %> </li>
+		<li><%= link_to_unless_current '/grid', 'Grids' %> </li>
+		<li><%= link_to_unless_current '/color_palettes', 'Color palettes' %> </li>
+		<!-- <li><%#= link_to_unless_current '/semantic_colors', 'Semantic color palette' %> </li> -->
+		
+		<!-- <li><%#= link_to_unless_current '/alerts', 'Alerts' %> </li> -->
+		<!-- <li><%#= link_to_unless_current '/buttons', 'Buttons' %> </li> -->
+		<li><%= link_to_unless_current '/forms', 'Forms' %> </li>
+		<!-- <li><%#= link_to_unless_current '/Patterns', 'Patterns' %> </li> -->
+		<!-- <li><%#= link_to_unless_current '/Modules', 'Modules' %> </li> -->
+	</ol>		
+</nav>
+
+

data/views/shared/_sass_example.erb

@@ -0,0 +1,10 @@
+<div class="example_code sassView">
+  <p class="codeToggle"><a href="#">view</a></p>
+  <pre class="prettyprint linenums hidden">
+<%= File.new(path).read() %>
+  </pre>
+  <p><%= path %></p>
+  <p class="mtime">
+    Last modified: <%= File.mtime(path) %>
+  </p>
+</div>

data/views/shared/_toadstool_subheader.erb

@@ -0,0 +1,6 @@
+    <header class="toadstool_subheader">
+      <h2><%= header %></h2>
+      <article>
+        <p><%= text %></p>
+      </article>
+    </header>

data/views/typography.erb

@@ -0,0 +1,17 @@
+<header class="toadstool_header">
+	<h1>typography</h1>
+</header>
+
+<%= partial :"typography/general_typography" %>
+
+<%= partial :"typography/web_fonts" %>
+
+<%= partial :"typography/headings" %>
+
+<%= partial :"typography/vertical_rhythm" %>
+
+<%= partial :"typography/body_copy" %>
+
+<%= partial :"typography/body_links" %>
+
+<footer class="toadstool_footer"></footer>

data/views/typography/body_copy.erb

@@ -0,0 +1,19 @@
+<section id="body_copy">
+	<header class="toadstool_subheader">
+		<h2>body copy</h2>
+		<p>Edit values in the <code>_config.scss</code> file to update standard body copy UI.</p>
+	</header>
+	<article class="element_example">
+		<p>Sapiente enim fingerstache, etsy single-origin coffee truffaut sriracha cupidatat viral hella eiusmod whatever. Salvia deserunt terry richardson nostrud irure marfa. Portland sapiente authentic swag. Anim narwhal exercitation consectetur butcher. Pork belly yr banksy occupy twee consectetur. Sustainable cupidatat eiusmod tumblr pour-over brooklyn keffiyeh, DIY 8-bit ex brunch single-origin coffee duis seitan. Mixtape ea 8-bit ennui, viral voluptate authentic culpa aesthetic occaecat art party.</p>
+		<p>Master cleanse swag officia selvage ea. Laborum fingerstache non quinoa cliche skateboard aliquip, irony portland. Fixie nihil godard, quis incididunt lomo locavore non quinoa iphone excepteur. Aute mollit food truck, voluptate occupy sed gastropub nostrud banh mi. Narwhal fugiat gluten-free, thundercats ennui lo-fi DIY kale chips nisi. Reprehenderit ea scenester, minim exercitation pork belly ut odd future iphone nostrud nihil. Ethical voluptate seitan high life.</p>
+	</article>
+	
+	<div class="example_code">
+<pre class="prettyprint">
+&lt;p&gt;Sapiente enim fingerstache, etsy single-origin coffee truffaut sriracha cupidatat viral hella eiusmod whatever. Salvia deserunt terry richardson nostrud irure marfa.&lt;/p&gt;
+</pre>
+		<p>example markup</p>	
+	</div>
+
+	
+</section>

data/views/typography/body_links.erb

@@ -0,0 +1,18 @@
+<section id="body_links">
+	<header class="toadstool_subheader">
+		<h2>body links</h2>
+		<p>Edit values in the <code>_config.scss</code> file to update standard links UI.</p>
+	</header>
+	<article class="element_example">
+		<p>Sapiente enim fingerstache, <a href="#">etsy single-origin</a> coffee truffaut sriracha cupidatat viral hella eiusmod whatever.</p>
+	</article>
+	
+	<div class="example_code">
+<pre class="prettyprint">
+&lt;p&gt;Sapiente enim fingerstache, &lt;a href=&quot;#&quot;&gt;etsy single-origin&lt;/a&gt; coffee truffaut sriracha cupidatat viral hella eiusmod whatever.&lt;/p&gt;
+</pre>
+		<p>example markup</p>	
+	</div>
+
+	
+</section>

data/views/typography/general_typography.erb

@@ -0,0 +1,19 @@
+<section id="general_typography">
+	<header class="toadstool_subheader">
+		<h2>general typography</h2>
+		<article>
+			<p>Much of your Typography has already been addressed with Toadstool. Simply use Toadstool's config file to address your <code>$font_size, $heading_1 - 6, $small_point_size and $large_point_size</code>. As well designate your  <code>$primary_font_family, $secondary_font_family and $heading_font_family</code> variables. </p>
+			<p>It should be noted that Toadstool DOES NOT USE PIXELS for any values. At any time you need use a width/height/size value, use Stipe's <a href="http://goo.gl/rK2Ae" target="_blank">em function</a>, for example: <code>font-size: em(12);</code>. </p>
+			
+			<p class="click_more"><a href="#">Read more ...</a></p>
+			
+			<div class="read_more hidden">
+				<p>Stipe's em function takes two arguments, <code>$target</code> and <code>$context</code>. By default <code>$context</code> is set to the <code>$font-size</code> you set in the your <a href="http://goo.gl/PqQSK" target="_blank">config.scss</a> file. The function will take the value of the argument, devide it by the context and convert that to an em vlaue for the final output. </p> 
+				<p>But why the second argument? The gotcha of ems is it's parental relationship. If at any time you redefined the parent font size, you need to redefine the context of this function. For example, if the partent was changed to <code>font-size: em(18);</code> and you wanted a header inside to be 24px, by resetting the context you will get the correct em value, like so: <code>font-size: em(24, 18);</code>.</p>
+				<p>Stipe also has a rem funciton that works the same way, example: <code>font-size: rem(24);</code> whereas this function takes the initial argument and devides by the font-size set in the <code>&lt;html&gt;</code> selector. Read more on rem from <a href="http://goo.gl/85fhM">snook.ca</a>, but use with caution, no support for IE8 and below.</p>
+			</div>
+			
+		</article>
+	
+	</header>
+</section>

data/views/typography/headings.erb

@@ -0,0 +1,65 @@
+<section id="headings">
+	<header class="toadstool_subheader">
+		<h2>headings</h2>
+		<article>
+			<p>In Toadstool, presentation is 100% separated from content and markup, this goes for typography too. Heading styles are not beholden to heading tags, but applied via slient classes to the appropiate semantic markup or class as needed.  </p>
+			
+			<p class="click_more"><a href="#">Read more ...</a></p>
+			
+			<div class="read_more hidden">
+				<p>Heading styles, by default, use the settings that are formatted in Stipe's library. Semantic headings are styled using <a href="http://goo.gl/iJfy9" target="_blank">pre-made silent classes</a> from Stipe's <a href="http://goo.gl/V81v3" target="_blank">default typograhy</a>. To edit these defaults, use the <a href="http://goo.gl/d9yvC" target="_blank">typography.scss</a> file found in your Toadstool app.</p>
+				<p>The <a href="http://goo.gl/xdnQm" target="_blank">@mixin heading</a> allows for four arguments to be passed, <code>$heading_size, $heading_font_family, $heading_color, $heading_font_weight</code>. </p>
+				<p>Default values for headings are editable in <a href="http://goo.gl/PqQSK" target="_blank">Toadstool's config file</a>.</p>
+			</div>
+		</article>
+	
+	</header>
+	<article class="element_example">
+		<h1>@extend %headings_1;</h1>
+		<h2>@extend %headings_2;</h2>
+		<h3>@extend %headings_3;</h3>
+	</article>
+	
+	
+	
+	<div class="example_code">
+	<p class="codeToggle"><a href="#">view</a></p>
+<pre class="prettyprint hidden">
+&lt;h1&gt;@extend %headings_1;&lt;/h1&gt;
+&lt;h2&gt;@extend %headings_2;&lt;/h2&gt;
+
+&lt;article class=&quot;nested_article&quot;&gt;
+  &lt;h1&gt;This is a nested header&lt;/h1&gt;
+&lt;/article&gt;
+
+&lt;div&gt;Copy in here will look like the headings 1 style&lt;/div&gt;
+</pre>
+		<p>example markup</p>	
+	</div>
+	
+	<div class="example_code">
+	<p class="codeToggle"><a href="#">view</a></p>
+<pre class="prettyprint hidden">
+// Here is a pretty standard example use
+h1 {
+  @extend %headings_1;
+}
+
+h2 {
+  @extend %headings_2;
+}
+
+// There may be times when you want a heading style on another selector
+.nested_article {
+  h1 {
+    @extend %headings_3;
+  }
+}
+
+div {
+  @extend %headings_1;
+}
+</pre>
+		<p>example SCSS</p>
+	</div>
+</section>

data/views/typography/vertical_rhythm.erb

@@ -0,0 +1,13 @@
+<section id="vertical_rhythm">  
+	<header class="toadstool_subheader">
+		<h2>vertical rhythm</h2>
+		<article>
+			<p>To the beat of the rhythm of the night <br>
+			Dance until the morning light <br>
+			Forget about the worries on your mind <br>
+			You can leave them all behind <br>
+			To the beat of the rhythm of the night <br>
+			Oh the rhythm of the night, oh yeah</p>
+		</article>
+	</header>
+</section>

data/views/typography/web_fonts.erb

@@ -0,0 +1,11 @@
+<section id="web_fonts">
+	<header class="toadstool_subheader">
+		<h2>web fonts</h2>
+		<article>
+			<p>You like web-fonts, well so do we. Toadstool and Stipe come fully equipped to support web fonts right out of the box. In Toadstool's public directory is a folder for fonts. Toadstool comes pre-loaded with <a href="#">Font Awesome</a> and <a href="#">Zocial</a>. </p>
+		</article>
+		
+		
+	
+	</header>
+</section>

data/views/ui_patterns/example.erb

@@ -0,0 +1 @@
+example ui pattern to go here

data/views/ui_patterns/forms/text_input.erb

@@ -0,0 +1,10 @@
+<form>
+  <fieldset>
+    <ol>
+      <li>
+        <label for="general_text">General text input</label>
+        <input type="text" name="general_text" id="general_text" placeholder="general text" />
+      </li> 
+    </ol>
+  </fieldset>
+</form>

data/views/ui_patterns/readme.md

@@ -0,0 +1,14 @@
+#What is a UI pattern?
+
+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 UI pattern fits in between the element and the module. The module could be thought of as a complete experience within a widget of sorts while a UI pattern is simply a repeated UI element that is shared among multiple modules. 
+
+The idea behind the UI pattern is keeping your code DRY. 
+
+##Refactoring is the KEY! 
+Modules are easy to discover while UI patterns are more elusive. It is my suggestion that you don't go chasing perfection.
+
+UI patterns present themselves. It is when you have completed a module and start another that you may discover a similar pattern between the two. This directory is here so that you have a place to document the patterns.  

metadata

@@ -0,0 +1,216 @@
+--- !ruby/object:Gem::Specification
+name: toadstool
+version: !ruby/object:Gem::Version
+  version: 0.0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Dale Sande
+- Jed Foster
+autorequire: 
+bindir: lib/bin
+cert_chain: []
+date: 2012-11-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sinatra
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sinatra-partial
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.2.1
+description: Toadstool styleguide app.
+email: dale.sande@gmail.com
+executables:
+- toadstool
+extensions: []
+extra_rdoc_files: []
+files:
+- config.rb
+- config.ru
+- doc-src/changelog.md
+- doc-src/config.md
+- doc-src/mit_license.md
+- doc-src/mixin_directory.md
+- doc-src/SASS-Guidelines.md
+- doc-src/sass.md
+- doc-src/What-Is-Toadstool.md
+- Gemfile
+- lib/bin/toadstool
+- lib/RackServer.rb
+- public/fonts/fontawesome-webfont.eot
+- public/fonts/fontawesome-webfont.svg
+- public/fonts/fontawesome-webfont.ttf
+- public/fonts/fontawesome-webfont.woff
+- public/fonts/zocial-regular-webfont.eot
+- public/fonts/zocial-regular-webfont.svg
+- public/fonts/zocial-regular-webfont.ttf
+- public/fonts/zocial-regular-webfont.woff
+- public/images/toadstool-logo.png
+- public/javascripts/application.js
+- public/javascripts/css_browser_selector.js
+- public/javascripts/lang-apollo.js
+- public/javascripts/lang-clj.js
+- public/javascripts/lang-css.js
+- public/javascripts/lang-go.js
+- public/javascripts/lang-hs.js
+- public/javascripts/lang-lisp.js
+- public/javascripts/lang-lua.js
+- public/javascripts/lang-ml.js
+- public/javascripts/lang-n.js
+- public/javascripts/lang-proto.js
+- public/javascripts/lang-scala.js
+- public/javascripts/lang-sql.js
+- public/javascripts/lang-tex.js
+- public/javascripts/lang-vb.js
+- public/javascripts/lang-vhdl.js
+- public/javascripts/lang-wiki.js
+- public/javascripts/lang-xq.js
+- public/javascripts/lang-yaml.js
+- public/javascripts/modernizr.mods.js
+- public/javascripts/prettify.js
+- public/javascripts/selectivizr-min.js
+- public/stylesheets/style.css
+- public/stylesheets/toadstool.css
+- Rakefile
+- readme.md
+- sass/_buttons.scss
+- sass/_config.scss
+- sass/_design.scss
+- sass/_forms.scss
+- sass/_modules.scss
+- sass/_reset.scss
+- sass/_typography.scss
+- sass/_ui_patterns.scss
+- sass/_web_fonts.scss
+- sass/buttons/_cupid_config.scss
+- sass/buttons/_minimal_config.scss
+- sass/color/_color_math.scss
+- sass/color/_extends.scss
+- sass/color/_grayscale_math.scss
+- sass/modules/example_module/_extends.scss
+- sass/modules/example_module/_mixins.scss
+- sass/modules/example_module/readme.md
+- sass/style.scss
+- sass/toadstool.scss
+- sass/ui_patterns/_color_grid.scss
+- sass/ui_patterns/_example.scss
+- toadstool.rb
+- views/abstract_colors.erb
+- views/alerts.erb
+- views/buttons.erb
+- views/color_palettes.erb
+- views/forms/disabled_button.erb
+- views/forms/password_input.erb
+- views/forms/primary_button.erb
+- views/forms/username_input.erb
+- views/forms.erb
+- views/grid.erb
+- views/grid24.erb
+- views/grids/grid_arguments.erb
+- views/grids/use_definition.erb
+- views/layout.erb
+- views/modules/example_module/module.erb
+- views/modules/example_module/module.js
+- views/modules/example_module/readme.md
+- views/modules/example_module/view.erb
+- views/modules/readme.md
+- views/semantic_colors.erb
+- views/shared/_html_example.erb
+- views/shared/_main_footer.erb
+- views/shared/_main_header.erb
+- views/shared/_main_nav.erb
+- views/shared/_sass_example.erb
+- views/shared/_toadstool_subheader.erb
+- views/typography/body_copy.erb
+- views/typography/body_links.erb
+- views/typography/general_typography.erb
+- views/typography/headings.erb
+- views/typography/vertical_rhythm.erb
+- views/typography/web_fonts.erb
+- views/typography.erb
+- views/ui_patterns/example.erb
+- views/ui_patterns/forms/text_input.erb
+- views/ui_patterns/readme.md
+homepage: https://github.com/Anotheruiguy/toadstool
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.23
+signing_key: 
+specification_version: 3
+summary: Toadstool styleguide app
+test_files: []