compass-html5 0.0.1

data/.gitignore

@@ -0,0 +1,4 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*

data/Gemfile

@@ -0,0 +1,3 @@
+source "http://rubygems.org"
+
+gemspec

data/LICENSE

@@ -0,0 +1,3 @@
+Copyright (c) 2010-2011 Peter Gumeson
+
+http://creativecommons.org/licenses/by/3.0/

data/README.md

@@ -0,0 +1,12 @@
+Compass Html5
+=========================
+
+A compass extension of common html5 mixins extracted from html5-boilerplate and other libraries.
+
+
+Included libraries
+=========================
+
+* CSS extraction of Paul Irish's Html5 Boilerplate
+
+(More soon)

data/Rakefile

@@ -0,0 +1 @@
+require 'bundler/gem_tasks'

data/compass-html5.gemspec

@@ -0,0 +1,22 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "compass/html5/version"
+
+Gem::Specification.new do |s|
+  s.name        = "compass-html5"
+  s.version     = Compass::Html5::VERSION
+  s.authors     = ["Peter Gumeson"]
+  s.email       = ["gumeson@gmail.com"]
+  s.homepage    = "http://rubygems.org/gems/compass-html5"
+  s.summary     = %q{A compass extension of common html5 mixins extracted from html5-boilerplate.}
+  s.description = %q{}
+
+  s.rubyforge_project = "compass-html5"
+
+  s.add_dependency("compass", ["~> 0.11.1"])
+
+  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"]
+end

data/lib/compass-html5.rb

@@ -0,0 +1 @@
+require "compass/html5"

data/lib/compass/html5.rb

@@ -0,0 +1,7 @@
+require "compass/html5/version"
+
+module Compass
+  module Html5
+    Compass::Frameworks.register("compass-html5", :path => "#{File.dirname(__FILE__)}/../..")
+  end
+end

data/lib/compass/html5/version.rb

@@ -0,0 +1,6 @@
+module Compass
+  module Html5
+    VERSION = "0.0.1"
+    HTML5_BOILERPLATE_VERSION = "1.0"
+  end
+end

data/stylesheets/html5/_boilerplate.scss

@@ -0,0 +1,20 @@
+// 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
+
+@import "boilerplate/reset";
+@import "boilerplate/fonts";
+@import "boilerplate/styles";
+@import "boilerplate/helpers";
+@import "boilerplate/media";
+
+@mixin html5-boilerplate {
+  @include html5-boilerplate-reset;
+  @include html5-boilerplate-fonts;
+  @include html5-boilerplate-styles;
+  @include html5-boilerplate-helpers;
+}

data/stylesheets/html5/boilerplate/_fonts.scss

@@ -0,0 +1,38 @@
+$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; }
+}
+
+// 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));
+}

data/stylesheets/html5/boilerplate/_helpers.scss

@@ -0,0 +1,64 @@
+@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
+//
+
+@mixin html5-boilerplate-helpers {
+  .ir { @include image-replacement; }
+
+  .hidden { @include hidden; }
+
+  .visuallyhidden { @include visually-hidden; }
+
+  .clearfix { @include micro-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;
+  background-repeat: no-repeat;
+  @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 for both screenreaders and browsers
+// css-discuss.incutio.com/wiki/Screenreader_Visibility
+@mixin hidden {
+  display:none;
+  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
+  &.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; }
+
+// 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;
+}

data/stylesheets/html5/boilerplate/_media.scss

@@ -0,0 +1,19 @@
+//
+// 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; }
+}

data/stylesheets/html5/boilerplate/_reset.scss

@@ -0,0 +1,43 @@
+//  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
+//  v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
+//  html5doctor.com/html-5-reset-stylesheet/
+
+@mixin html5-boilerplate-reset {
+  html, body, div, span, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
+  small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, figcaption, figure,
+  footer, header, hgroup, menu, nav, section, summary,
+  time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+  }
+
+  article, aside, details, figcaption, figure,
+  footer, header, hgroup, menu, nav, section {
+    display: block;
+  }
+
+  blockquote, q { quotes: none; }
+
+  blockquote:before, blockquote:after,
+  q:before, q:after { content: ""; content: none; }
+
+  ins { background-color: #ff9; color: #000; text-decoration: none; }
+
+  mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
+
+  del { text-decoration: line-through; }
+
+  abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
+
+  table { border-collapse: collapse; border-spacing: 0; }
+
+  hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+}

data/stylesheets/html5/boilerplate/_styles.scss

