speedo 0.0.1

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2012 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,39 @@
+= Speedo
+
+This is a layout gem intended as a backdrop for developing rails applications quickly. Its intention is to speed initial development, removing the need for (hopefully) any intensive front-end development until the app is functional (i.e. near completion). It provides the common tools CrankApps typically uses for front-end development.
+
+This gem is designed with both web-sites and web-apps in mind. A few minor changes can convert one into the other. See the bottom of styles.scss for code to uncomment, as well as home.coffee.
+
+There is a link in the footer ("How") to a page that contains many examples of the implementation of the various tools and plugins.
+
+This project uses MIT-LICENSE.
+
+== Usage
+
+In your Gemfile:
+
+<tt>gem 'speedo'</tt>
+
+== Inventory of plugins and gems:
+=== Gems
+* Haml
+* Haml-rails
+* Bourbon
+
+=== jQuery Plugins
+* jQuery-UI
+* jQuery.autogrow
+* jQuery.autoSuggest
+* jQuery.dataTables
+* jQuery.easing
+* jQuery.fancybox
+* jQuery.livequery
+* jQuery.mousewheel
+* jQuery.placeholder
+* jQuery.uniform
+
+=== Other Plugins
+* Modernizr
+* Chosen
+* Respond
+* ghbuttons

data/Rakefile

@@ -0,0 +1,39 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Speedo'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

data/app/assets/javascripts/home.coffee

@@ -0,0 +1,59 @@
+$ ->
+  
+  # For Web-app mode, uncomment this (and the CSS in style.scss) to make the cols fill the browser
+  # $('.col1, .col2, .col3').css('height',$(window).height() - $('.main_nav').outerHeight() - $('.branding').outerHeight() - 60 + 'px')
+  # $(window).resize ->
+  #   $('.col1, .col2, .col3').css('height',$(window).height() - $('.main_nav').outerHeight() - $('.branding').outerHeight() - 60 + 'px')
+  
+  
+  $('.popup').livequery ->
+    $(this).fancybox
+      overlayColor: "#fff"
+      transitionIn:"none"
+      transitionOut:"none"
+      titlePosition:"outside"
+      showCloseButton:false
+      titleFormat: (title, currentArray, currentIndex, currentOpts) ->
+        return if title == ''
+        return '<h3 class="popup-title">' + title + '</h3>'
+  
+  $('#fancybox-content .close').live 'click', (e) -> #close_lightbox_from_link(e)
+    e.preventDefault()
+    $.fancybox.close()
+  
+  $('input[type="date"]').livequery ->
+    $(this).datepicker
+      numberOfMonths:  2
+      dateFormat:      'yy-mm-dd'
+      showOn:          'focus'
+  
+  $('textarea.autoGrow').livequery ->
+    $(this).autogrow()
+  
+  $("select:not(.chzn), input:checkbox, input:radio, input:file").livequery ->
+    $(this).uniform()
+  
+  $('select.chzn').livequery ->
+    $(this).chosen()
+  
+  $('input.autoSuggest').livequery ->  
+    # $(this).autoSuggest "/path/to/script", 
+      # minChars: 2
+    autoSuggestData = [{value: "21", name: "Mick Jagger"},{value: "43", name: "Johnny Storm"},{value: "46", name: "Richard Hatch"}]
+    $(this).autoSuggest autoSuggestData,
+      startText: "AutoSuggesting"
+      selectedItemProp: "name"
+      searchObjProps: "name"
+  
+  $('input, textarea').livequery ->
+    $(this).placeholder()
+  
+  
+  $('.dataTable').livequery ->
+    $(this).dataTable
+      "bPaginate": false # Don't paginate
+      "aaSorting": [] # No initial sorting
+    # "bJQueryUI": true # Use jQueryUI styling
+    # "aoColumnDefs": [ # Use this to make the final column un-sortable
+    #   { "bSortable": false, "aTargets": [ -1 ] } 
+    # ]

data/app/assets/javascripts/speedo.js

@@ -0,0 +1,25 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery_ujs
+//= require jquery-ui
+//= require chosen.jquery
+//= require jquery.autoSuggest
+//= require jquery.autogrow
+//= require jquery.dataTables
+//= require jquery.fancybox-1.3.4
+//= require jquery.livequery
+//= require jquery.mousewheel-3.0.4.pack
+//= require jquery.placeholder.min
+//= require jquery.uniform
+//= require_tree .

