Permalink
Browse files

first swag at updating to h5bp 2.0

  • Loading branch information...
heygrady committed Nov 20, 2011
1 parent 405f9dd commit d34fd4796b741a962a9958b011e8b847cf60bdd2
Showing with 1,236 additions and 896 deletions.
  1. +1 −0 lib/app/helpers/html5_boilerplate_helper.rb
  2. +10 −13 stylesheets/_html5-boilerplate.scss
  3. +0 −42 stylesheets/html5-boilerplate/_fonts.scss
  4. +52 −41 stylesheets/html5-boilerplate/_helpers.scss
  5. +0 −35 stylesheets/html5-boilerplate/_media.scss
  6. +379 −0 stylesheets/html5-boilerplate/_normalize.scss
  7. +21 −0 stylesheets/html5-boilerplate/_print.scss
  8. +0 −43 stylesheets/html5-boilerplate/_reset.scss
  9. +0 −126 stylesheets/html5-boilerplate/_styles.scss
  10. +8 −5 templates/project/_head.html.haml
  11. +12 −3 templates/project/_javascripts.html.haml
  12. +1 −1 templates/project/_stylesheets.html.haml
  13. +1 −1 templates/project/application.html.haml
  14. BIN templates/project/files/apple-touch-icon-114x114-precomposed.png
  15. BIN templates/project/files/apple-touch-icon-57x57-precomposed.png
  16. BIN templates/project/files/apple-touch-icon-72x72-precomposed.png
  17. BIN templates/project/files/apple-touch-icon-precomposed.png
  18. BIN templates/project/files/apple-touch-icon.png
  19. +135 −110 templates/project/files/htaccess
  20. +0 −8 templates/project/handheld.scss
  21. +32 −16 templates/project/index.html.haml
  22. +369 −253 templates/project/javascripts/{jquery-1.6.js → jquery-1.6.2.js}
  23. +18 −0 templates/project/javascripts/jquery-1.6.2.min.js
  24. +0 −16 templates/project/javascripts/jquery-1.6.min.js
  25. +0 −2 templates/project/javascripts/modernizr-1.7.min.js
  26. +4 −0 templates/project/javascripts/modernizr-2.0.6.min.js
  27. +7 −3 templates/project/javascripts/plugins.js
  28. +90 −37 templates/project/javascripts/rails.js
  29. +0 −7 templates/project/javascripts/respond.min.js
  30. +10 −7 templates/project/manifest.rb
  31. +13 −21 templates/project/partials/_base.scss
  32. +19 −14 templates/project/partials/_media.scss
  33. +53 −57 templates/project/partials/_overrides.scss
  34. +0 −32 templates/project/partials/_page.scss
  35. +1 −3 templates/project/style.scss
