style-guide 0.2.1 → 0.3.0

data/app/views/style_guide/style/_example.erb

@@ -0,0 +1,10 @@
+<div class="style-guide-partial" id="<%= partial.id %>">
+  <div class="style-guide-example-header"><%= partial.title %></div>
+  <div class="style-guide-example-description">
+    <%= t(partial.id, :scope => [:style_guide, @active.id.to_sym]).html_safe %>
+  </div>
+  <div class="style-guide-example">
+    <%= render :file => partial.path %>
+  </div>
+  <pre class="style-guide-example-source prettyprint"><%= partial.content %></pre>
+</div>

data/app/views/style_guide/style/show.html.erb

@@ -7,12 +7,7 @@
 
   <div class="style-guide-sections">
     <% @active.partials.each do |partial| %>
-      <section id="<%= partial.id %>">
-        <h1><%= partial.title %></h1>
-        <div class="style-guide-partial">
-          <%= render :file => partial.path %>
-        </div>
-      </section>
+      <%= render :partial => "example", :locals => { :partial => partial } %>
     <% end %>
   </div>
 </div>

data/config/locales/en.yml

@@ -0,0 +1,57 @@
+en:
+  style_guide:
+    bootstrap_base:
+      button_disabled_anchor: >
+        Make <code>&lt;a&gt;</code> buttons look unclickable by adding
+        the <code>.disabled</code> class
+      button_disabled_element: >
+        Make <code>&lt;button&gt;</code> buttons look unclickable by adding
+        the <code>.disabled</code> class
+      button_sizes: >
+        Fancy larger or smaller buttons?
+        Add <code>.btn-large</code>, <code>.btn-small</code>, or
+        <code>.btn-mini</code> for additional sizes.
+      button_types: >
+        Need different buttons for different occasions?  Add a class!
+      code_inline: >
+        Use <code>&lt;code&gt;</code> for inline snippets of code.
+      code_blocks: >
+        Use <code>&lt;pre&gt;</code> for multiple lines of code.
+        Be sure to escape any angle brackets in the code for proper rendering.
+      forms_default_styles: >
+        Individual form controls receive styling, but without any required base
+        class on the <code>&lt;form&gt;</code> or large changes in markup.
+        Results in stacked, left-aligned labels on top of form controls.
+      forms_search: >
+        Add <code>.form-search</code> to the form and <code>.search-query</code>
+        to the <code>&lt;input&gt;</code> for an extra-rounded text input.
+      forms_inline: >
+        Add <code>.form-inline</code> for left-aligned labels and inline-block
+        controls for a compact layout.
+      forms_horizontal: >
+        Right align labels and float them to the left to make them appear on
+        the same line as controls.
+        Requires the most markup changes from a default form:
+        <ul>
+          <li>Add <code>.form-horizontal</code> to the form</li>
+          <li>Wrap labels and controls in <code>.control-group</code></li>
+          <li>Add <code>.control-label</code> to the label</li>
+          <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
+        </ul>
+      form_controls_input: >
+        Most common form control, text-based input fields.
+        Includes support for all HTML5 types:
+        text, password, datetime, datetime-local, date, month, time, week,
+        number, email, url, search, tel, and color.
+        Requires the use of a specified <code>type</code> at all times.
+      form_controls_textarea: >
+        Form control which supports multiple lines of text.
+        Change <code>rows</code> attribute as necessary.
+      form_controls_checkbox_and_radio: >
+        Checkboxes are for selecting one or several options in a list while
+        radios are for selecting one option from many.
+        Add the <code>.inline</code> class to a series of checkboxes or radios
+        for controls to appear on the same line.
+      form_controls_select: >
+        Use the default option or specify a <code>multiple="multiple"</code>
+        to show multiple options at once.

data/lib/style_guide/config.rb

@@ -3,7 +3,7 @@ module StyleGuide
     attr_accessor :partial_paths
 
     def initialize(options = {})
-      @partial_paths = options[:partial_paths] || [StyleGuide::Engine.root.join("app/views/style_guide/partials")]
+      @partial_paths = options[:partial_paths] || [StyleGuide::Engine.root.join("app/views/style_guide/bootstrap_base")]
     end
   end
 end

data/lib/style_guide/engine.rb

@@ -6,5 +6,7 @@ module StyleGuide
   class Engine < ::Rails::Engine
     isolate_namespace StyleGuide
     config.style_guide = StyleGuide::Config.new
+    config.i18n.load_path += Dir.glob(StyleGuide::Engine.root.join('config', 'locales', '*.{rb,yml}').to_s)
+    config.i18n.default_locale = :en
   end
 end

