compass_extension 0.1.0 → 0.1.1

data/lib/app/helpers/html5_boilerplate_helper.rb

@@ -0,0 +1,63 @@
+module Html5BoilerplateHelper
+  # Create a named haml tag to wrap IE conditional around a block
+  # http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
+  # Consider adding an manifest.appcache: h5bp.com/d/Offline
+  def ie_tag(name=:body, attrs={}, &block)
+    attrs.symbolize_keys!
+    haml_concat("<!--[if lt IE 7]> #{ tag(name, add_class('ie6', attrs), true) } <![endif]-->".html_safe)
+    haml_concat("<!--[if IE 7]>    #{ tag(name, add_class('ie7', attrs), true) } <![endif]-->".html_safe)
+    haml_concat("<!--[if IE 8]>    #{ tag(name, add_class('ie8', attrs), true) } <![endif]-->".html_safe)
+    haml_concat("<!--[if gt IE 8]><!-->".html_safe)
+    haml_tag name, attrs do
+      haml_concat("<!--<![endif]-->".html_safe)
+      block.call
+    end
+  end
+
+  def ie_html(attrs={}, &block)
+    ie_tag(:html, attrs, &block)
+  end
+
+  def ie_body(attrs={}, &block)
+    ie_tag(:body, attrs, &block)
+  end
+
+  def google_account_id
+    ENV['GOOGLE_ACCOUNT_ID'] || google_config(:google_account_id)
+  end
+
+  def google_api_key
+    ENV['GOOGLE_API_KEY'] || google_config(:google_api_key)
+  end
+
+  def remote_jquery(version)
+    if Rails.env == 'development'
+      "'jquery', '#{version}', {uncompressed:true}"
+    else
+      "'jquery', '#{version}'"
+    end
+  end
+
+  def local_jquery(version)
+    if Rails.env == 'development'
+      "#{version}/jquery.js"
+    else
+      "#{version}/jquery.min.js"
+    end
+  end
+
+private
+
+  def add_class(name, attrs)
+    classes = attrs[:class] || ''
+    classes.strip!
+    classes = ' ' + classes if !classes.blank?
+    classes = name + classes
+    attrs.merge(:class => classes)
+  end
+
+  def google_config(key)
+    configs = YAML.load_file(File.join(Rails.root, 'config', 'google.yml'))[Rails.env.to_sym] rescue {}
+    configs[key]
+  end
+end

data/lib/compass/h5bp/version.rb

@@ -0,0 +1,6 @@
+module Compass
+  module H5bp
+    VERSION = "0.0.5"
+    HTML5_BOILERPLATE_VERSION = "3.0.2"
+  end
+end

data/lib/compass/h5bp.rb

@@ -0,0 +1,7 @@
+require "compass/h5bp/version"
+
+module Compass
+  module H5bp
+    Compass::Frameworks.register("compass-h5bp", :path => "#{File.dirname(__FILE__)}/../..")
+  end
+end

data/lib/compass_extension.rb

@@ -0,0 +1,9 @@
+require 'compass'
+require "compass/h5bp"
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('compass_extension', :path => "#{File.dirname(__FILE__)}/..") if defined?(Compass)
+
+if defined?(ActionController)
+  require File.join(File.dirname(__FILE__), 'app', 'helpers', 'html5_boilerplate_helper')
+  ActionController::Base.helper(Html5BoilerplateHelper)
+end

data/stylesheets/_h5bp.scss

@@ -0,0 +1,12 @@
+// HTML5 ✰ Boilerplate
+//
+// What follows is the result of much research on cross-browser styling.
+// Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+// Kroc Camen, and the H5BP dev community and team.
+//
+// Detailed information about this CSS: h5bp.com/css
+
+@import "h5bp/normalize";
+@import "h5bp/chromeframe";
+@import "h5bp/helpers";
+@import "h5bp/media";

data/stylesheets/h5bp/_chromeframe.scss

