Skip to content
Browse files

changing to use compass-h5bp gem instead.

  • Loading branch information...
1 parent 4cc8815 commit 8fa3d1fa4740e0ecb4685a1f22ab80a3fe453f25 @heygrady committed Dec 19, 2011
View
7 README.md
@@ -117,7 +117,7 @@ Use this if you're not using Rails, but still want compass and the html5-boilerp
It will create a simplified index.html (with haml source), but without the nice Rails helpers.
gem install html5-boilerplate
- compass create my_project -r html5-boilerplate -u html5-boilerplate --javascripts-dir js --css-dir css
+ compass create my_project -r compass-h5bp -r html5-boilerplate -u html5-boilerplate --javascripts-dir js --css-dir css
The `--javascripts-dir` and `--css-dir` flags are to keep consistent with the original project layout.
If you omit them, be sure to edit your javascript and style tags accordingly in index.html.
@@ -144,9 +144,10 @@ If you omit them, be sure to edit your javascript and style tags accordingly in
src/partials/_fonts.scss
src/partials/_media.scss
- js/jquery.min.js
- js/modernizr.min.js
+ js/jquery-1.6.2.min.js
+ js/modernizr-2.0.6.min.js
js/plugins.js
+ js/script.js
.htaccess
config.rb
View
25 html5-boilerplate.gemspec
@@ -1,24 +1,27 @@
# -*- encoding: utf-8 -*-
Gem::Specification.new do |s|
- s.version = "2.0.0"
- s.date = "2011-11-19"
+ s.name = "html5-boilerplate"
+ s.version = "2.0.0"
+ s.date = "2011-12-19"
- s.name = "html5-boilerplate"
- s.authors = ["Peter Gumeson", "Grady Kuhnline"]
- s.summary = %q{A Compass extension based on Paul Irish's HTML5 Boilerplate}
+ s.authors = ["Peter Gumeson", "Grady Kuhnline"]
+ s.email = ["gumeson@gmail.com"]
+ s.homepage = "http://github.com/sporkd/compass-html5-boilerplate"
+
+ s.summary = %q{A Compass extension based on Paul Irish's HTML5 Boilerplate}
s.description = %q{A Compass extension based on Paul Irish's HTML5 Boilerplate at http://html5boilerplate.com}
- s.email = "gumeson@gmail.com"
- s.homepage = "http://github.com/sporkd/compass-html5-boilerplate"
- s.files = %w(README.md LICENSE VERSION)
+
+ s.files = %w(README.md LICENSE VERSION)
s.files += %w(templates/project/files/htaccess)
s.files += Dir.glob("lib/**/*.*")
- s.files += Dir.glob("stylesheets/**/*.*")
+ #s.files += Dir.glob("stylesheets/**/*.*")
s.files += Dir.glob("templates/**/*.*")
s.has_rdoc = false
s.require_paths = ["lib"]
- s.rubygems_version = %q{1.7.2}
- s.add_dependency("compass", [">= 0.11.1"])
+
+ s.add_dependency("compass")
+ s.add_dependency("compass-h5bp")
end
View
25 stylesheets/_html5-boilerplate.scss
@@ -1,25 +0,0 @@
-//
-// 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
-
-@function in-list($list, $value) {
- @each $item in $list {
- @if $item == $value {
- @return true;
- }
- }
- @return false;
-};
-
-@import "html5-boilerplate/normalize";
-@import "html5-boilerplate/helpers";
-@import "html5-boilerplate/print";
-
-@mixin html5-boilerplate {
- @include html5-boilerplate-normalize;
-}
View
82 stylesheets/html5-boilerplate/_helpers.scss
@@ -1,82 +0,0 @@
-// ==|== non-semantic helper classes ========================================
-// Please define your styles before this section.
-// ==========================================================================
-
-@mixin html5-boilerplate-helpers($list: false) {
- @if not($list) or in-list($list, ir) { .ir { @include image-replacement; } }
- @if not($list) or in-list($list, hidden) { .hidden { @include hidden; } }
- @if not($list) or in-list($list, visuallyhidden) { .visuallyhidden { @include visuallyhidden; } }
- @if not($list) or in-list($list, invisible) { .invisible { @include invisible; } }
- @if not($list) or in-list($list, clearfix) { .clearfix { @include h5bp-clearfix; } }
-}
-
-//For image replacement
-@mixin image-replacement($img: none, $x: 50%, $y: 50%) {
- background-color: transparent;
- background-repeat: no-repeat;
- border: 0;
- direction: ltr;
- display: block;
- overflow: hidden;
- text-align: left;
- text-indent: -999em;
- br {
- display: none;
- }
-
- @if $img != none {
- background-image: image-url($img);
- background-position: $x $y;
- }
-}
-
-@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 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
- &.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 h5bp-clearfix {
- &:before, &:after {
- content: "";
- display: table;
- }
- &:after {
- clear: both;
- }
- zoom: 1;
-}
View
370 stylesheets/html5-boilerplate/_normalize.scss
@@ -1,370 +0,0 @@
-// ==|== normalize =======================================================
-@mixin html5-boilerplate-normalize($list: false) {
- @if not($list) or in-list($list, html5) { @include h5bp-normalize-html5; }
- @if not($list) or in-list($list, base) { @include h5bp-normalize-base; }
- @if not($list) or in-list($list, selection) { @include h5bp-normalize-selection; }
- @if not($list) or in-list($list, links) { @include h5bp-normalize-links; }
- @if not($list) or in-list($list, typography) { @include h5bp-normalize-typography; }
- @if not($list) or in-list($list, lists) { @include h5bp-normalize-lists; }
- @if not($list) or in-list($list, images) { @include h5bp-normalize-images; }
- @if not($list) or in-list($list, svg) { @include h5bp-normalize-svg; }
- @if not($list) or in-list($list, figures) { @include h5bp-normalize-figures; }
- @if not($list) or in-list($list, forms) { @include h5bp-normalize-forms; }
- @if not($list) or in-list($list, tables) { @include h5bp-normalize-tables; }
-}
-
-// =============================================================================
-// HTML5 display definitions
-// =============================================================================
-@mixin h5bp-normalize-html5 {
- 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
-// =============================================================================
-$base-font-family: unquote("sans-serif") !default;
-$base-font-size: 13px !default;
-$base-line-height: 1.231 !default;
-$font-color: #222 !default;
-@mixin h5bp-normalize-base($base-font-family: $base-font-family, $base-font-size: $base-font-size, $base-line-height: $base-line-height, $font-color: $font-color) {
- // 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: $base-font-size;
- line-height: $base-line-height;
- }
-
- body, button, input, select, textarea {
- font-family: $base-font-family;
- 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)
-$selected-background-color: #fe57a1 !default;
-$selected-font-color: #fff !default;
-@mixin h5bp-normalize-selection( $selected-background-color: $selected-background-color, $selected-font-color: $selected-font-color ) {
- ::-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
-// =============================================================================
-$link-color: #00e !default;
-$link-visited-color: #551a8b !default;
-$link-hover-color: #06e !default;
-@mixin h5bp-normalize-links( $link-color: $link-color, $link-visited-color: $link-visited-color, $link-hover-color: $link-hover-color ) {
- 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-normalize-typography($list: false) {
- @if not($list) or in-list($list, abbr) {
- abbr[title] {
- border-bottom: 1px dotted;
- }
- }
-
- @if not($list) or in-list($list, bold) {
- b, strong {
- font-weight: bold;
- }
- }
-
- @if not($list) or in-list($list, blockquote) {
- blockquote {
- margin: 1em 40px;
- }
- }
-
- @if not($list) or in-list($list, dfn) {
- dfn {
- font-style: italic;
- }
- }
- @if not($list) or in-list($list, hr) {
- hr {
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid #ccc;
- margin: 1em 0;
- padding: 0;
- }
- }
-
- @if not($list) or in-list($list, ins) {
- ins {
- background: #ff9;
- color: #000;
- text-decoration: none;
- }
- }
-
- @if not($list) or in-list($list, mark) {
- mark {
- background: #ff0;
- color: #000;
- font-style: italic;
- font-weight: bold;
- }
- }
-
- // Redeclare monospace font family: h5bp.com/j
- @if not($list) or in-list($list, monospace) {
- pre, code, kbd, samp {
- font-family: monospace, monospace;
- _font-family: 'courier new', monospace;
- font-size: 1em;
- }
- }
-
- // Improve readability of pre-formatted text in all browsers
- @if not($list) or in-list($list, pre) {
- pre {
- white-space: pre;
- white-space: pre-wrap;
- word-wrap: break-word;
- }
- }
-
- @if not($list) or in-list($list, quotes) {
- q {
- quotes: none;
- }
-
- q:before, q:after {
- content: "";
- content: none;
- }
- }
-
- @if not($list) or in-list($list, small) {
- small {
- font-size: 85%;
- }
- }
-
- // Position subscript and superscript content without affecting line-height: h5bp.com/k
- @if not($list) or in-list($list, subsup) {
- sub, sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
- }
-
- sup {
- top: -0.5em;
- }
-
- sub {
- bottom: -0.25em;
- }
- }
-}
-
-// =============================================================================
-// Lists
-// =============================================================================
-$list-left-margin: 40px !default;
-@mixin h5bp-normalize-lists {
- ul, ol {
- margin: 1em 0;
- padding: 0 0 0 $list-left-margin;
- }
-
- dd { margin: 0 0 0 $list-left-margin; }
-
- nav ul, nav ol {
- list-style: none;
- list-style-image: none;
- margin: 0;
- padding: 0;
- }
-}
-
-// =============================================================================
-// Embedded content
-// =============================================================================
-@mixin h5bp-normalize-images {
- // 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;
- }
-}
-
-@mixin h5bp-normalize-svg {
- // Correct overflow not hidden in IE9
-
- svg:not(:root) { overflow: hidden; }
-}
-
-// =============================================================================
-// Figures
-// =============================================================================
-@mixin h5bp-normalize-figures {
- figure { margin: 0; }
-}
-
-// =============================================================================
-// Forms
-// =============================================================================
-@mixin h5bp-normalize-forms($list: false) {
- 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)
- // 2. Correct inner spacing displayed oddly in IE6/7
-
- button, input {
- line-height: normal;
- *overflow: visible;
- }
-
- // Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
-
- table button, table input { *overflow: auto; }
-
- // 1. Display hand cursor for clickable form elements
- // 2. Allow styling of clickable form elements in iOS
-
- button, input[type="button"], input[type="reset"], input[type="submit"] {
- cursor: pointer;
- -webkit-appearance: button;
- }
-
- // Consistent box sizing and appearance
-
- input[type="checkbox"], input[type="radio"] {
- box-sizing: border-box;
- }
- 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: #f0dddd;
- }
-}
-
-// =============================================================================
-// Tables
-// =============================================================================
-@mixin h5bp-normalize-tables {
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- td {
- vertical-align: top;
- }
-}
View
29 stylesheets/html5-boilerplate/_print.scss
@@ -1,29 +0,0 @@
-// ==|== print styles =======================================================
-// Print styles.
-// Inlined to avoid required HTTP connection: h5bp.com/r
-// ========================================================================== */
-
-@mixin html5-boilerplate-print($media: true) {
- @if $media {
- @media print {
- @include h5bp-print;
- }
- } @else {
- @include h5bp-print;
- }
-}
-
-@mixin h5bp-print {
- * { background: transparent !important; color: black !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
23 templates/project/partials/_base.scss
@@ -1,15 +1,14 @@
// This file must be imported before loading html5-boilerplate
// base
-$base-font-family: unquote("sans-serif");
-$base-font-size: 13px;
-$base-line-height: 1.231;
-$font-color: #222;
-
-// Links
-$link-color: #00e;
-$link-visited-color: #551a8b;
-$link-hover-color: #06e;
-
-// Lists
-$list-left-margin: 40px;
+$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;
View
2 templates/project/partials/_media.scss
@@ -22,7 +22,7 @@
// ========================================================================== */
@media print {
- @include html5-boilerplate-print(false);
+ @include h5bp-media-print;
/* Style adjustments for print go here */
}
View
34 templates/project/partials/_overrides.scss
@@ -3,59 +3,45 @@
// =============================================================================
// HTML5 display definitions
// =============================================================================
-@include h5bp-normalize-html5;
+@include h5bp-display;
// =============================================================================
// Base
// =============================================================================
-@include h5bp-normalize-base( $base-font-family, $base-font-size, $base-line-height, $font-color );
-@include h5bp-normalize-selection( $selected-background-color, $selected-font-color );
+@include h5bp-base;
+@include h5bp-selection;
// =============================================================================
// Links
// =============================================================================
-@include h5bp-normalize-links( $link-color, $link-visited-color, $link-hover-color );
+@include h5bp-links;
// =============================================================================
// Typography
// =============================================================================
-@include h5bp-normalize-typography((
- abbr,
- bold,
- blockquote,
- dfn,
- hr,
- ins,
- mark,
- monospace,
- pre,
- quotes,
- small,
- subsup
-));
+@include h5bp-typography;
// =============================================================================
// Lists
// =============================================================================
-@include h5bp-normalize-lists;
+@include h5bp-lists;
// =============================================================================
// Embedded content
// =============================================================================
-@include h5bp-normalize-images;
-@include h5bp-normalize-svg;
+@include h5bp-embeds;
// =============================================================================
// Figures
// =============================================================================
-@include h5bp-normalize-figures;
+@include h5bp-figures;
// =============================================================================
// Forms
// =============================================================================
-@include h5bp-normalize-forms;
+@include h5bp-forms;
// =============================================================================
// Tables
// =============================================================================
-@include h5bp-normalize-tables;
+@include h5bp-tables;
View
29 templates/project/style.scss
@@ -2,28 +2,11 @@
@import "partials/base";
// Then we'll import the compass extension
-@import "html5-boilerplate";
+@import "h5bp";
// Now, you can simply include everything
// (except print and helpers) by uncommeting this line
-//@include html5-boilerplate;
-
-// Or, you can pick and choose only the sections
-// you want by using the this include
-@include html5-boilerplate-normalize((
- html5,
- base,
- selection,
- links,
- typography,
- lists,
- images,
- svg,
- figures,
- forms,
- tables
-));
-
+@include h5bp-normalize;
// Or, you can import the "overrides" partial if
// you want more control over individual mixins
@@ -35,13 +18,7 @@
@import "partials/page";
// Helpers classes should come second-to-last
-@include html5-boilerplate-helpers((
- ir,
- hidden,
- visuallyhidden,
- invisible,
- clearfix
-));
+@include h5bp-helpers;
// Media should come last
@import "partials/media";

0 comments on commit 8fa3d1f

Please sign in to comment.
Something went wrong with that request. Please try again.