plinth 0.0.1.beta.1

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

@@ -0,0 +1,171 @@
+//
+// 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;
+  padding: 1em 0px 1em 1em;
+}
+
+.CodeRay pre {
+  margin: 0px;
+}
+
+div.CodeRay { }
+span.CodeRay { white-space: pre; border: 0px; padding: 2px }
+
+table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
+table.CodeRay td {
+  padding: 1em 0.5em;
+  vertical-align: top;
+}
+
+.CodeRay .line-numbers, .CodeRay .no {
+  background-color: #ECECEC;
+  color: #AAA;
+  text-align: right;
+}
+
+.CodeRay .line-numbers a {
+  color: #AAA;
+  border: none;
+}
+
+.CodeRay .line-numbers tt { font-weight: bold }
+.CodeRay .line-numbers .highlighted { color: red }
+.CodeRay .line { display: block; float: left; width: 100%; }
+.CodeRay span.line-numbers { padding: 0px 4px }
+.CodeRay .code { width: 100% }
+
+ol.CodeRay { font-size: 10pt }
+ol.CodeRay li { white-space: pre }
+
+.CodeRay .code pre { overflow: auto }
+.CodeRay .debug { color:white ! important; background:blue ! important; }
+
+.CodeRay .annotation { color:#007 }
+.CodeRay .attribute-name { color:#f08 }
+.CodeRay .attribute-value { color:#700 }
+.CodeRay .binary { color:#509; font-weight:bold }
+.CodeRay .comment  { color:#998; font-style: italic;}
+.CodeRay .char { color:#04D }
+.CodeRay .char .content { color:#04D }
+.CodeRay .char .delimiter { color:#039 }
+.CodeRay .class { color:#458; font-weight:bold }
+.CodeRay .complex { color:#A08; font-weight:bold }
+.CodeRay .constant { color:teal; }
+.CodeRay .color { color:#0A0 }
+.CodeRay .class-variable { color:#369 }
+.CodeRay .decorator { color:#B0B; }
+.CodeRay .definition { color:#099; font-weight:bold }
+.CodeRay .directive { color:#088; font-weight:bold }
+.CodeRay .delimiter { color:black }
+.CodeRay .doc { color:#970 }
+.CodeRay .doctype { color:#34b }
+.CodeRay .doc-string { color:#D42; font-weight:bold }
+.CodeRay .escape  { color:#666; font-weight:bold }
+.CodeRay .entity { color:#800; font-weight:bold }
+.CodeRay .error { color:#F00; background-color:#FAA }
+.CodeRay .exception { color:#C00; font-weight:bold }
+.CodeRay .filename { color:#099; }
+.CodeRay .function { color:#900; font-weight:bold }
+.CodeRay .global-variable { color:teal; font-weight:bold }
+.CodeRay .hex { color:#058; font-weight:bold }
+.CodeRay .integer  { color:#099; }
+.CodeRay .include { color:#B44; font-weight:bold }
+.CodeRay .inline { color: black }
+.CodeRay .inline .inline { background: #ccc }
+.CodeRay .inline .inline .inline { background: #bbb }
+.CodeRay .inline .inline-delimiter { color: #D14; }
+.CodeRay .inline-delimiter { color: #D14; }
+.CodeRay .important { color:#f00; }
+.CodeRay .interpreted { color:#B2B; font-weight:bold }
+.CodeRay .instance-variable { color:teal }
+.CodeRay .label { color:#970; font-weight:bold }
+.CodeRay .local-variable { color:#963 }
+.CodeRay .octal { color:#40E; font-weight:bold }
+.CodeRay .operator { }
+.CodeRay .predefined-constant {  font-weight:bold }
+.CodeRay .predefined { color:#369; font-weight:bold }
+.CodeRay .preprocessor { color:#579; }
+.CodeRay .pseudo-class { color:#00C; font-weight:bold }
+.CodeRay .predefined-type { color:#074; font-weight:bold }
+.CodeRay .reserved, .keyword  { color:#000; font-weight:bold }
+
+.CodeRay .key { color: #808; }
+.CodeRay .key .delimiter { color: #606; }
+.CodeRay .key .char { color: #80f; }
+.CodeRay .value { color: #088; }
+
+.CodeRay .regexp { background-color:#fff0ff }
+.CodeRay .regexp .content { color:#808 }
+.CodeRay .regexp .delimiter { color:#404 }
+.CodeRay .regexp .modifier { color:#C2C }
+.CodeRay .regexp .function  { color:#404; font-weight: bold }
+
+.CodeRay .string { color: #D20; }
+.CodeRay .string .string { }
+.CodeRay .string .string .string { background-color:#ffd0d0 }
+.CodeRay .string .content { color: #D14; }
+.CodeRay .string .char { color: #D14; }
+.CodeRay .string .delimiter { color: #D14; }
+
+.CodeRay .shell { color:#D14 }
+.CodeRay .shell .content { }
+.CodeRay .shell .delimiter { color:#D14 }
+
+.CodeRay .symbol { color:#990073 }
+.CodeRay .symbol .content { color:#A60 }
+.CodeRay .symbol .delimiter { color:#630 }
+
+.CodeRay .tag { color:#070 }
+.CodeRay .tag-special { color:#D70; font-weight:bold }
+.CodeRay .type { color:#339; font-weight:bold }
+.CodeRay .variable  { color:#036 }
+
+.CodeRay .insert { background: #afa; }
+.CodeRay .delete { background: #faa; }
+.CodeRay .change { color: #aaf; background: #007; }
+.CodeRay .head { color: #f8f; background: #505 }
+
+.CodeRay .insert .insert { color: #080; font-weight:bold }
+.CodeRay .delete .delete { color: #800; font-weight:bold }
+.CodeRay .change .change { color: #66f; }
+.CodeRay .head .head { color: #f4f; }

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 "plinth";
+
+// ======================================================
+// Settings grids
+// ======================================================
+
+// No settings changed - using defaults
+
+// ======================================================
+// Stylguide
+// ======================================================
+
+@import "plinth/base/_all";
+@import "plinth/modules/_all-grid";
+@import "plinth/modules/_all-no-grid";
+
+
+// ======================================================
+// Default grids
+// ======================================================
+
+@import "plinth/grid/_grid";
+
+
+// ======================================================
+// Build grid sizes
+// ======================================================
+
+@include create-column-sizes($grids);
+
+

data/app/controllers/application_controller.rb

@@ -0,0 +1,5 @@
+class ApplicationController < ActionController::Base
+  protect_from_forgery
+
+  helper "Plinth"
+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/javascripts_controller.rb

@@ -0,0 +1,4 @@
+class JavascriptsController < ApplicationController
+  def index
+  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
+

data/app/controllers/ui_controller.rb

@@ -0,0 +1,2 @@
+class UiController < ApplicationController
+end

data/app/helpers/plinth_helper.rb

@@ -0,0 +1,33 @@
+require 'coderay'
+
+module PlinthHelper
+
+  def example
+    capture_haml do
+      haml_tag :div, :class => "sg-example"  do
+        yield
+      end
+    end
+  end
+
+  def example( section, partial )
+    contents = File.open(Rails.root.join("app/views/parts/#{section}/_#{partial}.haml")).read
+    haml_contents = Haml::Engine.new(contents).render
+    code_contents = CodeRay.scan( contents , :haml).div(:line_numbers => :table)
+    "<div><div class='sg-example'>#{haml_contents}</div>#{code_contents}</div>".html_safe
+  end
+
+  def nav_link(text, path)
+    classes = ""
+    classes += "is-active" if path.include? controller.controller_name 
+    content_tag :li,  link_to( text, path), class: classes
+  end
+
+  def sassie_stylesheets(file)
+    ie_stylesheet = stylesheet_link_tag file + '-old-ie'
+    non_ie_stylesheet = stylesheet_link_tag file
+
+    "<!--[if lte IE 8]>#{ie_stylesheet}<![endif]-->\n<!--[if gt IE 8]><!-->#{non_ie_stylesheet}<!--<![endif]-->".html_safe
+  end
+
+end