compass-h5bp 0.0.1

data/.gitignore

@@ -0,0 +1,5 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*
+.rvmrc

data/Gemfile

@@ -0,0 +1,3 @@
+source "http://rubygems.org"
+
+gemspec

data/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2011 Peter Gumeson
+
+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.md

@@ -0,0 +1,67 @@
+Compass H5bp
+=========================
+
+This is a Compass extension of Html5 mixins extracted from v2 on Html5 Boilerplate
+by Paul Irish and Divya Manian. This gem provides only the CSS mixins and not the
+html or javascript templates.  This makes sense because any implementation of
+Html5 Boilerplate should be specific to the language and framework it's built on.
+
+Browse [html5boilerplate.com](http://html5boilerplate.com) for the full workup.
+
+Or, you can read more about compass extensions [here](http://compass-style.org/help/tutorials/extensions/).
+
+
+Installation
+=========================
+
+    gem install compass-h5bp
+
+Or, in your Gemfile
+
+    gem 'compass-h5bp'
+
+Then run
+
+    $ bundle install
+
+
+Usage
+=========================
+
+Inside your Scss (or Sass) file, you first need to import the `h5bp`
+compass library before you can use any of the mixins:
+
+    @import "h5bp";
+
+Then include the mixins that make up the Normalize portion of Html5
+Boilerplate's styles. http://necolas.github.com/normalize.css
+
+    @include h5bp-display;
+    @include h5bp-base;
+    @include h5bp-links;
+    @include h5bp-typography;
+    @include h5bp-lists;
+    @include h5bp-embeds;
+    @include h5bp-figures;
+    @include h5bp-forms;
+    @include h5bp-tables;
+
+Now you can define your own custom CSS here.
+
+Then (optionally) let H5bp define some semantic helper classes. (e.g. `.clearfix`):
+
+    @include h5bp-helpers;
+
+Finally, you can include H5bp's predefined print style media query:
+
+    @include h5bp-media;
+
+
+License
+========
+
+HTML5 Boilerplate created by by Paul Irish and Divya Manian
+http://html5boilerplate.com
+
+Copyright (c) 2011 Peter Gumeson
+See [LICENSE](https://github.com/sporkd/compass-h5bp/blob/master/LICENSE) for full license.

data/Rakefile

@@ -0,0 +1 @@
+require 'bundler/gem_tasks'

data/compass-h5bp.gemspec

@@ -0,0 +1,23 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "compass/h5bp/version"
+
+Gem::Specification.new do |s|
+  s.name        = "compass-h5bp"
+  s.version     = Compass::H5bp::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Peter Gumeson"]
+  s.email       = ["gumeson@gmail.com"]
+  s.homepage    = "http://rubygems.org/gems/compass-h5bp"
+  s.summary     = %q{ Compass extension for Html5 Boilerplate v2.0 }
+  s.description = %q{ Compass extension of Html5 mixins extracted from v2 of Paul Irish's Html5 Boilerplate project }
+
+  s.rubyforge_project = "compass-h5bp"
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+  s.add_dependency("compass")
+end

data/lib/compass-h5bp.rb

@@ -0,0 +1 @@
+require "compass/h5bp"

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/h5bp/version.rb

@@ -0,0 +1,6 @@
+module Compass
+  module H5bp
+    VERSION = "0.0.1"
+    HTML5_BOILERPLATE_VERSION = "2.0"
+  end
+end

data/stylesheets/_h5bp.scss

@@ -0,0 +1,11 @@
+// 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/helpers";
+@import "h5bp/media";

data/stylesheets/h5bp/_helpers.scss

@@ -0,0 +1,56 @@
+//
+// Non-semantic helper classes
+//
+
+@mixin h5bp-helpers {
+
+  .ir { @include image-replacement; }
+
+  .hidden { @include hidden; }
+
+  .visuallyhidden { @include visually-hidden; }
+
+  .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,25 @@
+// Print styles
+// Inlined to avoid required HTTP connection: h5bp.com/r
+
+@mixin h5bp-media {
+
+  @media print {
+    @include media-print;
+  }
+
+}
+
+@mixin 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,203 @@
+//
+// Normalize
+//
+
+$line-height: 1.4 !default;
+$font-color: #222 !default;
+$link-color: #00e !default;
+$link-hover-color: #06e !default;
+$link-visited-color: #551a8b !default;
+$selected-font-color: #fff !default;
+$selected-background-color: #ff5e99 !default;
+$invalid-background-color: #f0dddd !default;
+
+
+@mixin h5bp-normalize {
+  @include h5bp-display;
+  @include h5bp-base;
+  @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. Force vertical scrollbar in non-IE
+  // 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+
+  html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+  body { margin: 0; font-size: 1em; line-height: $line-height; }
+
+  body, button, input, select, textarea { font-family: sans-serif; color: $font-color; }
+
+  // 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/e
+
+  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; }
+
+   // 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; }
+
+   // Consistent box sizing and appearance
+
+  input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
+  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 { -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; }
+
+}

metadata

@@ -0,0 +1,72 @@
+--- !ruby/object:Gem::Specification
+name: compass-h5bp
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Peter Gumeson
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2011-11-20 00:00:00.000000000 -08:00
+default_executable: 
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: &2168804760 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: *2168804760
+description: ! ' Compass extension of Html5 mixins extracted from v2 of Paul Irish''s
+  Html5 Boilerplate project '
+email:
+- gumeson@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- compass-h5bp.gemspec
+- lib/compass-h5bp.rb
+- lib/compass/h5bp.rb
+- lib/compass/h5bp/version.rb
+- stylesheets/_h5bp.scss
+- stylesheets/h5bp/_helpers.scss
+- stylesheets/h5bp/_media.scss
+- stylesheets/h5bp/_normalize.scss
+has_rdoc: true
+homepage: http://rubygems.org/gems/compass-h5bp
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: compass-h5bp
+rubygems_version: 1.6.2
+signing_key: 
+specification_version: 3
+summary: Compass extension for Html5 Boilerplate v2.0
+test_files: []