data/lib/style_guide/section.rb

@@ -9,7 +9,7 @@ module StyleGuide
     end
 
     def id
-      @id ||= path.to_s.downcase.gsub(/[^a-zA-Z0-9]/, " ").strip.gsub(/\s+/, "_")
+      @id ||= File.basename(path).downcase.gsub(/[^a-zA-Z0-9]/, " ").strip.gsub(/\s+/, "_")
     end
 
     def title

data/lib/style_guide/version.rb

@@ -1,3 +1,3 @@
 module StyleGuide
-  VERSION = "0.2.1"
+  VERSION = "0.3.0"
 end

data/spec/dummy/app/assets/stylesheets/application.css

@@ -11,40 +11,3 @@
  *= require_self
  *= require_tree .
  */
-
-
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-
-body {
-  line-height: 1;
-}
-
-ol, ul {
-  list-style: none;
-}
-
-blockquote, q {
- quotes: none;
-}
-
-blockquote:before, blockquote:after, q:before, q:after {
- content: '';
- content: none;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-

data/spec/dummy/app/assets/stylesheets/swatches.css

@@ -1,10 +1,35 @@
 .swatch {
+  position: relative;
 	display: inline-block;
 	height: 50px;
 	width: 50px;
-	margin:10px;
+	margin: 10px;
 }
 
+.swatch:after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 0 2px;
+  font-size: 10px;
+  line-height: 12px;
+  height: 12px;
+  font-weight: 100;
+  background-color: #f5f5f5;
+  color: #888;
+  opacity: 0.75;
+}
+
+.freshBlue:after { content: "Blue"; }
+.freshRed:after { content: "Red"; }
+.freshGold:after { content: "Gold"; }
+.freshBlack:after { content: "Black"; }
+.freshDarkGray:after { content: "DarkGray"; }
+.freshGray:after { content: "Gray"; }
+.freshGray:after { content: "Gray"; }
+.freshLightGray:after { content: "LightGray"; }
+.freshLighterGray:after { content: "LighterGray"; }
+
 .freshBlue        { background-color: #6D99D3; }
 .freshRed         { background-color: #B90020; }
 .freshGold        { background-color: #C59E16; }

data/spec/dummy/app/assets/stylesheets/three_dee.css

@@ -0,0 +1,4 @@
+.three-dee {
+  color: transparent;
+  text-shadow: -2px 0 0 rgba(255, 0, 0, 0.5), 1px 0 0 rgba(0, 0, 255, 0.5);
+}

data/spec/dummy/app/views/styles/_00swatches.erb

@@ -1,8 +1,8 @@
-<div class="swatch freshBlue 		"></div>
-<div class="swatch freshRed 		"></div>
-<div class="swatch freshGold 		"></div>
-<div class="swatch freshBlack 	    "></div>
-<div class="swatch freshDarkGray	"></div>
-<div class="swatch freshGray 		"></div>
-<div class="swatch freshLightGray   "></div>
-<div class="swatch freshLighterGray "></div>
+<div class="swatch freshBlue"></div>
+<div class="swatch freshRed"></div>
+<div class="swatch freshGold"></div>
+<div class="swatch freshBlack"></div>
+<div class="swatch freshDarkGray"></div>
+<div class="swatch freshGray"></div>
+<div class="swatch freshLightGray"></div>
+<div class="swatch freshLighterGray"></div>

data/spec/dummy/app/views/styles/_three_dee.erb

@@ -0,0 +1 @@
+<h1 class="three-dee">Style Guide 3D: The Pivoting</h1>

data/spec/dummy/config/locales/en.yml

@@ -1,5 +1,7 @@
-# Sample localization file for English. Add more files in this directory for other locales.
-# See https://github.com/svenfuchs/rails-i18n/tree/master/rails%2Flocale for starting points.
-
 en:
-  hello: "Hello world"
+  style_guide:
+    styles:
+      00swatches: All the colors for the site.
+      three_dee: >
+        Provides a visually-irritating, though 3D-glasses friendly, text shadow
+        on all the text you want to pass in.  Just add <code>.three-dee</code>!

data/spec/lib/style_guide/config_spec.rb

@@ -4,7 +4,7 @@ describe StyleGuide::Config do
   describe "#partial_paths" do
     context "when no paths have been added" do
       it { should have(1).partial_path }
-      its(:partial_paths) { should == [StyleGuide::Engine.root.join("app/views/style_guide/partials")] }
+      its(:partial_paths) { should == [StyleGuide::Engine.root.join("app/views/style_guide/bootstrap_base")] }
     end
 
     context "after a path has been added" do

data/spec/lib/style_guide/section_spec.rb

@@ -28,19 +28,19 @@ describe StyleGuide::Section do
     subject { section.id }
 
     context "with a simple path" do
-      it { should == "magnetic_sputum" }
+      it { should == "sputum" }
     end
 
     context "with a good activerecord path" do
       let(:path) { "/tasty/bicycle_tires" }
 
-      it { should == "tasty_bicycle_tires" }
+      it { should == "bicycle_tires" }
     end
 
     context "with a path containing extra stuff" do
       let(:path) { "/help/kocher%has-m1y=keyb^oaard" }
 
-      it { should == "help_kocher_has_m1y_keyb_oaard" }
+      it { should == "kocher_has_m1y_keyb_oaard" }
     end
   end
 

data/style-guide.gemspec

@@ -14,6 +14,7 @@ Gem::Specification.new do |s|
   s.test_files    = `git ls-files -- spec/*`.split( "\n" )
   s.require_paths = ['lib']
 
+  s.add_dependency "i18n"
   s.add_dependency "rails"
   s.add_dependency "jquery-rails"
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: style-guide
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,8 +9,24 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-10 00:00:00.000000000 Z
+date: 2012-12-12 00:00:00.000000000 Z
 dependencies:
+- !ruby/object:Gem::Dependency
+  name: i18n
+  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: rails
   requirement: !ruby/object:Gem::Requirement
@@ -268,8 +284,6 @@ files:
 - app/assets/javascripts/style_guide/docs.js
 - app/assets/javascripts/style_guide/prettify.js
 - app/assets/javascripts/style_guide/sidebar.js
-- app/assets/stylesheets/docs.css
-- app/assets/stylesheets/responsive.css
 - app/assets/stylesheets/style_guide/application.css
 - app/assets/stylesheets/style_guide/ars-maquette-web.css
 - app/assets/stylesheets/style_guide/example.css
@@ -283,19 +297,28 @@ files:
 - app/controllers/style_guide/style_controller.rb
 - app/helpers/style_guide/application_helper.rb
 - app/views/layouts/style_guide/application.html.erb
-- app/views/style_guide/partials/_button_disabled_state.erb
-- app/views/style_guide/partials/_button_element.erb
-- app/views/style_guide/partials/_button_sizes.erb
-- app/views/style_guide/partials/_buttons.erb
-- app/views/style_guide/partials/_code_blocks.erb
-- app/views/style_guide/partials/_code_inline.erb
-- app/views/style_guide/partials/_forms.erb
-- app/views/style_guide/partials/_images.erb
-- app/views/style_guide/partials/_tables.erb
-- app/views/style_guide/partials/_typography.erb
+- app/views/style_guide/bootstrap_base/_button:_disabled_anchor.erb
+- app/views/style_guide/bootstrap_base/_button:_disabled_element.erb
+- app/views/style_guide/bootstrap_base/_button_sizes.erb
+- app/views/style_guide/bootstrap_base/_button_types.erb
+- app/views/style_guide/bootstrap_base/_code:_blocks.erb
+- app/views/style_guide/bootstrap_base/_code:_inline.erb
+- app/views/style_guide/bootstrap_base/_form_controls:_checkbox_and_radio.erb
+- app/views/style_guide/bootstrap_base/_form_controls:_input.erb
+- app/views/style_guide/bootstrap_base/_form_controls:_select.erb
+- app/views/style_guide/bootstrap_base/_form_controls:_textarea.erb
+- app/views/style_guide/bootstrap_base/_forms:_default_styles.erb
+- app/views/style_guide/bootstrap_base/_forms:_horizontal.erb
+- app/views/style_guide/bootstrap_base/_forms:_inline.erb
+- app/views/style_guide/bootstrap_base/_forms:_search.erb
+- app/views/style_guide/bootstrap_base/_images.erb
+- app/views/style_guide/bootstrap_base/_tables.erb
+- app/views/style_guide/bootstrap_base/_typography.erb
+- app/views/style_guide/style/_example.erb
 - app/views/style_guide/style/_header.erb
 - app/views/style_guide/style/_sidebar.erb
 - app/views/style_guide/style/show.html.erb
+- config/locales/en.yml
 - config/routes.rb
 - lib/style_guide.rb
 - lib/style_guide/config.rb
@@ -337,13 +360,14 @@ files:
 - spec/dummy/app/assets/stylesheets/bootstrap-responsive.css
 - spec/dummy/app/assets/stylesheets/bootstrap.css
 - spec/dummy/app/assets/stylesheets/swatches.css
+- spec/dummy/app/assets/stylesheets/three_dee.css
 - spec/dummy/app/controllers/application_controller.rb
 - spec/dummy/app/helpers/application_helper.rb
 - spec/dummy/app/mailers/.gitkeep
 - spec/dummy/app/models/.gitkeep
 - spec/dummy/app/views/layouts/application.html.erb
 - spec/dummy/app/views/styles/_00swatches.erb
-- spec/dummy/app/views/styles/_info-header.erb
+- spec/dummy/app/views/styles/_three_dee.erb
 - spec/dummy/config.ru
 - spec/dummy/config/application.rb
 - spec/dummy/config/boot.rb
@@ -438,13 +462,14 @@ test_files:
 - spec/dummy/app/assets/stylesheets/bootstrap-responsive.css
 - spec/dummy/app/assets/stylesheets/bootstrap.css
 - spec/dummy/app/assets/stylesheets/swatches.css
+- spec/dummy/app/assets/stylesheets/three_dee.css
 - spec/dummy/app/controllers/application_controller.rb
 - spec/dummy/app/helpers/application_helper.rb
 - spec/dummy/app/mailers/.gitkeep
 - spec/dummy/app/models/.gitkeep
 - spec/dummy/app/views/layouts/application.html.erb
 - spec/dummy/app/views/styles/_00swatches.erb
-- spec/dummy/app/views/styles/_info-header.erb
+- spec/dummy/app/views/styles/_three_dee.erb
 - spec/dummy/config.ru
 - spec/dummy/config/application.rb
 - spec/dummy/config/boot.rb

data/app/assets/stylesheets/docs.css

@@ -1,153 +0,0 @@
-/* Add additional stylesheets below
--------------------------------------------------- */
-/*
-  Bootstrap's documentation styles
-  Special styles for presenting Bootstrap's documentation and examples
-*/
-
-
-
-
-
-
-/* Special grid styles
--------------------------------------------------- */
-
-.show-grid {
-  margin-top: 10px;
-  margin-bottom: 20px;
-}
-.show-grid [class*="span"] {
-  background-color: #eee;
-  text-align: center;
-  -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
-  min-height: 40px;
-  line-height: 40px;
-}
-.show-grid:hover [class*="span"] {
-  background: #ddd;
-}
-.show-grid .show-grid {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.show-grid .show-grid [class*="span"] {
-  background-color: #ccc;
-}
-
-
-
-/* Misc
--------------------------------------------------- */
-
-/* Make tables spaced out a bit more */
-h2 + table,
-h3 + table,
-h4 + table,
-h2 + .row {
-  margin-top: 5px;
-}
-
-/* Fake the :focus state to demo it */
-.focused {
-  border-color: rgba(82,168,236,.8);
-  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
-     -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
-          box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
-  outline: 0;
-}
-
-/* For input sizes, make them display block */
-.docs-input-sizes select,
-.docs-input-sizes input[type=text] {
-  display: block;
-  margin-bottom: 9px;
-}
-
-/* Icons
-------------------------- */
-.the-icons {
-  margin-left: 0;
-  list-style: none;
-}
-.the-icons li {
-  float: left;
-  width: 25%;
-  line-height: 25px;
-}
-.the-icons i:hover {
-  background-color: rgba(255,0,0,.25);
-}
-
-
-
-/* Responsive docs
--------------------------------------------------- */
-
-/* Utility classes table
-------------------------- */
-.responsive-utilities th small {
-  display: block;
-  font-weight: normal;
-  color: #999;
-}
-.responsive-utilities tbody th {
-  font-weight: normal;
-}
-.responsive-utilities td {
-  text-align: center;
-}
-.responsive-utilities td.is-visible {
-  color: #468847;
-  background-color: #dff0d8 !important;
-}
-.responsive-utilities td.is-hidden {
-  color: #ccc;
-  background-color: #f9f9f9 !important;
-}
-
-/* Responsive tests
-------------------------- */
-.responsive-utilities-test {
-  margin-top: 5px;
-  margin-left: 0;
-  list-style: none;
-  overflow: hidden; /* clear floats */
-}
-.responsive-utilities-test li {
-  position: relative;
-  float: left;
-  width: 25%;
-  height: 43px;
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 43px;
-  color: #999;
-  text-align: center;
-  border: 1px solid #ddd;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-.responsive-utilities-test li + li {
-  margin-left: 10px;
-}
-.responsive-utilities-test span {
-  position: absolute;
-  top:    -1px;
-  left:   -1px;
-  right:  -1px;
-  bottom: -1px;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-.responsive-utilities-test span {
-  color: #468847;
-  background-color: #dff0d8;
-  border: 1px solid #d6e9c6;
-}
-
-