@@ -0,0 +1,7 @@
+//
+// Chrome Frame Prompt
+//
+
+@mixin h5bp-chromeframe {
+  .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
+}

data/stylesheets/h5bp/_helpers.scss

@@ -0,0 +1,58 @@
+//
+// Non-semantic helper classes
+//
+
+@mixin h5bp-helpers {
+
+  .ir { @include image-replacement; }
+
+  .hidden { @include hidden; }
+
+  .visuallyhidden { @include visually-hidden; }
+  
+  .invisible { @include invisible; }
+
+  .clearfix { @include micro-clearfix; }
+
+}
+
+// For image replacement
+@mixin image-replacement($img: none, $x: 50%, $y: 50%) {
+  display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0;
+  @if $img != none {
+    background-image: image-url($img);
+    background-position: $x $y;
+  }
+  br { display: none; }
+}
+
+// Uses image dimensions
+@mixin sized-image-replacement($img, $x: 50%, $y: 50%) {
+  @include image-replacement($img, $x, $y);
+  width: image-width($img);
+  height: image-height($img);
+}
+
+// Hide from both screenreaders and browsers: h5bp.com/u
+@mixin hidden {
+  display: none !important;
+  visibility: hidden;
+}
+
+// Hide only visually, but have it available for screenreaders: h5bp.com/v
+@mixin visually-hidden {
+  border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
+  &.focusable:active, &.focusable:focus {
+    clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;
+  }
+}
+
+// Hide visually and from screenreaders, but maintain layout
+@mixin invisible { visibility: hidden; }
+
+// Contain floats: h5bp.com/q
+@mixin micro-clearfix {
+  &:before, &:after { content: ""; display: table; }
+  &:after { clear: both; }
+  & { *zoom: 1; }
+}

data/stylesheets/h5bp/_media.scss

@@ -0,0 +1,23 @@
+// Print styles
+// Inlined to avoid required HTTP connection: h5bp.com/r
+
+@mixin h5bp-media {
+  @media print {
+    @include h5bp-media-print;
+  }
+}
+
+@mixin h5bp-media-print {
+  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } // Black prints faster: h5bp.com/s
+  a, a:visited { 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; } // h5bp.com/t
+  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; }
+}

data/stylesheets/h5bp/_normalize.scss

