compass-h5bp 0.0.2 → 0.0.5

data/.gitignore

@@ -2,4 +2,5 @@
 .bundle
 Gemfile.lock
 pkg/*
-.rvmrc
+.rvmrc
+test/project/css/*.css

data/README.md

@@ -1,7 +1,7 @@
 Compass H5bp
 =========================
 
-This is a Compass extension of Html5 mixins extracted from v2 on Html5 Boilerplate
+This is a Compass extension of Html5 mixins extracted from v3 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.
@@ -37,6 +37,7 @@ 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-selection;
     @include h5bp-base;
     @include h5bp-links;
     @include h5bp-typography;
@@ -52,6 +53,10 @@ Then (optionally) let H5bp define some semantic helper classes. (e.g. `.clearfix
 
     @include h5bp-helpers;
 
+You can include the default Html5 Boilerplate Chrome Frame notification styling:
+
+    @include h5bp-chromeframe;
+
 Finally, you can include H5bp's predefined print style media query:
 
     @include h5bp-media;

data/Rakefile

@@ -1 +1,9 @@
 require 'bundler/gem_tasks'
+require 'rake/testtask'
+
+Rake::TestTask.new :test do |t|
+  t.libs << 'lib'
+  t.test_files = FileList['test/**/*_test.rb']
+end
+
+task :default => :test

data/lib/compass/h5bp/version.rb

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

data/stylesheets/_h5bp.scss

@@ -7,5 +7,6 @@
 // Detailed information about this CSS: h5bp.com/css
 
 @import "h5bp/normalize";
+@import "h5bp/chromeframe";
 @import "h5bp/helpers";
-@import "h5bp/media";
+@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

@@ -9,6 +9,8 @@
   .hidden { @include hidden; }
 
   .visuallyhidden { @include visually-hidden; }
+  
+  .invisible { @include invisible; }
 
   .clearfix { @include micro-clearfix; }
 
@@ -52,5 +54,5 @@
 @mixin micro-clearfix {
   &:before, &:after { content: ""; display: table; }
   &:after { clear: both; }
-  *zoom: 1;
+  & { *zoom: 1; }
 }

data/stylesheets/h5bp/_normalize.scss

@@ -4,11 +4,13 @@
 
 $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: #ff5e99 !default;
+$selected-background-color: #fe57a1 !default;
 $invalid-background-color: #f0dddd !default;
 
 
@@ -41,14 +43,13 @@ $invalid-background-color: #f0dddd !default;
 @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
+  // 2. 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%; }
+  html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 
-  body { margin: 0; font-size: 1em; line-height: $line-height; }
+  html, button, input, select, textarea { font-family: $font-family; color: $font-color; }
 
-  body, button, input, select, textarea { font-family: sans-serif; color: $font-color; }
+  body { margin: 0; font-size: $font-size; line-height: $line-height; }
 
 }
 
@@ -128,7 +129,7 @@ $invalid-background-color: #f0dddd !default;
 @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
+  // 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; }
 
@@ -159,7 +160,7 @@ $invalid-background-color: #f0dddd !default;
    // 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; }
+  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
@@ -177,11 +178,15 @@ $invalid-background-color: #f0dddd !default;
 
   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; }
+  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 { -webkit-appearance: none; }
+  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
 

data/test/compass_h5bp_test.rb

