Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

update scss to 3.0 and add test

  • Loading branch information...
commit 6b99ff013be3bf932140332d2a21ba2f7576ec0a 1 parent fd7eeb5
@jingoro jingoro authored
View
3  .gitignore
@@ -2,4 +2,5 @@
.bundle
Gemfile.lock
pkg/*
-.rvmrc
+.rvmrc
+test/project/css/*.css
View
6 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.
@@ -52,6 +52,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;
View
8 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
View
1  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";
View
7 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; }
+}
View
4 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; }
}
View
23 stylesheets/h5bp/_normalize.scss
@@ -8,7 +8,7 @@ $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 +41,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: sans-serif; color: $font-color; }
- body, button, input, select, textarea { font-family: sans-serif; color: $font-color; }
+ body { margin: 0; font-size: 1em; line-height: $line-height; }
}
@@ -128,7 +127,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 +158,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 +176,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
View
42 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
View
0  test/project/css/.gitkeep
No changes.
View
295 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; }
+}
View
13 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;
Please sign in to comment.
Something went wrong with that request. Please try again.