@@ -0,0 +1,116 @@
+$font-color: #444 !default;  //looks better than black: twitter.com/H_FJ/statuses/11800719859
+$link-color: #607890 !default;
+$link-hover-color: #036 !default;
+$link-active-color: #607890 !default;
+$link-visited-color: #607890 !default;
+$selected-font-color: #fff !default;
+$selected-background-color: #ff5e99 !default;
+$list-left-margin: 1.8em !default;
+
+//
+// Minimal base styles
+//
+@mixin html5-boilerplate-styles {
+  html { @include force-scrollbar; }
+
+  ul, ol { margin-left: $list-left-margin; }
+  ol { list-style-type: decimal; }
+
+  td { vertical-align: top; }
+
+  sub { @include sub; }
+
+  sup { @include sup; }
+
+  @include accessible-focus;
+
+  @include quoted-pre;
+
+  @include hand-cursor-inputs;
+
+  @include reset-form-elements;
+
+  @include selected-text;
+
+  @include webkit-tap-highlight;
+
+  @include ie-hacks;
+
+  @include no-nav-margins;
+}
+
+// set sub, sup without affecting line-height: gist.github.com/413930
+@mixin sub{ 
+  font-size: 75%; line-height: 0; position: relative; bottom: -0.25em;
+}
+@mixin sup{ 
+  font-size: 75%; line-height: 0; position: relative; top: -0.5em;
+}
+
+// accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test
+@mixin accessible-focus {
+  a:hover, a:active { outline: none; }
+}
+
+// www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap
+@mixin quoted-pre {
+  pre {
+    white-space: pre; white-space: pre-wrap; word-wrap: break-word;
+    padding: 15px;
+  }
+}
+
+// Hand cursor on clickable input elements
+@mixin hand-cursor-inputs {
+  label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
+}
+
+@mixin reset-form-elements {
+  // 1) Make inputs and buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
+  // 2) WebKit browsers add a 2px margin outside the chrome of form elements.
+  //    Firefox adds a 1px margin above and below textareas
+  // 3) Set font-size to match <body>'s, and font-family to sans-serif
+  // 4) Align to baseline
+  button, input, select, textarea { width: auto; overflow: visible; margin: 0; font-size: 100%; font-family: sans-serif; vertical-align: baseline; }
+  
+  // 1) Remove default scrollbar in IE: www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/
+  // 2) Align to text-top
+  textarea { overflow: auto; vertical-align: text-top; }
+  
+  // Remove extra padding and inner border in Firefox
+  input::-moz-focus-inner,
+  button::-moz-focus-inner { border: 0; padding: 0; }
+}
+
+// These selection declarations have to be separate.
+// No text-shadow: twitter.com/miketaylr/status/12228805301 
+// Also: hot pink!
+@mixin selected-text {
+  ::-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; }
+}
+
+// j.mp/webkit-tap-highlight-color
+@mixin webkit-tap-highlight {
+  a:link { -webkit-tap-highlight-color: $selected-background-color; }
+}
+
+// 1) Always force a scrollbar in non-IE 
+// 2) Remove iOS text size adjust without disabling user zoom:
+//    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+@mixin force-scrollbar {
+  overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
+}
+
+@mixin ie-hacks {
+  // Bicubic resizing for non-native sized IMG: 
+  // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+  .ie7 img { -ms-interpolation-mode: bicubic; }
+
+  .ie6 legend, .ie7 legend { margin-left: -7px; }
+}
+
+@mixin no-nav-margins {
+  // remove margins for navigation lists
+  nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
+}

metadata

@@ -0,0 +1,81 @@
+--- !ruby/object:Gem::Specification 
+name: compass-html5
+version: !ruby/object:Gem::Version 
+  prerelease: 
+  version: 0.0.1
+platform: ruby
+authors: 
+- Peter Gumeson
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-06-20 00:00:00 -07:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ~>
+      - !ruby/object:Gem::Version 
+        version: 0.11.1
+  type: :runtime
+  version_requirements: *id001
+description: ""
+email: 
+- gumeson@gmail.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- compass-html5.gemspec
+- lib/compass-html5.rb
+- lib/compass/html5.rb
+- lib/compass/html5/version.rb
+- stylesheets/html5/_boilerplate.scss
+- stylesheets/html5/boilerplate/_fonts.scss
+- stylesheets/html5/boilerplate/_helpers.scss
+- stylesheets/html5/boilerplate/_media.scss
+- stylesheets/html5/boilerplate/_reset.scss
+- stylesheets/html5/boilerplate/_styles.scss
+has_rdoc: true
+homepage: http://rubygems.org/gems/compass-html5
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+requirements: []
+
+rubyforge_project: compass-html5
+rubygems_version: 1.6.2
+signing_key: 
+specification_version: 3
+summary: A compass extension of common html5 mixins extracted from html5-boilerplate.
+test_files: []
+