data/app/assets/stylesheets/_style.scss

@@ -0,0 +1,475 @@
+#wrapper {
+  max-width: 964px;      /* Set the width of the page here, +4px for colmask box-shadow */
+  margin: 0 auto;
+  padding:0 2px 4px;     /* for colmask box-shadow */
+}
+
+/* Base Styles - Set HTML element styles here */
+body {
+  background: #ddd; 
+}
+a, a:visited, .link  { 
+  color: #0090d5; 
+  text-decoration: none;
+  cursor:pointer;
+}
+a:hover, .link:hover { color: #17639b; }
+ul, ol {
+  margin: 0;
+  padding: 0;
+  li {
+    list-style: none;
+  }
+}
+h1,h2,h3,h4,h5,h6 {
+  margin:10px 0 0.5em;
+  font-weight:normal;
+  font-weight:200;
+}
+h1    {font-size:2em;}
+h2,h3 {font-size:1.5em;}
+h4,h5 {font-size:1.2em;}
+h6    {font-size:1em;}
+h2,h4,h6{font-weight:normal;}
+footer {
+  position:relative;
+  margin:-1.8em 10px 0 0; // So it appears at the bottom of the right column
+  float: right;
+  font-size: 0.8em;
+  opacity:0.5;
+}
+input:not(.button), textarea {
+  border:1px solid #999;
+  @include border-radius(3px);
+  padding:5px;
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,0.2));
+  &:focus {
+    border-color:#acd;
+    @include box-shadow(0 0 3px rgba(150,180,230,1));
+  }
+}
+
+
+
+/* Basic styles */
+.no-js body {
+  margin-top:30px;
+}
+#noscript_warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 5px 0 6px;
+  text-align: center;
+  font-size: 120%;
+  font-weight: bold;
+  color: #fff;
+  background:#AE0000;
+  z-index: 101;
+}
+.branding {
+  padding:5px 0;
+  background:#eee;
+  .logo {
+    float: left;
+    margin-left:2%;
+    img {
+      display:block;
+      height: 40px;
+    }
+  }
+  .user {
+    float:right;
+    margin:10px 2% 0;
+    a {
+    }
+    .user-name {
+    }
+    .user-logout {
+    }
+  }
+}
+.main_nav {
+  padding:5px 0;
+  background:#eee;
+  .search {
+    margin-right:10px;
+  }
+  .home {
+    margin-left:10px;
+  }
+  a {
+    display:inline-block; zoom:1;*display:inline;
+    padding:0.2em 0.5em;
+    background:#ccc;
+    @include border-radius(0.3em);
+    &:hover {
+      background:#ddd;
+    }
+    &.active {
+      @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.5));
+    }
+  }
+}
+.flash {
+  padding:0.5em 2em;
+  font-size:1.5em;
+  text-align:center;
+  text-shadow:-1px -1px 1px #FFFFFF, 1px 1px 1px rgba(0, 0, 0, 0.3);
+  &.success {
+    background:$bggreen;
+    color:#090;
+  }
+  &.notice {
+    background:$bgblue;
+    color:#009;
+  }
+  &.alert {
+    background:$bgyellow;
+    color:#770;
+  }
+  &.error {
+    background:$bgred;
+    color:#900;
+  }
+}
+/* Fancybox Popups */
+.popups {
+  display:none;
+}
+.popup_content {
+  min-width:400px;
+}
+#fancybox-wrap {
+  padding-top:40px;
+  #fancybox-title {
+    position:absolute;
+    top:0px;
+    left:19px;
+    height:28px;
+    border:1px solid #333;
+    @include border-radius(3px);
+    padding:5px 10px;
+    @include box-shadow(0 1px 3px rgba(0,0,0,0.5));
+    @include linear-gradient(#355b92, #274674);
+    h3.popup-title {
+      margin-top:3px;
+      font-weight:normal;
+      text-shadow:1px 1px #333;
+    }
+  }
+}
+
+/* Plugin fixes */
+.dataTables_wrapper {
+  @include clearfix;
+}
+div.selector, div.uploader {
+  margin-left:-2px;
+}
+ul.as-selections {
+  border:1px solid #999;
+  @include border-radius(3px);
+  padding:5px;
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,0.2));
+  li.as-original input {
+    @include box-shadow(none);
+    color:#999; /* For the placeholder colour */
+    &:focus {color:inherit;}
+  }
+}
+.button-group, .button {
+  vertical-align:top;
+}
+
+
+/* =============================================================================
+   Non-semantic helper classes
+   ========================================================================== */
+
+/* For image replacement */
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.ir br { display: none; }
+
+/* Hide for both screenreaders and browsers:
+   css-discuss.incutio.com/wiki/Screenreader_Visibility */
+.hidden { display: none !important; visibility: hidden !important; }
+
+/* Hide only visually, but have it available for screenreaders: by Jon Neal.
+  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+/* Float and clear */
+.left { float: left; }
+.right { float: right; }
+.clear { clear: both; }
+
+/* Inline-block */
+.ib { display:inline-block; zoom:1; *display:inline; }
+
+
+
+/* =============================================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
+   ========================================================================== */
+ 
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
+  a, a:visited { color: #444 !important; text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3{ page-break-after: avoid; }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* Column Layout */
+/* 
+  This layout is designed for mobile-first, so that the 'side' columns go below the main 
+  content on narrower screen-widths.
+  Most of the styles that will be seen by the typical browser (i.e. the 960 design) are 
+  in the @media queries below.
+  Set the column background colours using the variables for consistent column colouration.
+*/
+
+
+/* Column background colors */
+$maincolbg: #fff;
+$leftcolbg: #f6f6f6;
+$rightcolbg: #fafafa;
+
+/* Layout for mobile < 480px width screens (see below for media queries) */
+.colmask {
+  position:relative;     /* This fixes the IE7 overflow hidden bug */
+  clear:both;
+  float:left;
+  width:100%;            /* width of whole page */
+  @include border-radius(0 0 3px 3px);
+  @include box-shadow(0 2px 2px rgba(0,0,0,0.5));
+  background:#fff;
+  overflow:hidden;       /* This chops off any overhanging divs, including the leftcol bg */
+}
+.colright,.colmid,.colleft {
+  float:left;
+  width:100%;
+  position:relative;
+}
+.col1,.col2,.col3 {
+  float:left;
+  position:relative;
+  padding:0 0 5em;
+}
+.onecol {                         /* Full page settings */
+  background:$maincolbg;          /* page background colour */
+  .col1 {
+    width:96%;                    /* page width minus left and right padding */
+    left:2%;                      /* page left padding */
+  }
+}
+.threecol, .leftcol, .rightcol {
+  background:$maincolbg;          /* main column background colour */
+  .col1, .col2, .col3 {
+    width:100%;                   /* page width minus left and right padding */
+    padding:0 2% 50px;            /* page left padding */
+  }
+  .col2 {background:$leftcolbg;}  /* left column background colour */
+  .col3 {background:$rightcolbg;} /* right column background colour */
+}
+.rightcol .col2, .leftcol .col3, .onecol .col2, .onecol .col3 { display:none; }
+
+
+/* Media Queries for Responsive Design. These override the primary ('mobile first') styles */
+
+@media only screen and (min-width: 480px) {
+ /* Style adjustments for viewports 480px and over go here */
+ /* 2 Column (double page) settings */
+ .threecol {
+   .col2 {
+     width:46%;     /* left column content width (column width minus left and right padding) */
+     left:0%;       /* right column width plus left column left padding */
+   }
+   .col3 {
+     width:46%;     /* right column content width (column width minus left and right padding) */
+     left:0%;       /* (right column width) plus (left column left and right padding) plus (right column left padding) */
+   }
+ }
+}
+
+@media only screen and (min-width: 768px) {
+  /* Style adjustments for viewports 768px and over (most desktop browsers) go here */
+  .colleft { box-shadow:inset -1px 0 0 #ccc; } /* 0 spread so it isn't visible at the top and bottom */
+  .colmid { box-shadow:1px 0 0 #ccc; }  /* Use box-shadow for 'borders' so the layout isn't affected */
+  .colmask {
+    .col1, .col2, .col3 {
+      padding:0 0 5em;
+      background:transparent
+    }
+  }
+  .col1 { min-height:400px; }
+  .leftcol {                  /* 2 Column (left menu) settings */
+    background:$maincolbg;    /* right column background colour */
+    .colleft {
+      right:75%;              /* right column width */
+      background:$leftcolbg;  /* left column background colour */
+    }
+    .col1 {
+      width:71%;              /* right column content width */
+      left:102%;              /* 100% plus left column left padding */
+    }
+    .col2 {
+      width:21%;              /* left column content width (column width minus left and right padding) */
+      left:6%;                /* (right column left and right padding) plus (left column left padding) */
+    }
+    .col3 {
+      display:none;
+    }
+  }
+  .rightcol {                 /* 2 Column (right menu) settings */
+    background:$rightcolbg;   /* right column background colour */
+    .colleft {
+      right:25%;              /* right column width */
+      background:$maincolbg;  /* left column background colour */
+    }
+    .col1 {
+      width:71%;              /* left column content width (left column width minus left and right padding) */
+      left:27%;               /* (right column width) plus (left column left padding) */
+    }
+    .col2 {
+      display:none;
+    }
+    .col3 {
+      width:21%;              /* right column content width (right column width minus left and right padding) */
+      left:31%;               /* (right column width) plus (left column left and right padding) plus (right column left padding) */
+    }
+  }
+  .threecol {                 /* 3 Column settings */
+    background:$rightcolbg;   /* right column background colour */
+    .colmid {
+      right:25%;              /* width of the right column */
+      background:$maincolbg;  /* left column background colour */
+    }
+    .colleft {
+      right:50%;              /* width of the middle column */
+      background:$leftcolbg;  /* left column background colour */
+    }
+    .col1 {
+      width:46%;              /* width of center column content (column width minus padding on either side) */
+      left:102%;              /* 100% plus left padding of center column */
+    }
+    .col2 {
+      width:21%;              /* Width of left column content (column width minus padding on either side) */
+      left:31%;               /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
+    }
+    .col3 {
+      width:21%;              /* Width of right column content (column width minus padding on either side) */
+      left:85%;               /* Please make note of the brackets here:
+      (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
+    }
+  }
+}
+
+
+
+/* Below are three options for variations on theming:
+  1. Web-app mode: Full-width, full-height page that doesn't scroll (the columns scroll instead) - also requires JS
+  2. Full-width page, fixed-position header, with scrolling content
+  3. Fixed-position header, with scrolling content (2 sections of CSS to uncomment)
+*/
+
+
+
+@media only screen and (min-width: 768px) {
+  /* For Web-app mode, uncomment this (and the JS in home.coffee) * /
+  #wrapper {
+    max-width: 100%;
+    width:100%;
+    margin:0;
+    padding:0;
+  }
+  .col1,.col2,.col3 {
+    overflow-y:auto;
+  }
+  /* */
+
+  /* For full-width fixed header+nav, uncomment this * /
+  #wrapper {
+    max-width: 100%;
+    width:100%;
+    margin:0;
+    padding:0;
+  }
+  .branding, .main_nav {
+    position:fixed;
+    width:100%;
+    top:0;
+    margin:0 auto;
+    z-index:1000;
+  }
+  .main_nav {
+    top:50px;         // Height of .branding
+  }
+  .col1,.col2,.col3 {
+    margin-top:83px;  // Height of .branding + .main_nav
+  }
+  /* */
+
+  /* For fixed header+nav, uncomment this (and 963 CSS below) * /
+  .branding, .main_nav {
+    position:fixed;
+    width:964px;
+    top:0;
+    margin:0 auto;
+    z-index:1000;
+  }
+  .main_nav {
+    top:50px;         // Height of .branding
+  }
+  .col1,.col2,.col3 {
+    margin-top:83px;  // Height of .branding + .main_nav
+  }
+  /* */  
+}
+@media only screen and (max-width: 963px) {
+  /* For fixed header+nav, uncomment this (and above) * /
+  .branding, .main_nav {
+    width:100%;
+  }
+  /* */
+}

data/app/assets/stylesheets/speedo.scss

@@ -0,0 +1,20 @@
+/*
+ *= require normalize
+ *= require autoSuggest
+ *= require chosen
+ *= require gh-buttons
+ *= require jquery.dataTables
+ *= require jquery.fancybox-1.3.4
+ *= require jquery-ui-1.8.18.custom
+ *= require uniform.default
+*/
+
+@import "bourbon";
+
+/* Set variables here */
+$bggreen: #e3fde4;
+$bgblue:  #bcf;
+$bgyellow:#ffc;
+$bgred:   #f99;
+
+@import "style";

data/app/controllers/speedo/application_controller.rb

@@ -0,0 +1,4 @@
+module Speedo
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/controllers/speedo/home_controller.rb

@@ -0,0 +1,6 @@
+module Speedo
+  class HomeController < ApplicationController
+    def index; end
+    def how; end
+  end
+end