sb-styleguide 0.0.9 → 1.0.0

data/app/assets/stylesheets/application.css.scss

@@ -6,14 +6,33 @@
 // Settings grids
 // ======================================================
 
-$baby: 'baby-', 2, 10px, "max-width: 655px";
-$sister: 'sister-', 4, 15px, "max-width: 785px";
-$mother: 'mother-', 12, 20px;
+// Max container width
+$container-width: 800px;
+
+$baby: 'baby-', 2, 10px;
+$sister: 'sister-', 4, 15px, "min", 655px;
+$mother: 'mother-', 8, 20px, "min", $container-width;
 // Declare grid
-$grids : $mother, $sister, $baby;
+$grids : $baby, $sister, $mother;
 
-// Max container width
-$container-width: 980px;
+
+
+// Module scale
+$baseFontSize: 14px !default;
+$importantModNum: 300px !default;
+$base-size: $baseFontSize $importantModNum;
+
+$base-font-family: "Helvetica Neue", helvetica, arial, sans-serif !default;
+$base-line-height: 1.57;
+$base-line-height-px: 22px;
+
+
+$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$header-font-weight: bold !default;
+$header-font-color: #222 !default;
+$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$body-font-weight: normal !default;
+$body-font-color: $txt-color !default;
 
 // ======================================================
 // Stylguide
@@ -38,35 +57,19 @@ $container-width: 980px;
 @include create-column-sizes($grids);
 
 // ======================================================
-// Styleguide only styles
+// Site Base Styles
 // ======================================================
 
-@import 'coderay_githubish';
-
+@import 'base/all';
 
-//
-// Preview display list
-//
 
-.sg-example, .CodeRay {
-  margin: $base-line-height-px 0;
-}
-
-.CodeRay {
-  background-color: #F8F8F7;
-  border-bottom: 3px solid $main-color;
+// ======================================================
+// Site modules
+// ======================================================
 
-  .line-numbers {
-    margin-right: $column-gutter*2;
-  }
-}
+@import 'modules/coderay';
+@import 'modules/webfont_table';
+@import 'modules/layout_examples';
 
 
-hr {
-  margin: $base-line-height-px*2 0 $base-line-height-px;
-  height: 1px;
-  border: none;
-  color: mono(4);
-  background-color: mono(4);
-}
 

data/app/assets/stylesheets/base/_all.scss

@@ -0,0 +1,6 @@
+//
+// Site base styles
+// $author Ad Taylor
+
+@import "reset";
+@import "type";

data/app/assets/stylesheets/base/_reset.css.scss

@@ -0,0 +1,16 @@
+//
+// Site extra resets
+// $author Ad Taylor
+
+// ======================================================
+// Default elements
+// ======================================================
+
+hr {
+  margin: $base-line-height-px*2 0 $base-line-height-px;
+  height: 1px;
+  border: none;
+  color: mono(3);
+  background-color: mono(3);
+}
+

data/app/assets/stylesheets/base/_type.scss

@@ -0,0 +1,16 @@
+//
+// Site Type
+// $author Ad Taylor
+
+// ======================================================
+// Headings
+// ======================================================
+
+h1, .h1 {
+  color: $main-color;
+
+  small {
+    font-weight: normal;
+  }
+}
+

data/app/assets/stylesheets/{coderay_githubish.css.scss → modules/_coderay.css.scss}