@@ -0,0 +1,42 @@
+require 'test/unit'
+require 'compass'
+require 'compass-h5bp'
+require 'sass/plugin'
+require 'fileutils'
+
+PROJECT_DIR = File.join(File.dirname(__FILE__), 'project')
+ORIGINAL_OUTPUT_PATH = File.join(PROJECT_DIR, 'css', 'original.css')
+TEST_OUTPUT_PATH = File.join(PROJECT_DIR, 'css', 'test.css')
+
+class CompassH5bpTest < Test::Unit::TestCase
+  
+  def test_compass_version_matches_original
+    FileUtils.rm_f ORIGINAL_OUTPUT_PATH
+    FileUtils.rm_f TEST_OUTPUT_PATH
+    Compass.reset_configuration!
+    Compass.configuration do |config|
+      config.environment = :production
+      config.project_path = PROJECT_DIR
+      config.sass_dir = 'sass'
+      config.css_dir = 'css'
+      config.cache = false
+      config.output_style = :compact
+      config.line_comments = false
+    end
+    args = Compass.configuration.to_compiler_arguments(:logger => Compass::NullLogger.new)
+    compiler = Compass::Compiler.new *args
+    compiler.run
+    original_css = read_and_normalize(ORIGINAL_OUTPUT_PATH)
+    test_css = read_and_normalize(TEST_OUTPUT_PATH)
+    assert_equal original_css, test_css
+  end
+  
+  def read_and_normalize(file)
+    File.open(file).read.
+      gsub(/\/\*.+?\*\/\n/m, '').
+      gsub(/\n+/, "\n").
+      gsub(/\n +/, "\n").
+      gsub(/color: white;/, 'color: #ffffff;').
+      gsub(/#(.)(.)(.)\b/, '#\1\1\2\2\3\3')
+  end
+end

data/test/project/sass/original.scss

@@ -0,0 +1,295 @@
+/*
+ * 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
+ *
+ * ==|== normalize ==========================================================
+ */
+
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+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
+   ========================================================================== */
+
+/*
+ * 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: sans-serif; color: #222; }
+
+body { margin: 0; font-size: 1em; line-height: 1.4; }
+
+/*
+ * 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: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+
+/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+a:hover, a:active { outline: 0; }
+
+
+/* =============================================================================
+   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
+   ========================================================================== */
+
+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
+   ========================================================================== */
+
+/*
+ * 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
+   ========================================================================== */
+
+figure { margin: 0; }
+
+
+/* =============================================================================
+   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: #f0dddd; }
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+
+/* =============================================================================
+   Chrome Frame Prompt
+   ========================================================================== */
+
+.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
+
+
+/* ==|== primary styles =====================================================
+   Author:
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==|== media queries ======================================================
+   EXAMPLE Media Query for Responsive Design.
+   This example overrides the primary ('mobile first') styles
+   Modify as content requires.
+   ========================================================================== */
+
+@media only screen and (min-width: 35em) {
+  /* Style adjustments for viewports that meet the condition */
+  /* HACK needed to make Sass compile correctly */
+  body { margin: 0; }
+}
+
+
+
+/* ==|== non-semantic helper classes ========================================
+   Please define your styles before this section.
+   ========================================================================== */
+
+/* For image replacement */
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
+.ir br { display: none; }
+
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden { display: none !important; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.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: h5bp.com/p */
+.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: h5bp.com/q */
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+
+
+
+/* ==|== print styles =======================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+@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/test/project/sass/test.scss

@@ -0,0 +1,13 @@
+@import "h5bp";
+
+@include h5bp-normalize;
+@include h5bp-chromeframe;
+
+@media only screen and (min-width: 35em) {
+  /* Style adjustments for viewports that meet the condition */
+  /* HACK needed to make Sass compile correctly */
+  body { margin: 0; }
+}
+
+@include h5bp-helpers;
+@include h5bp-media;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-h5bp
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.5
   prerelease: 
 platform: ruby
 authors:
@@ -9,12 +9,12 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-01-11 00:00:00.000000000 -08:00
+date: 2012-02-26 00:00:00.000000000 -08:00
 default_executable: 
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &2152723460 !ruby/object:Gem::Requirement
+  requirement: &2168545700 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -22,7 +22,7 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *2152723460
+  version_requirements: *2168545700
 description: ! ' Compass extension of Html5 mixins extracted from v2 of Paul Irish''s
   Html5 Boilerplate project '
 email:
@@ -41,9 +41,14 @@ files:
 - lib/compass/h5bp.rb
 - lib/compass/h5bp/version.rb
 - stylesheets/_h5bp.scss
+- stylesheets/h5bp/_chromeframe.scss
 - stylesheets/h5bp/_helpers.scss
 - stylesheets/h5bp/_media.scss
 - stylesheets/h5bp/_normalize.scss
+- test/compass_h5bp_test.rb
+- test/project/css/.gitkeep
+- test/project/sass/original.scss
+- test/project/sass/test.scss
 has_rdoc: true
 homepage: http://rubygems.org/gems/compass-h5bp
 licenses: []
@@ -69,4 +74,8 @@ rubygems_version: 1.6.2
 signing_key: 
 specification_version: 3
 summary: Compass extension for Html5 Boilerplate v2.0
-test_files: []
+test_files:
+- test/compass_h5bp_test.rb
+- test/project/css/.gitkeep
+- test/project/sass/original.scss
+- test/project/sass/test.scss