@@ -1,6 +1,7 @@
module Html5BoilerplateHelper
# Create a named haml tag to wrap IE conditional around a block
# http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither
+ # Consider adding an manifest.appcache: h5bp.com/d/Offline
def ie_tag(name=:body, attrs={}, &block)
attrs.symbolize_keys!
haml_concat("<!--[if lt IE 7]> #{ tag(name, add_class('ie6', attrs), true) } <![endif]-->".html_safe)
@@ -1,20 +1,17 @@
-// HTML5 Boilerplate
//
-// Credit is left where credit is due.
-// Much inspiration was taken from these projects:
-// - yui.yahooapis.com/2.8.1/build/base/base.css
-// - camendesign.com/design/
-// - praegnanz.de/weblog/htmlcssjs-kickstart
+// HTML5 Boilerplate
+//
+// What follows is the result of much research on cross-browser styling.
+// Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+// Kroc Camen, and the H5BP dev community and team.
+//
+// Detailed information about this CSS: h5bp.com/css
-@import "html5-boilerplate/reset";
-@import "html5-boilerplate/fonts";
-@import "html5-boilerplate/styles";
+@import "html5-boilerplate/normalize";
@import "html5-boilerplate/helpers";
-@import "html5-boilerplate/media";
+@import "html5-boilerplate/print";
@mixin html5-boilerplate {
- @include html5-boilerplate-reset;
- @include html5-boilerplate-fonts;
- @include html5-boilerplate-styles;
+ @include html5-boilerplate-normalize;
@include html5-boilerplate-helpers;
}
@@ -1,42 +0,0 @@
-$base-font-family: unquote("sans-serif") !default;
-$base-font-size: 13px !default;
-$base-line-height: 1.231 !default;
-
-//
-// Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
-// Whatever parts of this port of YUI to Sass that are copyrightable, are Copyright (c) 2008, Christopher Eppstein. All Rights Reserved.
-//
-
-@mixin html5-boilerplate-fonts($family: $base-font-family, $size: $base-font-size, $line-height: $base-line-height) {
- body {
- font-size: $size;
- font-family: $family;
- line-height: $line-height; // hack retained to preserve specificity
- *font-size: small;
- }
-
- // Normalize monospace sizing:
- // en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
- pre, code, kbd, samp { font-family: monospace, sans-serif; }
-}
-
-@mixin font-smoothing {
- @warn "The 'font-smoothing' mixin has been deprecated as it made monospace too thin.";
-}
-
-// Sets the font size specified in pixels using percents so that the base
-// font size changes and 1em has the correct value. When nesting font size
-// declarations, within the DOM tree, the base_font_size must be the parent's
-// effective font-size in pixels.
-// Usage Examples:
-// .big
-// +font-size(16px)
-// .bigger
-// +font-size(18px)
-// .big .bigger
-// +font-size(18px, 16px)
-//
-// For more information see the table found at http://developer.yahoo.com/yui/3/cssfonts/#fontsize
-@mixin font-size($size, $base-font-size: $base-font-size) {
- font-size: ceil(percentage($size / $base-font-size));
-}
@@ -1,27 +1,29 @@
-@import "compass/typography/text/replacement";
-@import "compass/utilities/general/clearfix";
-
-//
-// Non-semantic helper classes
-// It's better to include these mixins in your own styles
-//
+// ==|== non-semantic helper classes ========================================
+// Please define your styles before this section.
+// ==========================================================================
@mixin html5-boilerplate-helpers {
.ir { @include image-replacement; }
-
.hidden { @include hidden; }
-
- .visuallyhidden { @include visually-hidden; }
-
- .clearfix { @include micro-clearfix; }
+ .visuallyhidden { @include visuallyhidden; }
+ .invisible { @include invisible; }
+ .clearfix { @include h5bp-clearfix; }
}
-// Almost the same as compass replace-text
-// but adding direction: ltr
-@mixin image-replacement($img: none, $x: 50%, $y: 50%) {
- @include hide-text;
- direction: ltr;
+//For image replacement
+@mixin image-replacement($img, $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;
@@ -34,38 +36,47 @@
height: image-height($img);
}
-// Hide for both screenreaders and browsers
-// css-discuss.incutio.com/wiki/Screenreader_Visibility
+// Hide from both screenreaders and browsers: h5bp.com/u
@mixin hidden {
- display:none;
+ display: none !important;
visibility: hidden;
}
-// Hide only visually, but have it available for screenreaders: by Jon Neal
-// www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden
-@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: drupal.org/node/897638
+// 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;
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ width: auto;
}
}
// Hide visually and from screenreaders, but maintain layout
-@mixin invisible { visibility: hidden; }
-
-// The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations.
-// nicolasgallagher.com/micro-clearfix-hack/
-@mixin micro-clearfix {
- &:before, &:after { content: ""; display: table; }
- &:after { clear: both; }
- zoom: 1;
+@mixin invisible {
+ visibility: hidden;
}
-
-// The Magnificent CLEARFIX << j.mp/phayesclearfix
-@mixin magnificent-clearfix {
- @warn "The 'magnificent-clearfix' mixin has been deprecated. Use 'pie-clearfix' in compass core instead.";
- @include pie-clearfix;
-}
+// Contain floats: h5bp.com/q
+@mixin h5bp-clearfix {
+ &:before, &:after {
+ content: "";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+ zoom: 1;
+}
@@ -1,35 +0,0 @@
-@mixin html5-boilerplate-media {
- @warn "The 'html5-boilerplate-media' mixin has been deprecated.";
-}
-
-//
-// Print styles
-// Inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
-
-@mixin media-print {
- * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
- -ms-filter: none !important; } // Black prints faster: sanbeiji.com/archives/953
- a, a:visited { color: #444 !important; 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; } // css-discuss.incutio.com/wiki/Printing_Tables
- 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; }
-}
-
-@mixin media-orientation-portrait {
- @warn "The 'media-orientation-portrait' mixin has been deprecated.";
-}
-
-@mixin media-orientation-landscape {
- @warn "The 'media-orientation-landscape' mixin has been deprecated.";
-}
-
-@mixin media-mobile($optimize: true) {
- @warn "The 'media-mobile' mixin has been deprecated.";
-}
Oops, something went wrong.

0 comments on commit d34fd47

Please sign in to comment.