@@ -1,3 +1,43 @@
+//
+// Coderay Example  Module
+// $author Ad Taylor
+
+// ======================================================
+// Add example block to coderay blocks
+// ======================================================
+
+.sg-example, .CodeRay {
+  margin: $base-line-height-px 0;
+}
+
+.example-highlight {
+  background-color: rgba(0,0,0,0.05);
+  font-weight: bold;
+  text-align: center;
+}
+
+.CodeRay, .sg-example, pre code {
+  font-size: 0.85em;
+}
+
+.CodeRay {
+  background-color: #F8F8F7;
+  border-bottom: 3px solid $main-color;
+
+  .line-numbers {
+    margin-right: $column-gutter*2;
+  }
+}
+
+.sg-example {
+  border: 1px dashed #ccc;
+  padding: 20px;
+}
+
+// ======================================================
+// Styles to give coderay a more 'githubish' feel
+// ======================================================
+
 .CodeRay {
   font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
   color: #000;

data/app/assets/stylesheets/modules/_layout_examples.css.scss

@@ -0,0 +1,13 @@
+//
+// Layout Examples Module
+// $author Ad Taylor
+
+// ======================================================
+// Layout example image shift
+// ======================================================
+
+.layout-example {
+  figure {
+    margin-left: -1.5em;
+  }
+}

data/app/assets/stylesheets/modules/_webfont_table.css.scss

@@ -0,0 +1,47 @@
+.webfonts-example {
+  width: 100%;
+  border-collapse:collapse;
+  border-spacing:0;
+
+  tr {
+    border-top:1px solid #e6eae8;
+  }
+
+  td {
+    padding-bottom:15px;padding-top:18px;vertical-align:top;
+  }
+  
+  ul {
+    padding: 0;
+    list-style: none;
+  }
+
+  .set {
+    margin-bottom:84px;
+  }
+  
+  .encode, .keyword {
+    width:41.667%;
+  }
+  
+  .css, .keyword li {
+    white-space: nowrap;
+  }
+  
+  .ss-icon {
+    padding-left:0;
+    width:16.667%;
+    font-size:32px;
+  }
+  
+  .encode {
+    font-size:14px;
+    text-align:center;
+    padding-right:20px;
+    line-height:1.8;
+  }
+
+  .unicode {
+    color:#949FA2;
+  }
+}

data/app/assets/stylesheets/vanilla-normal-old-ie.css.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+// ======================================================
+// Old IE!!
+// ======================================================
+
+$old-ie: true;
+$fixed-mqs: true;
+
+
+@import "vanilla-normal";

data/app/assets/stylesheets/vanilla-normal.css.scss

@@ -0,0 +1,33 @@
+@charset "UTF-8";
+
+@import "styleguide";
+
+// ======================================================
+// Settings grids
+// ======================================================
+
+// No settings changed - using defaults
+
+// ======================================================
+// Stylguide
+// ======================================================
+
+@import "styleguide/base/_all";
+@import "styleguide/modules/_all-grid";
+@import "styleguide/modules/_all-no-grid";
+
+
+// ======================================================
+// Default grids
+// ======================================================
+
+@import "styleguide/grid/_grid";
+
+
+// ======================================================
+// Build grid sizes
+// ======================================================
+
+@include create-column-sizes($grids);
+
+

data/app/controllers/application_controller.rb

@@ -1,3 +1,5 @@
 class ApplicationController < ActionController::Base
   protect_from_forgery
+
+  helper "Styleguide"
 end

data/app/controllers/base_controller.rb

@@ -0,0 +1,52 @@
+class BaseController < ApplicationController
+  def index
+    @page_title = "Base <small>type</small>"
+    @page_description = "Arguably the most important section of the style guide, where the foundations of the site are set. All modules will be extended from these base styles."
+    @page_nav = base_nav
+  end
+
+  def lists
+    @page_title = "Base <small>lists</small>"
+    @page_nav = base_nav
+  end
+
+  def buttons
+    @page_title = "Base <small>Buttons</small>"
+    @page_nav = base_nav
+  end
+
+  def labels
+    @page_title = "Base <small>Labels</small>"
+    @page_nav = base_nav
+  end
+
+  def forms
+    @page_title = "Base <small>Forms</small>"
+    @page_nav = base_nav
+  end
+
+  def images
+    @page_title = "Base <small>Images</small>"
+    @page_nav = base_nav
+  end
+
+  def webfonts
+    @page_title = "Base <small>Web Fonts</small>"
+    @page_description = "These are the web fonts that we have at our disposal. When using these fonts you should be certain they are neccessary, when you use just 1 character the user must downloaded the full font."
+    @page_nav = base_nav
+  end
+
+  private 
+  def base_nav
+    {
+      "Type" => base_path,
+      "Lists" => base_lists_path,
+      "Labels" => base_labels_path,
+      "Buttons" => base_buttons_path,
+      "Forms" => base_forms_path,
+      "Images" => base_images_path,
+      "Web Fonts" => base_webfonts_path
+      }
+  end
+
+end

data/app/controllers/grids_controller.rb

@@ -0,0 +1,48 @@
+class GridsController < ApplicationController
+  def index
+    @page_title = "Grid System<small>(s)</small>"
+    @page_description = "This grid system is built to be flexible but still simple enough to read. It can scale up and down, it can fold up and it can be pushed around."
+    @page_nav = grids_nav
+  end
+
+  def show
+    if example_layouts.has_key? params[:id]
+      render_example_layout params[:id], params[:format]
+    else
+      raise ActionController::RoutingError.new("Can not find example layout named: #{params[:id]}")
+    end
+  end
+
+  def layouts
+    @page_title = "Example Layouts."
+    @page_description = "A few example layouts for experimentation"
+    @page_nav = grids_nav
+    @layouts = example_layouts
+  end
+
+  private 
+  def grids_nav
+    {
+      "Grid Settings File" => grid_path +  "#Setting-Grids" ,
+      "Grid Example" => grid_path + "#Live-Grid-Example" ,
+      "Layouts" => grid_layouts_path
+    }
+  end
+
+  def example_layouts
+    {
+      "basic-marketing-site" => "Basic Marketing Site",
+      "jumbotron-site" => "Jumbotron Site"
+    }
+  end
+
+  def render_example_layout( template, format )
+    case format
+    when "haml"
+      render :text =>  File.open(Rails.root.join("app/views/grids/layouts/#{template}.haml")).read
+    else
+      render :template => "grids/layouts/#{template}.haml", :layout => false
+    end
+  end
+
+end

data/app/controllers/javascript_controller.rb

@@ -0,0 +1,20 @@
+class JavascriptController < ApplicationController
+  def index
+
+  end
+
+  def close
+  end
+
+  def forms
+  end
+
+  def ga_events
+  end
+
+  def responsive_resize
+  end
+
+  def switch
+  end
+end

data/app/controllers/modules_controller.rb

@@ -0,0 +1,43 @@
+class ModulesController < ApplicationController
+  def index
+    @page_title = "Modules"
+    @page_description = "On top of the grid and the base styles, a site is built up of modules of functionality. The modules within the style guide are common and reusable and should not be overly content specific."
+    @page_nav = modules_nav
+  end
+
+  def alerts
+    @page_title = "Alerts <small>Module</small>"
+    @page_nav = modules_nav
+  end
+
+  def footer
+  end
+
+  def nav
+    @page_title = "Alerts <small>Module</small>"
+    @page_nav = modules_nav
+  end
+
+  def panels
+    @page_title = "Panel <small>Module</small>"
+    @page_description = "Without doubt, the least exciting module we have."
+    @page_nav = modules_nav
+  end
+
+  def tabs
+    @page_title = "Tabs <small>Module</small>"
+    @page_nav = modules_nav
+  end
+
+  private 
+  def modules_nav
+    {
+      "Alerts" => modules_alerts_path,
+      "Tabs" => modules_tabs_path,
+      "Navigation" => modules_nav_path,
+      "Panels" => modules_panels_path
+      }
+  end
+
+end
+