pax_global_header00006660000000000000000000000064122335462400014513gustar00rootroot0000000000000052 comment=e98b5e688ecc95c3aecf479f4a773665f593c51f compass-h5bp-0.1.2/000077500000000000000000000000001223354624000140145ustar00rootroot00000000000000compass-h5bp-0.1.2/.gitignore000066400000000000000000000001151223354624000160010ustar00rootroot00000000000000*.gem .bundle Gemfile.lock pkg/* .rvmrc test/project/css/*.css vendor/bundle compass-h5bp-0.1.2/Gemfile000066400000000000000000000000461223354624000153070ustar00rootroot00000000000000source "http://rubygems.org" gemspec compass-h5bp-0.1.2/LICENSE000066400000000000000000000020411223354624000150160ustar00rootroot00000000000000Copyright (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. compass-h5bp-0.1.2/README.md000066400000000000000000000045501223354624000152770ustar00rootroot00000000000000Compass H5bp ============ This is a Compass extension of HTML5 mixins extracted from v4 of [HTML5 Boilerplate](http://html5boilerplate.com). 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 ============ Two options: --- 1) A raw install using gem: gem install compass-h5bp --- 2) Or, if using [Bundler](http://gembundler.com/). Place the following line in your Gemfile: gem 'compass-h5bp' Then run: $ bundle install Usage ===== First, you must add the plugin to your `config.rb` (your Compass configuration file). This can be done be placing an import line at the top of the file and is required to add the compass plugin to the sass load paths: require 'compass-h5bp' Then, inside your SCSS (or Sass) file, you must 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](http://necolas.github.com/normalize.css) of HTML5 Boilerplate's styles. You can include all of Normalize at once: @include h5bp-normalize; Or pull in only the portions of Normalize you want: @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; Next you can include the opinionated default base styles: @include h5bp-base-styles; You can include the default Html5 Boilerplate Chrome Frame notification styling: @include h5bp-chromeframe; 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](http://html5boilerplate.com), created by by Paul Irish and Divya Manian. Copyright (c) 2012 Peter Gumeson. See [LICENSE](https://github.com/sporkd/compass-h5bp/blob/master/LICENSE) for full license. compass-h5bp-0.1.2/Rakefile000066400000000000000000000002621223354624000154610ustar00rootroot00000000000000require '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 compass-h5bp-0.1.2/compass-h5bp.gemspec000066400000000000000000000015541223354624000176670ustar00rootroot00000000000000# -*- 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 v4.1 } s.description = %q{ Compass extension of Html5 mixins extracted from v4 of the Html5 Boilerplate project (h5bp.com) } 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 compass-h5bp-0.1.2/lib/000077500000000000000000000000001223354624000145625ustar00rootroot00000000000000compass-h5bp-0.1.2/lib/compass-h5bp.rb000066400000000000000000000000271223354624000174070ustar00rootroot00000000000000require "compass/h5bp" compass-h5bp-0.1.2/lib/compass/000077500000000000000000000000001223354624000162275ustar00rootroot00000000000000compass-h5bp-0.1.2/lib/compass/h5bp.rb000066400000000000000000000002441223354624000174120ustar00rootroot00000000000000require "compass/h5bp/version" module Compass module H5bp Compass::Frameworks.register("compass-h5bp", :path => "#{File.dirname(__FILE__)}/../..") end end compass-h5bp-0.1.2/lib/compass/h5bp/000077500000000000000000000000001223354624000170655ustar00rootroot00000000000000compass-h5bp-0.1.2/lib/compass/h5bp/version.rb000066400000000000000000000001451223354624000210770ustar00rootroot00000000000000module Compass module H5bp VERSION = "0.1.2" HTML5_BOILERPLATE_VERSION = "4.1.0" end end compass-h5bp-0.1.2/stylesheets/000077500000000000000000000000001223354624000163705ustar00rootroot00000000000000compass-h5bp-0.1.2/stylesheets/_h5bp.scss000066400000000000000000000004751223354624000202700ustar00rootroot00000000000000// 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. @import "h5bp/normalize"; @import "h5bp/main"; @import "h5bp/helpers"; @import "h5bp/media"; compass-h5bp-0.1.2/stylesheets/h5bp/000077500000000000000000000000001223354624000172265ustar00rootroot00000000000000compass-h5bp-0.1.2/stylesheets/h5bp/_chromeframe.scss000066400000000000000000000001701223354624000225500ustar00rootroot00000000000000// Deprecation warning @warn "The chromeframe mixin has moved to _main.scss file starting with Boilerplate version 4.0";compass-h5bp-0.1.2/stylesheets/h5bp/_helpers.scss000066400000000000000000000043371223354624000217330ustar00rootroot00000000000000// // Helper classes // @mixin h5bp-helpers { .ir { @include image-replacement; } .hidden { @include hidden; } .visuallyhidden { @include visually-hidden; } .invisible { @include invisible; } .clearfix { @include micro-clearfix; } } // Image replacement @mixin image-replacement($img: none, $x: 50%, $y: 50%) { background-color: transparent; border: 0; overflow: hidden; // IE 6/7 fallback *text-indent: -9999px; &:before { content: ""; display: block; width: 0; height: 150%; } @if $img != none { background-image: image-url($img); background-position: $x $y; } } // 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; // Extends the .visuallyhidden class to allow the element to be focusable // when navigated to via the keyboard: h5bp.com/p &.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; } // Clearfix: contain floats // // For modern browsers // 1. The space content is one way to avoid an Opera bug when the // `contenteditable` attribute is included anywhere else in the document. // Otherwise it causes space to appear at the top and bottom of elements // that receive the `clearfix` class. // 2. The use of `table` rather than `block` is only necessary if using // `:before` to contain the top-margins of child elements. @mixin micro-clearfix { &:before, &:after { content: " "; // 1 display: table; // 2 } &:after { clear: both; } // For IE 6/7 only // Include this rule to trigger hasLayout and contain floats. & { *zoom: 1; } }compass-h5bp-0.1.2/stylesheets/h5bp/_main.scss000066400000000000000000000030201223354624000212010ustar00rootroot00000000000000$line-height: 1.4 !default; $font-color: #222 !default; $font-family: sans-serif !default; $font-size: 1em !default; $selected-font-color: #fff !default; $selected-background-color: #b3d4fc !default; @mixin h5bp-main { @include h5bp-base-styles; @include h5bp-chromeframe; } // // Base styles: opinionated defaults // @mixin h5bp-base-styles { html, button, input, select, textarea { color: $font-color; } body { font-size: $font-size; line-height: $line-height; } // Remove text-shadow in selection highlight: h5bp.com/i // These selection rule sets have to be separate. // Customize the background color to match your design. ::-moz-selection { background: $selected-background-color; text-shadow: none; } ::selection { background: $selected-background-color; text-shadow: none; } // A better looking default horizontal rule hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } // Remove the gap between images and the bottom of their containers: h5bp.com/i/440 img { vertical-align: middle; } // Remove default fieldset styles. fieldset { border: 0; margin: 0; padding: 0; } // Allow only vertical resizing of textareas. textarea { resize: vertical; } } // // Chrome Frame Prompt // @mixin h5bp-chromeframe { .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } } compass-h5bp-0.1.2/stylesheets/h5bp/_media.scss000066400000000000000000000022741223354624000213460ustar00rootroot00000000000000// 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: #000 !important; // Black prints faster: h5bp.com/s box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } // // Don't show links for images, or javascript/internal links // .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 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; } } compass-h5bp-0.1.2/stylesheets/h5bp/_normalize.scss000066400000000000000000000222751223354624000222720ustar00rootroot00000000000000// // Normalize v1.1.1 | MIT License | git.io/normalize // @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 { // Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } // Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } // Prevent modern browsers from displaying `audio` without controls. // Remove excess height in iOS 5 devices. audio:not([controls]) { display: none; height: 0; } // Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. // Known issue: no IE 6 support. [hidden] { display: none; } } // Base @mixin h5bp-base { // 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using // `em` units. // 2. Prevent iOS text size adjust after orientation change, without disabling // user zoom. // 1. Prevent system color scheme's background color being used in Firefox, IE, // and Opera. // 2. Prevent system color scheme's text color being used in Firefox, IE, and // Opera. // 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using // `em` units. // 4. Prevent iOS text size adjust after orientation change, without disabling // user zoom. html { background: #fff; // 1 color: #000; // 2 font-size: 100%; // 3 -webkit-text-size-adjust: 100%; // 4 -ms-text-size-adjust: 100%; // 4 } // Address `font-family` inconsistency between `textarea` and other form // elements. html, button, input, select, textarea { font-family: sans-serif; } // Address margins handled incorrectly in IE 6/7. body { margin: 0; } } // Deprecation @mixin h5bp-selection { @warn "The selection mixin has been removed. The selection code is in the h5bp-base-styles mixin starting with Boilerplate version 4.0."; } // Links @mixin h5bp-links { // Address `outline` inconsistency between Chrome and other browsers. a:focus { outline: thin dotted; } // Improve readability when focused and also mouse hovered in all browsers. a:active, a:hover { outline: 0; } } // Typography @mixin h5bp-typography { // Address font sizes and margins set differently in IE 6/7. // Address font sizes within `section` and `article` in Firefox 4+, Safari 5, // and Chrome. h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.67em; margin: 2.33em 0; } // Address styling not present in IE 7/8/9, Safari 5, and Chrome. abbr[title] { border-bottom: 1px dotted; } // Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } // Address styling not present in Safari 5 and Chrome. dfn { font-style: italic; } // Address differences between Firefox and other browsers. // Known issue: no IE 6/7 normalization. hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } // Address styling not present in IE 6/7/8/9. mark { background: #ff0; color: #000; } // Address margins set differently in IE 6/7. p, pre { margin: 1em 0; } // Correct font family set oddly in IE 6, Safari 4/5, and Chrome. code, kbd, pre, 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; } // Address CSS quotes not supported in IE 6/7. q { quotes: none; } // Address `quotes` property not supported in Safari 4. q:before, q:after { content: ''; content: none; } // Address inconsistent and variable font size in all browsers. small { font-size: 80%; } // Prevent `sub` and `sup` affecting `line-height` in all browsers. 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 { // Address margins set differently in IE 6/7. dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } // Address paddings set differently in IE 6/7. menu, ol, ul { padding: 0 0 0 40px; } // Correct list images handled incorrectly in IE 7. nav ul, nav ol { list-style: none; list-style-image: none; } } // Embedded content @mixin h5bp-embeds { // 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. // 2. Improve image quality when scaled in IE 7. img { border: 0; // 1 -ms-interpolation-mode: bicubic; // 2 } // Correct overflow displayed oddly in IE 9. svg:not(:root) { overflow: hidden; } } // Figures @mixin h5bp-figures { // Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. figure { margin: 0; } } // Forms @mixin h5bp-forms { // Correct margin displayed oddly in IE 6/7. form { margin: 0; } // Define consistent border, margin, and padding. fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } // 1. Correct color not being inherited in IE 6/7/8/9. // 2. Correct text not wrapping in Firefox 3. // 3. Correct alignment displayed oddly in IE 6/7. legend { border: 0; // 1 padding: 0; white-space: normal; // 2 *margin-left: -7px; // 3 } // 1. Correct font size not being inherited in all browsers. // 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, // and Chrome. // 3. Improve appearance and consistency in all browsers. button, input, select, textarea { font-size: 100%; // 1 margin: 0; // 2 vertical-align: baseline; // 3 *vertical-align: middle; // 3 } // Address Firefox 3+ setting `line-height` on `input` using `!important` in // the UA stylesheet. button, input { line-height: normal; } // Address inconsistent `text-transform` inheritance for `button` and `select`. // All other form control elements do not inherit `text-transform` values. // Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. // Correct `select` style inheritance in Firefox 4+ and Opera. button, select { text-transform: none; } // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` // and `video` controls. // 2. Correct inability to style clickable `input` types in iOS. // 3. Improve usability and consistency of cursor style between image-type // `input` and others. // 4. Remove inner spacing in IE 7 without affecting normal text inputs. // Known issue: inner spacing remains in IE 6. button, html input[type="button"], // 1 input[type="reset"], input[type="submit"] { -webkit-appearance: button; // 2 cursor: pointer; // 3 *overflow: visible; // 4 } // Re-set default cursor for disabled elements. button[disabled], html input[disabled] { cursor: default; } // 1. Address box sizing set to content-box in IE 8/9. // 2. Remove excess padding in IE 8/9. // 3. Remove excess padding in IE 7. // Known issue: excess padding remains in IE 6. input[type="checkbox"], input[type="radio"] { box-sizing: border-box; // 1 padding: 0; // 2 *height: 13px; // 3 *width: 13px; // 3 } // 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. // 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome // (include `-moz` to future-proof). input[type="search"] { -webkit-appearance: textfield; // 1 -moz-box-sizing: content-box; -webkit-box-sizing: content-box; // 2 box-sizing: content-box; } // Remove inner padding and search cancel button in Safari 5 and Chrome // on OS X. input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } // Remove inner padding and border in Firefox 3+. button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } // 1. Remove default vertical scrollbar in IE 6/7/8/9. // 2. Improve readability and alignment in all browsers. textarea { overflow: auto; // 1 vertical-align: top; // 2 } } // Tables @mixin h5bp-tables { // Remove most spacing between table cells. table { border-collapse: collapse; border-spacing: 0; } } compass-h5bp-0.1.2/test/000077500000000000000000000000001223354624000147735ustar00rootroot00000000000000compass-h5bp-0.1.2/test/compass_h5bp_test.rb000066400000000000000000000034241223354624000207450ustar00rootroot00000000000000require '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') ORIGINAL_NORMALIZE_OUTPUT_PATH = File.join(PROJECT_DIR, 'css', 'original_normalize.css') TEST_NORMALIZE_OUTPUT_PATH = File.join(PROJECT_DIR, 'css', 'test_normalize.css') class CompassH5bpTest < Test::Unit::TestCase def test_compass_version_matches_original FileUtils.rm_f ORIGINAL_OUTPUT_PATH FileUtils.rm_f TEST_OUTPUT_PATH FileUtils.rm_f ORIGINAL_NORMALIZE_OUTPUT_PATH FileUtils.rm_f TEST_NORMALIZE_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) original_normalize_css = read_and_normalize(ORIGINAL_NORMALIZE_OUTPUT_PATH) test_normalize_css = read_and_normalize(TEST_NORMALIZE_OUTPUT_PATH) assert_equal original_css, test_css assert_equal original_normalize_css, test_normalize_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 endcompass-h5bp-0.1.2/test/project/000077500000000000000000000000001223354624000164415ustar00rootroot00000000000000compass-h5bp-0.1.2/test/project/css/000077500000000000000000000000001223354624000172315ustar00rootroot00000000000000compass-h5bp-0.1.2/test/project/css/.gitkeep000066400000000000000000000000001223354624000206500ustar00rootroot00000000000000compass-h5bp-0.1.2/test/project/sass/000077500000000000000000000000001223354624000174125ustar00rootroot00000000000000compass-h5bp-0.1.2/test/project/sass/original.scss000066400000000000000000000132231223354624000221140ustar00rootroot00000000000000/* * 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. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html, button, input, select, textarea { color: #222; } body { font-size: 1em; line-height: 1.4; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */ img { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Chrome Frame prompt ========================================================================== */ .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; // IE 6/7 fallback *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } /* * 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; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; // 1 display: table; // 2 } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ body { margin: 0; } //HACK: scss class can't be empty } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ body { margin: 0; } //HACK: scss class can't be empty } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; // Black prints faster: h5bp.com/s box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 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; } } compass-h5bp-0.1.2/test/project/sass/original_normalize.scss000066400000000000000000000227741223354624000242070ustar00rootroot00000000000000/*! normalize.css v1.1.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. * Known issue: no IE 6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Prevent system color scheme's background color being used in Firefox, IE, * and Opera. * 2. Prevent system color scheme's text color being used in Firefox, IE, and * Opera. * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. * 4. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { background: #fff; // 1 color: #000; // 2 font-size: 100%; // 3 -webkit-text-size-adjust: 100%; // 4 -ms-text-size-adjust: 100%; // 4 } /** * Address `font-family` inconsistency between `textarea` and other form * elements. */ html, button, input, select, textarea { font-family: sans-serif; } /** * Address margins handled incorrectly in IE 6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address font sizes and margins set differently in IE 6/7. * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.67em; margin: 2.33em 0; } /** * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. * Known issue: no IE 6/7 normalization. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /** * Address margins set differently in IE 6/7. */ p, pre { margin: 1em 0; } /** * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, 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; } /** * Address CSS quotes not supported in IE 6/7. */ q { quotes: none; } /** * Address `quotes` property not supported in Safari 4. */ q:before, q:after { content: ''; content: none; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /** * Address margins set differently in IE 6/7. */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } /** * Address paddings set differently in IE 6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /** * Correct list images handled incorrectly in IE 7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /** * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improve image quality when scaled in IE 7. */ img { border: 0; // 1 -ms-interpolation-mode: bicubic; // 2 } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Correct margin displayed oddly in IE 6/7. */ form { margin: 0; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct color not being inherited in IE 6/7/8/9. * 2. Correct text not wrapping in Firefox 3. * 3. Correct alignment displayed oddly in IE 6/7. */ legend { border: 0; // 1 padding: 0; white-space: normal; // 2 *margin-left: -7px; // 3 } /** * 1. Correct font size not being inherited in all browsers. * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improve appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; // 1 margin: 0; // 2 vertical-align: baseline; // 3 *vertical-align: middle; // 3 } /** * Address Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. * 4. Remove inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], // 1 input[type="reset"], input[type="submit"] { -webkit-appearance: button; // 2 cursor: pointer; // 3 *overflow: visible; // 4 } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to content-box in IE 8/9. * 2. Remove excess padding in IE 8/9. * 3. Remove excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; // 1 padding: 0; // 2 *height: 13px; // 3 *width: 13px; // 3 } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; // 1 -moz-box-sizing: content-box; -webkit-box-sizing: content-box; // 2 box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 6/7/8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; // 1 vertical-align: top; // 2 } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } compass-h5bp-0.1.2/test/project/sass/test.scss000066400000000000000000000010231223354624000212620ustar00rootroot00000000000000@import "h5bp"; @include h5bp-main; @include h5bp-helpers; @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ body { margin: 0; } //HACK: scss class can't be empty } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ body { margin: 0; } //HACK: scss class can't be empty } @media print { @include h5bp-media-print; } compass-h5bp-0.1.2/test/project/sass/test_normalize.scss000066400000000000000000000000511223354624000233420ustar00rootroot00000000000000@import "h5bp"; @include h5bp-normalize;