@@ -0,0 +1,213 @@
+//
+// Normalize
+//
+
+$line-height: 1.4 !default;
+$font-color: #222 !default;
+$font-family: sans-serif !default;
+$font-size: 1em !default;
+$link-color: #00e !default;
+$link-hover-color: #06e !default;
+$link-visited-color: #551a8b !default;
+$selected-font-color: #fff !default;
+$selected-background-color: #fe57a1 !default;
+$invalid-background-color: #f0dddd !default;
+
+
+@mixin h5bp-normalize {
+  @include h5bp-display;
+  @include h5bp-base;
+  @include h5bp-selection;
+  @include h5bp-links;
+  @include h5bp-typography;
+  @include h5bp-lists;
+  @include h5bp-embeds;
+  @include h5bp-figures;
+  @include h5bp-forms;
+  @include h5bp-tables;
+}
+
+
+// Html5 display definitions
+@mixin h5bp-display {
+
+  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+  audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+  audio:not([controls]) { display: none; }
+  [hidden] { display: none; }
+
+}
+
+
+// Base
+@mixin h5bp-base {
+
+  // 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+  // 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+
+  html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+  html, button, input, select, textarea { font-family: $font-family; color: $font-color; }
+
+  body { margin: 0; font-size: $font-size; line-height: $line-height; }
+
+}
+
+@mixin h5bp-selection {
+  
+  // Remove text-shadow in selection highlight: h5bp.com/i
+  // These selection declarations have to be separate
+  // Also: hot pink! (or customize the background color to match your design)
+
+  ::-moz-selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
+  ::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
+
+}
+
+
+// Links
+@mixin h5bp-links {
+
+  a { color: $link-color; }
+  a:visited { color: $link-visited-color; }
+  a:hover { color: $link-hover-color; }
+  a:focus { outline: thin dotted; }
+
+  // Improve readability when focused and hovered in all browsers: h5bp.com/h
+  a:hover, a:active { outline: 0; }
+
+}
+
+
+// Typography
+@mixin h5bp-typography {
+
+  abbr[title] { border-bottom: 1px dotted; }
+
+  b, strong { font-weight: bold; }
+
+  blockquote { margin: 1em 40px; }
+
+  dfn { font-style: italic; }
+
+  hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+  ins { background: #ff9; color: #000; text-decoration: none; }
+
+  mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+  // Redeclare monospace font family: h5bp.com/j
+  pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+
+  // Improve readability of pre-formatted text in all browsers
+  pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+  q { quotes: none; }
+  q:before, q:after { content: ""; content: none; }
+
+  small { font-size: 85%; }
+
+  // Position subscript and superscript content without affecting line-height: h5bp.com/k
+  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+  sup { top: -0.5em; }
+  sub { bottom: -0.25em; }
+
+}
+
+
+// Lists
+@mixin h5bp-lists {
+
+  ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+  dd { margin: 0 0 0 40px; }
+  nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+}
+
+
+// Embedded content
+@mixin h5bp-embeds {
+
+  // 1. Improve image quality when scaled in IE7: h5bp.com/d
+  // 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
+
+  img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+  // Correct overflow not hidden in IE9
+
+  svg:not(:root) { overflow: hidden; }
+
+}
+
+
+// Figures
+@mixin h5bp-figures {
+
+  figure { margin: 0; }
+
+}
+
+
+// Forms
+@mixin h5bp-forms {
+
+  form { margin: 0; }
+  fieldset { border: 0; margin: 0; padding: 0; }
+
+  // Indicate that 'label' will shift focus to the associated form element
+  label { cursor: pointer; }
+
+   // 1. Correct color not inheriting in IE6/7/8/9
+   // 2. Correct alignment displayed oddly in IE6/7
+
+  legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
+
+   // 1. Correct font-size not inheriting in all browsers
+   // 2. Remove margins in FF3/4 S5 Chrome
+   // 3. Define consistent vertical alignment display in all browsers
+
+  button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+   // 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+
+  button, input { line-height: normal; }
+
+   // 1. Display hand cursor for clickable form elements
+   // 2. Allow styling of clickable form elements in iOS
+   // 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
+
+  button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
+
+   // Re-set default cursor for disabled elements
+
+  button[disabled], input[disabled] { cursor: default; }
+
+   // Consistent box sizing and appearance
+
+  input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
+  input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
+
+   // Remove inner padding and border in FF3/4: h5bp.com/l
+
+  button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+
+   // 1. Remove default vertical scrollbar in IE6/7/8/9
+   // 2. Allow only vertical resizing
+
+  textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+  // Colors for form validity
+  input:valid, textarea:valid {  }
+  input:invalid, textarea:invalid { background-color: $invalid-background-color; }
+
+}
+
+
+// Tables
+@mixin h5bp-tables {
+
+  table { border-collapse: collapse; border-spacing: 0; }
+  td { vertical-align: top; }
+
+}

data/templates/project/_flashes.html.haml

@@ -0,0 +1,4 @@
+#flash
+  - flash.each do |key, value|
+    .message{ :class => key }
+      %p= value

data/templates/project/_footer.html.haml

@@ -0,0 +1,2 @@
+%small.copyright
+  Copyright © #{Date.today.year}

data/templates/project/_head.html.haml

@@ -0,0 +1,29 @@
+%meta{ :charset => "utf-8" }/
+
+-#
+  Use the .htaccess and remove these lines to avoid edge case issues.
+  More info: h5bp.com/b/378
+%meta{ "http-equiv" => "X-UA-Compatible", :content => "IE=edge,chrome=1" }/
+
+%title
+  == #{ controller.controller_name.titleize } - #{ controller.action_name.titleize }
+  
+%meta{ :name => "description", :content => "" }/
+%meta{ :name => "author", :content => "" }/
+
+-# Mobile viewport optimized: j.mp/bplateviewport
+%meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0" }/
+
+-# Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons
+
+-# Pass in a stylesheet_partial to render inside your head
+- if local_assigns[:stylesheet_partial]
+  = render :partial => local_assigns[:stylesheet_partial]
+
+-# 
+  All JavaScript at the bottom, except for Modernizr / Respond.
+  Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
+  For optimal performance, use a custom Modernizr build: www.modernizr.com/download/
+= javascript_include_tag 'modernizr.min'
+
+= csrf_meta_tag

data/templates/project/_header.html.haml

@@ -0,0 +1 @@
+%h1 Header

data/templates/project/_javascripts.html.haml

@@ -0,0 +1,37 @@
+-# Grab Google CDN's jQuery, with a protocol relative URL
+-# Looks for google_api_key first in ENV['GOOGLE_API_KEY'] then in config/google.yml
+-# remote_jquery and local_jquery helpers use minified jquery unless Rails.env is development
+- if !google_api_key.blank?
+  = javascript_include_tag "//www.google.com/jsapi?key=#{google_api_key}"
+  %script
+    google.load(#{ remote_jquery("1.7.2") });
+- else
+  = javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/#{ local_jquery("1.7.2") }"
+
+-# fall back to local jQuery if necessary
+%script
+  window.jQuery || document.write("<script src='/javascripts/jquery.min.js'>\x3C/script>")
+
+= javascript_include_tag 'rails', 'plugins', 'application'
+
+-#  Append your own using content_for :javascripts
+= yield :javascripts
+
+-# asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
+-# Looks for google_account_id first in ENV['GOOGLE_ACCOUNT_ID'] then in config/google.yml
+- if !google_account_id.blank?
+  %script
+    var _gaq=[["_setAccount","#{google_account_id}"],["_trackPageview"],["_trackPageLoadTime"]];
+    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
+    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
+    s.parentNode.insertBefore(g,s)}(document,"script"));
+
+-#
+  Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
+  chromium.org/developers/how-tos/chrome-frame-getting-started
+
+<!--[if lt IE 7]>
+%script{ :src => "//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js" }
+%script
+  window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})
+<![endif]-->

data/templates/project/_stylesheets.html.haml

@@ -0,0 +1,5 @@
+-# CSS: implied media="all"
+= stylesheet_link_tag 'style'
+
+-# Append your own using content_for :stylesheets
+= yield :stylesheets

data/templates/project/application.html.haml

@@ -0,0 +1,22 @@
+!!! 5
+-# http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
+-ie_html :class => 'no-js oldie', :lang => 'en' do
+  %head
+    -# To render a different stylesheet partial inside the head (i.e. for admin layout)
+    -# just copy _stylesheets.html.haml, and point to that partial instead.
+    = render "layouts/head", :stylesheet_partial => "layouts/stylesheets"
+  
+  %body{ :class => "#{controller.controller_name}" }
+    #container
+      %header#header
+        = render "layouts/header"
+        
+      #main{ :role => 'main' }
+        = render "layouts/flashes"
+        = yield
+        
+      %footer#footer
+        = render "layouts/footer"
+        
+    -# Javascript at the bottom for fast page loading
+    = render "layouts/javascripts"

data/templates/project/files/404.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Page Not Found :(</title> 
+  <style>
+	  body { text-align: center;}
+	  h1 { font-size: 50px; text-align: center }
+	  span[frown] { transform: rotate(90deg); display:inline-block; color: #bbb; }
+	  body { font: 20px Constantia, 'Hoefler Text',  "Adobe Caslon Pro", Baskerville, Georgia, Times, serif; color: #999; text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); }
+	  ::-moz-selection{ background:#FF5E99; color:#fff; }
+	  ::selection { background:#FF5E99; color:#fff; } 
+	  article {display:block; text-align: left; width: 500px; margin: 0 auto; }
+	  
+	  a { color: rgb(36, 109, 56); text-decoration:none; }
+	  a:hover { color: rgb(96, 73, 141) ; text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
+  </style>
+</head>
+<body>
+     <article>
+	  <h1>Not found <span frown>:(</span></h1>
+	   <div>
+	       <p>Sorry, but the page you were trying to view does not exist.</p>
+	       <p>It looks like this was the result of either:</p>
+	       <ul>
+		   <li>a mistyped address</li>
+		   <li>an out-of-date link</li>
+	       </ul>
+	   </div>
+	    
+	    <script>
+	    var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),
+		GOOG_FIXURL_SITE = location.host;
+	    </script>
+	    <script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
+     </article>
+</body>
+</html>

data/templates/project/files/crossdomain.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
+<cross-domain-policy>
+  
+  
+<!-- Read this: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->
+
+<!-- Most restrictive policy: -->
+	<site-control permitted-cross-domain-policies="none"/>
+	
+	
+	
+<!-- Least restrictive policy: -->
+<!--
+	<site-control permitted-cross-domain-policies="all"/>
+	<allow-access-from domain="*" to-ports="*" secure="false"/>
+	<allow-http-request-headers-from domain="*" headers="*" secure="false"/>
+-->
+<!--
+  If you host a crossdomain.xml file with allow-access-from domain="*" 	 	
+  and don’t understand all of the points described here, you probably 	 	
+  have a nasty security vulnerability. ~ simon willison
+-->
+
+</cross-domain-policy>

data/templates/project/files/google.yml

@@ -0,0 +1,22 @@
+# Html5BoilerplateHelper will first check your ENV and
+# then this yml file for these values. If they are both
+# empty, the google code block will not be used.
+#
+# e.g. ENV['GOOGLE_ACCOUNT_ID'] || yml[:google_account_id]
+# e.g. ENV['GOOGLE_API_KEY'] || yml[:google_api_key]
+#
+defaults: &defaults
+  :google_account_id: ''
+  :google_api_key: ''
+
+:development:
+  <<: *defaults
+
+:test:
+  <<: *defaults
+
+:staging:
+  <<: *defaults
+
+:production:
+  <<: *defaults

data/templates/project/files/humans.txt

@@ -0,0 +1,43 @@
+/* the humans responsible & colophon */
+/* humanstxt.org */
+
+
+/* TEAM */
+  <your title>: <your name>
+  Site: 
+  Twitter: 
+  Location: 
+
+/* THANKS */
+  Names (& URL): 
+
+/* SITE */
+  Standards: HTML5, CSS3
+  Components: Modernizr, jQuery
+  Software:
+  
+
+                                    
+                               -o/-                       
+                               +oo//-                     
+                              :ooo+//:                    
+                             -ooooo///-                   
+                             /oooooo//:                   
+                            :ooooooo+//-                  
+                           -+oooooooo///-                 
+           -://////////////+oooooooooo++////////////::    
+            :+ooooooooooooooooooooooooooooooooooooo+:::-  
+              -/+ooooooooooooooooooooooooooooooo+/::////:-
+                -:+oooooooooooooooooooooooooooo/::///////:-
+                  --/+ooooooooooooooooooooo+::://////:-   
+                     -:+ooooooooooooooooo+:://////:--     
+                       /ooooooooooooooooo+//////:-        
+                      -ooooooooooooooooooo////-           
+                      /ooooooooo+oooooooooo//:            
+                     :ooooooo+/::/+oooooooo+//-           
+                    -oooooo/::///////+oooooo///-          
+                    /ooo+::://////:---:/+oooo//:          
+                   -o+/::///////:-      -:/+o+//-         
+                   :-:///////:-            -:/://         
+                     -////:-                 --//:        
+                       --                       -: