turbosass 0.1.0

data/.gitignore

@@ -0,0 +1,5 @@
+pkg/*
+*.gem
+.bundle
+Gemfile.lock
+.sass-cache

data/Gemfile

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

data/README.markdown

@@ -0,0 +1,55 @@
+# TurboSass
+
+TurboSass is a vast collection of SCSS mixins for maximum productivitiy and minimal development time.
+
+The mixins are divided in the following categories:
+
+* CSS3 helpers, doing proper handling of all currently supported vendor prefixes.
+
+* A grid system loosely based on 960.gs but using a configurable gutter width, amount of columns and column width.
+
+* A web font wrapper.
+
+* The HTML5 Boilerplate reset CSS.
+
+* Various other utilities, such as sticky footer, clearfix, image replacement and selection color.
+
+# Installation
+
+To install TurboSass, just do:
+
+    gem install turbosass
+
+and then you're ready to go.
+
+# Usage
+
+## Sinatra
+
+TurboSass was built mainly for use in Sinatra applications, so using it here is really simple.
+
+All you have to do is `require "turbosass"` in either your `config.ru` file or your main application file. Then you can use `@import "turbosass";` in any SCSS file where you want to use TurboSass. 
+
+See the `examples/sinatra` directory for a fully working example.
+
+## But I don't use one of those fancy-pants frameworks
+
+You can find the SCSS files that are used by TurboSass in the `lib/turbosass/scss` directory. Just copy these to wherever you like, just make sure to keep the directory structure intact. Then you can import the `turbosass` SCSS file to use the mixins.
+
+You can also compile an SCSS file with TurboSass from the command line. For this you can use the `turbosass` binary. This is a wrapper around the original Sass command line tool, but it ensures that the TurboSass files are in the include path. This saves you the hassle of typing in the exact path every time.
+
+# Documentation
+
+All the SCSS mixins are documented with comments. To get an overview of these comments in HTML format you can execute `rake rocco` in the gem directory. This generates a `doc` directory with annotated source files.
+
+Do note that in order to do this you need the Git version (or any version after 1.5) of Rocco because version 1.5 and below have unicode bugs which cause documentation to fail on files having the `@font-face` smiley trick.
+
+# License
+
+Copyright (c) 2010-2011 Emil Loer <http://emilloer.com>
+
+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  NON-INFRINGEMENT. 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.

data/Rakefile

@@ -0,0 +1,15 @@
+require "bundler"
+Bundler::GemHelper.install_tasks
+
+begin
+  require "rocco/tasks"
+
+  desc "Compile Rocco documentation"
+  Rocco::make "doc", "lib/turbosass/scss/turbosass/*.scss", {
+    :language => "scss",
+    :comment_chars => "//"
+  }
+rescue LoadError
+  warn "Rocco not loaded"
+  task :rocco
+end

data/bin/turbosass

@@ -0,0 +1,11 @@
+#!/usr/bin/env ruby
+
+require 'haml'
+require 'haml/exec'
+require 'turbosass'
+
+ARGV << "-I"
+ARGV << TurboSass.path
+
+opts = Haml::Exec::Sass.new(ARGV)
+opts.parse!

data/example/sinatra/app.rb

@@ -0,0 +1,10 @@
+require "sinatra"
+require "../../lib/turbosass"
+
+get "/style.css" do
+  scss :style
+end
+
+get "/" do
+  haml :index
+end

data/example/sinatra/config.ru

@@ -0,0 +1,5 @@
+require "rubygems"
+require "sinatra"
+require "app.rb"
+
+run Sinatra::Application

data/example/sinatra/views/index.haml

@@ -0,0 +1,11 @@
+!!!
+%html{:lang => "en"}
+  %head
+    %meta{:charset => "utf-8"}
+    %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}
+    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}
+    %title TurboSass Example
+    %link{:rel => "stylesheet", :href => "/style.css"}
+  %body
+    %h1 This is a Sinatra/TurboSass example
+    %p And as you can see, it works perfectly!

data/example/sinatra/views/style.scss

@@ -0,0 +1,7 @@
+$use_reset: false;
+@import "turbosass";
+
+h1 {
+    @include border-radius(20px);
+    background: green;
+}

data/lib/turbosass/scss/_turbosass.scss

@@ -0,0 +1,13 @@
+// This is the TurboSass main import file. You should import this file
+// in your main stylesheet. 
+//
+// Alternatively you can import one of the indivitual modules, but note
+// that some of these modules depend on `utils.scss`. 
+
+@import "turbosass/reset";
+@import "turbosass/grid";
+@import "turbosass/utils";
+@import "turbosass/ie6";
+@import "turbosass/css3";
+@import "turbosass/buttons";
+@import "turbosass/fonts";

data/lib/turbosass/scss/turbosass/_buttons.scss

@@ -0,0 +1,180 @@
+// ## Fancy button
+// 
+// Usage: 
+//
+//     <button>Click me</button>
+// 
+// And then in your SCSS file:
+//
+//     button {
+//       @include button;
+//       // insert any optional button helper mixins here
+//     }
+@mixin button {
+    @include border-radius(6px);
+    @include box-shadow(0px 1px 3px rgba(0,0,0,0.6));
+    background: #222 url(/images/button.png) repeat-x; 
+    display: inline-block; 
+    padding: 5px 10px 6px; 
+    color: #fff; 
+    text-decoration: none;
+    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
+    border: none;
+    border-bottom: 1px solid rgba(0,0,0,0.25);
+    position: relative;
+    cursor: pointer;
+    line-height: 1;
+    font-weight: bold;
+    font-size: 13px;
+
+    &:hover {
+        background-color: #111;
+        color: #fff;
+    }
+
+    &:active {
+        top: 1px;
+    }
+}
+
+// Make the button smaller
+@mixin smallbutton {
+    font-size: 11px;
+}
+
+// Make the button larger
+@mixin largebutton {
+    font-size: 14px;
+    padding: 8px 14px 9px;
+}
+
+// Make the button even larger
+@mixin xlargebutton {
+    font-size: 24px;
+    padding: 8px 14px 9px;
+}
+
+// Make the button huge
+@mixin xxlargebutton {
+    font-size: 72px;
+    padding: 8px 14px 9px;
+}
+
+// Give the button a pink color scheme
+@mixin pinkbutton {
+    background-color: #e22092;
+
+    &:hover {
+        background-color: #c81e82;
+    }
+}
+
+// Give the button a green color scheme
+@mixin greenbutton {
+    background-color: #91bd09;
+
+    &:hover {
+        background-color: #749a02;
+    }
+}
+
+// Give the button a red color scheme
+@mixin redbutton {
+    background-color: #e62727;
+
+    &:hover {
+        background-color: #cf2525;
+    }
+}
+
+// Give the button an orange color scheme
+@mixin orangebutton {
+    background-color: #ff5c00;
+
+    &:hover {
+        background-color: #d45500;
+    }
+}
+
+// Give the button a blue color scheme
+@mixin bluebutton {
+    background-color: #2981e4;
+
+    &:hover {
+        background-color: #2575cf;
+    }
+}
+
+// Give the button a yellow color scheme
+@mixin yellowbutton {
+    background-color: #ffb515;
+
+    &:hover {
+        background-color: #fc9200;
+    }
+}
+
+// Give the button a grey color scheme
+@mixin greybutton {
+    background-color: #aaaaaa;
+
+    &:hover {
+        background-color: #999999;
+    }
+}
+
+// ## iOS style checkbox/switch
+// 
+// Usage: 
+//
+//     <label>
+//       <input type="checkbox"/>
+//       <span class="check"></span>
+//     </label>
+// 
+// And then in your SCSS file:
+//
+//     label {
+//       @include iphonecheckbox;
+//     }
+@mixin iphonecheckbox($width:80px,$height:32px) {
+    @include border-radius(4px);
+    display: inline-block;
+    background: -moz-linear-gradient(19% 75% 90deg,#3095C7, #14539C);
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
+    border: 1px solid #555555;
+    width: $width;
+    position: relative;
+    height: $height;
+    cursor: pointer;
+
+    .check {
+        @include border-radius(3px);
+        @include transition(left .25s ease-out);
+        display: block;
+        width: $width / 2;
+        height: $height - 2;
+        background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
+        background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF));
+        border: 1px solid #e5e5e5;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+    }
+
+    input[type=checkbox] {
+        display: none;
+
+        &:checked + .check {
+            @include box-shadow(#244766 -1px 0px 3px);
+            top: 0px;
+            left: ($width / 2 ) - 2;
+        }
+
+        & + .check {
+            @include box-shadow(#244766 1px 0px 3px);
+            top: 0px;
+            left: 0px;
+        }
+    }
+}

data/lib/turbosass/scss/turbosass/_css3.scss

@@ -0,0 +1,151 @@
+// ## CSS3 wrappers
+//
+// This file contains useufl CSS3 wrappers that prevent you from having
+// to deal with all those vendor prefixes.
+
+// Apply a border radius on all corners
+@mixin border-radius($radius) {
+    -moz-border-radius: $radius;
+    -webkit-border-radius: $radius;
+    border-radius: $radius;
+}
+
+// Apply a border radius on the top-left corner
+@mixin border-radius-tl($radius) {
+    -moz-border-radius-topleft: $radius;
+    -webkit-border-top-left-radius: $radius;
+    border-top-left-radius: $radius;
+}
+
+// Apply a border radius on the top-right corner
+@mixin border-radius-tr($radius) {
+    -moz-border-radius-topright: $radius;
+    -webkit-border-top-right-radius: $radius;
+    border-top-right-radius: $radius;
+}
+
+// Apply a border radius on the bottom-left corner
+@mixin border-radius-bl($radius) {
+    -moz-border-radius-bottomleft: $radius;
+    -webkit-border-bottom-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+}
+
+// Apply a border radius on the bottom-right corner
+@mixin border-radius-br($radius) {
+    -moz-border-radius-bottomright: $radius;
+    -webkit-border-bottom-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+}
+
+// Apply a border radius on the left corners
+@mixin border-radius-left($radius) {
+    @include border-radius-tl($radius);
+    @include border-radius-bl($radius);
+}
+
+// Apply a border radius on the right corners
+@mixin border-radius-right($radius) {
+    @include border-radius-tr($radius);
+    @include border-radius-br($radius);
+}
+
+// Apply a border radius on the top corners
+@mixin border-radius-top($radius) {
+    @include border-radius-tl($radius);
+    @include border-radius-tr($radius);
+}
+
+// Apply a border radius on the bottom corners
+@mixin border-radius-bottom($radius) {
+    @include border-radius-bl($radius);
+    @include border-radius-br($radius);
+}
+
+// Apply a one pixel offset black text shadow with a given alpha value
+@mixin textshadow($alpha:0.4) {
+    text-shadow: 0px 1px 1px rgba(0,0,0,$alpha);
+}
+
+// Apply a one pixel offset white emboss effect with a given alpha value
+@mixin textemboss($alpha:0.4) {
+    text-shadow: rgba(255,255,255,$alpha) 0px 1px 1px;
+}
+
+// Apply a one pixel offset inset emboss effect with a given alpha value
+@mixin textemboss2($alpha:0.4) {
+    text-shadow: rgba(255,255,255,$alpha) 0px 1px 1px, rgba(0,0,0,$alpha) 0px -1px -1px;
+}
+
+// Apply a single box shadow
+@mixin box-shadow($shadow) {
+    -moz-box-shadow: $shadow;
+    -webkit-box-shadow: $shadow;
+    box-shadow: $shadow;
+}
+
+// Set the opacity to a given value
+@mixin opacity($alpha) {
+    opacity: $alpha;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$alpha*100})"; // for IE8
+    filter: alpha(opacity=#{$alpha*100}); // for IE5-7
+}
+
+// Apply a transition property
+@mixin transition($trans) {
+    -webkit-transition: $trans;
+    -moz-transition: $trans;
+    -o-transition: $trans;
+    transition: $trans;
+}
+
+// Apply a transform property
+@mixin transform($trans) {
+    -webkit-transform: $trans;
+    -moz-transform: $trans;
+    -ms-transform: $trans;
+    -o-transform: $trans;
+    transform: $trans;
+}
+
+// Apply a transition on the transform property
+@mixin transtrans($trans) {
+    -webkit-transition: $trans -webkit-transform;
+    -moz-transition: $trans -moz-transform;
+    -o-transition: $trans -o-transform;
+    transition: $trans transform;
+}
+
+// Transform-origin wrapper
+@mixin transform-origin($origin) {
+    -webkit-transform-origin: $origin;
+    -moz-transform-origin: $origin;
+    -ms-transform-origin: $origin;
+    -o-transform-origin: $origin;
+    transform-origin: $origin;
+}
+
+// Box-sizing wrapper
+@mixin box-sizing($sizing) {
+    -webkit-box-sizing: $sizing;
+    -moz-box-sizing: $sizing;
+    box-sizing: $sizing;
+}
+
+// Apply a vertical gradient with two colors
+@mixin vertical-gradient($top,$bottom) {
+    background-color: $top;
+    background-image: -moz-linear-gradient(top,$top,$bottom);
+    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,$top),color-stop(1,$bottom));
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$top}',endColorStr='#{$bottom}');
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$top}',endColorStr='#{$bottom}')";
+}
+
+// Apply a horizontal gradient with two colors
+@mixin horizontal-gradient($left,$right) {
+    background-color: $left;
+    background-image: -moz-linear-gradient(left,$left,$right);
+    background-image: -webkit-gradient(linear,left top,right top,color-stop(0,$left),color-stop(1,$right));
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$top}',endColorStr='#{$bottom}',gradientType=1);
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$top}',endColorStr='#{$bottom}',gradientType=1)";
+}

data/lib/turbosass/scss/turbosass/_fonts.scss

@@ -0,0 +1,20 @@
+// Default font path without trailing slash, override at will
+$fontpath: "/fonts" !default;
+
+// ## Web font wrapper
+// 
+// $family is the font name, $filename is the font filename minus extension.
+// Include this in the top level.
+//
+// Example: 
+// 
+//     @mixin webfont("MuseoSans", "museosans");
+@mixin webfont($family, $filename) {
+    @font-face {
+        font-family: '#{$family}';
+        src: url('#{$fontpath}/#{$filename}.eot');
+        src: local('☺'), url('#{$fontpath}/#{$filename}.woff') format('woff'), url('#{$fontpath}/#{$filename}.ttf') format('truetype'), url('#{$fontpath}/#{$filename}.svg#webfont') format('svg');
+        font-weight: normal;
+        font-style: normal;
+    }
+}

data/lib/turbosass/scss/turbosass/_grid.scss

@@ -0,0 +1,119 @@
+// ## Grid System
+//
+// The TurboSass grid system is loosely based on Nathan Smith's fantastic
+// 960.gs system.
+
+// Change this variable to alter the container width and the amount of 
+// grid columns
+$gridwidth: 960px / 12 !default;
+
+// Change this variable to alter the gutter margins.
+$gridmargin: 10px !default;
+
+// Make this object a container for grid columns
+@mixin c12 { 
+    margin-left: auto;
+    margin-right: auto;
+    width: 12*$gridwidth; 
+}
+
+// Internal helper with grid column properties
+@mixin gridbox {
+    display: inline;
+    float: left;
+    margin-left: $gridmargin;
+    margin-right: $gridmargin;
+}
+
+// Internal helper with push-pull properties
+@mixin pushpull {
+    position: relative;
+}
+
+// To nest grid cells in other grid cells apply the alpha mixin to the
+// left inner cell and omega to the right inner cell. This prevents
+// double gutters from appearing.
+@mixin alpha { margin-left:0; }
+@mixin omega { margin-right: 0; }
+
+// Grid cell mixins. The number indicates the width of the cell in columns.
+@mixin g1 { @include gridbox; width: ($gridwidth)-(2*$gridmargin); }
+@mixin g2 { @include gridbox; width: (2*$gridwidth)-(2*$gridmargin); }
+@mixin g3 { @include gridbox; width: (3*$gridwidth)-(2*$gridmargin); }
+@mixin g4 { @include gridbox; width: (4*$gridwidth)-(2*$gridmargin); }
+@mixin g5 { @include gridbox; width: (5*$gridwidth)-(2*$gridmargin); }
+@mixin g6 { @include gridbox; width: (6*$gridwidth)-(2*$gridmargin); }
+@mixin g7 { @include gridbox; width: (7*$gridwidth)-(2*$gridmargin); }
+@mixin g8 { @include gridbox; width: (8*$gridwidth)-(2*$gridmargin); }
+@mixin g9 { @include gridbox; width: (9*$gridwidth)-(2*$gridmargin); }
+@mixin g10 { @include gridbox; width: (10*$gridwidth)-(2*$gridmargin); }
+@mixin g11 { @include gridbox; width: (11*$gridwidth)-(2*$gridmargin); }
+@mixin g12 { @include gridbox; width: (12*$gridwidth)-(2*$gridmargin); }
+
+// Push this cell to the right
+@mixin push1 { @include pushpull; left: $gridwidth; }
+@mixin push2 { @include pushpull; left: 2*$gridwidth; }
+@mixin push3 { @include pushpull; left: 3*$gridwidth; }
+@mixin push4 { @include pushpull; left: 4*$gridwidth; }
+@mixin push5 { @include pushpull; left: 5*$gridwidth; }
+@mixin push6 { @include pushpull; left: 6*$gridwidth; }
+@mixin push7 { @include pushpull; left: 7*$gridwidth; }
+@mixin push8 { @include pushpull; left: 8*$gridwidth; }
+@mixin push9 { @include pushpull; left: 9*$gridwidth; }
+@mixin push10 { @include pushpull; left: 10*$gridwidth; }
+@mixin push11 { @include pushpull; left: 11*$gridwidth; }
+
+// Pull this cell to the left
+@mixin pull1 { @include pushpull; left: -$gridwidth; }
+@mixin pull2 { @include pushpull; left: -2*$gridwidth; }
+@mixin pull3 { @include pushpull; left: -3*$gridwidth; }
+@mixin pull4 { @include pushpull; left: -4*$gridwidth; }
+@mixin pull5 { @include pushpull; left: -5*$gridwidth; }
+@mixin pull6 { @include pushpull; left: -6*$gridwidth; }
+@mixin pull7 { @include pushpull; left: -7*$gridwidth; }
+@mixin pull8 { @include pushpull; left: -8*$gridwidth; }
+@mixin pull9 { @include pushpull; left: -9*$gridwidth; }
+@mixin pull10 { @include pushpull; left: -10*$gridwidth; }
+@mixin pull11 { @include pushpull; left: -11*$gridwidth; }
+
+// Apply padding to the left of the cell.
+@mixin p1 { padding-left: $gridwidth; }
+@mixin p2 { padding-left: 2*$gridwidth; }
+@mixin p3 { padding-left: 3*$gridwidth; }
+@mixin p4 { padding-left: 4*$gridwidth; }
+@mixin p5 { padding-left: 5*$gridwidth; }
+@mixin p6 { padding-left: 6*$gridwidth; }
+@mixin p7 { padding-left: 7*$gridwidth; }
+@mixin p8 { padding-left: 8*$gridwidth; }
+@mixin p9 { padding-left: 9*$gridwidth; }
+@mixin p10 { padding-left: 10*$gridwidth; }
+@mixin p11 { padding-left: 11*$gridwidth; }
+
+// Apply padding to the right of the cell. 
+@mixin s1 { padding-right: $gridwidth; }
+@mixin s2 { padding-right: 2*$gridwidth; }
+@mixin s3 { padding-right: 3*$gridwidth; }
+@mixin s4 { padding-right: 4*$gridwidth; }
+@mixin s5 { padding-right: 5*$gridwidth; }
+@mixin s6 { padding-right: 6*$gridwidth; }
+@mixin s7 { padding-right: 7*$gridwidth; }
+@mixin s8 { padding-right: 8*$gridwidth; }
+@mixin s9 { padding-right: 9*$gridwidth; }
+@mixin s10 { padding-right: 10*$gridwidth; }
+@mixin s11 { padding-right: 11*$gridwidth; }
+
+// This is the clearfix from HTML5 Boilerplate
+@mixin clearfix {
+    zoom: 1;
+
+    &:before, &:after {
+        content: "\0020"; 
+        display: block; 
+        height: 0; 
+        visibility: hidden; 
+    }
+
+    &:after { 
+        clear: both; 
+    }
+}

data/lib/turbosass/scss/turbosass/_ie6.scss

@@ -0,0 +1,33 @@
+// Trigger the hasLayout property on IE6.
+@mixin haslayout {
+    zoom: 1;
+}
+
+// Hacks to implement min-height and min-width in IE6.
+// See http://www.dustindiaz.com/min-height-fast-hack/ for more info.
+@mixin minheight($height) {
+    min-height: $height;
+    height: auto !important;
+    height: $height;
+}
+
+@mixin minwidth($width) {
+    min-width: $width;
+    width: auto !important;
+    width: $width;
+}
+
+// Fix for IE6 double float margin bug.
+// See http://www.positioniseverything.net/explorer/doubled-margin.html
+// for more info.
+@mixin doublefloatmarginfix {
+    display: inline;
+    float: left;
+}
+
+// Fix for IE6 peekaboo bug.
+// See http://www.positioniseverything.net/explorer/peekaboo.html for
+// more info.
+@mixin peekaboofix {
+    _display: inline-block;
+}

data/lib/turbosass/scss/turbosass/_reset.scss

@@ -0,0 +1,99 @@
+// ## Reset CSS
+//
+// This is the awesome reset CSS from html5boilerplate.com
+
+// You can prevent the reset CSS from being applied by setting 
+// `$use_reset` to false before importing the TurboSass SCSS.
+$use_reset: true !default;
+
+@if $use_reset == true {
+
+    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;
+        outline: 0;
+        font-size: 100%;
+        vertical-align: baseline;
+        background: transparent;
+    }
+
+    body {
+        line-height: 1;
+    }
+
+    :focus {
+        outline: 1;
+    }
+
+    article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+        display: block;
+    }
+
+    nav ul {
+        list-style: none;
+    }
+
+    blockquote, q {
+        quotes: none;
+    }
+
+    blockquote:before, blockquote:after, q:before, q:after {
+        content: '';
+        content: none;
+    }
+
+    a {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        vertical-align: baseline;
+        background: transparent;
+    }
+
+    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 #000;
+        cursor: help;
+    }
+
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+
+    hr {
+        display: block;
+        height: 1px;
+        border: 0;
+        border-top: 1px solid #cccccc;
+        margin: 1em 0;
+        padding: 0;
+    }
+
+    input, select {
+        vertical-align: middle;
+    }
+
+    html {
+        overflow-y: scroll;
+    }
+
+}

data/lib/turbosass/scss/turbosass/_utils.scss

@@ -0,0 +1,87 @@
+// ## Sticky Footer
+//
+// This must be a top-level mixin.
+//
+// Usage:
+//
+//     <body>
+//       <div id="root">
+//         Your content here.
+//         <div id="rootfooter"></div>
+//       </div>
+//       <div id="footer">
+//         This is the footer.
+//       </div>
+//     </body>
+//
+// And then in the SCSS:
+//
+//     @include sticky-footer(100px, "#root", "#rootfooter", "#footer");
+@mixin sticky-footer($height,$root,$rootfooter,$footer) {
+    html,body {
+        height: 100%;
+    }
+
+    #{$root} {
+        @include minheight(100%);
+        clear: both;
+        margin-bottom: -#{$height};
+
+        #{$rootfooter} {
+            clear: both;
+            height: #{$height};
+        }
+    }
+
+    #{$footer} {
+        clear: both;
+        position: relative;
+        height: #{$height};
+    }
+}
+
+// Change the color of the text selection.
+//
+// If you want to be cool you should use hot pink here.
+@mixin selectioncolor($color) {
+    ::-moz-selection { 
+        background: $color; 
+        color: #fff; 
+        text-shadow: none; 
+    }
+
+    ::selection { 
+        background: $color; 
+        color: #fff; 
+        text-shadow: none; 
+    }
+
+    a:link { 
+        -webkit-tap-highlight-color: $color; 
+    }
+}
+
+// Perform an image replacement technique by hiding the text in favor of
+// the background image url.
+@mixin imagereplacement {
+    display: block; 
+    text-indent: -999em; 
+    overflow: hidden; 
+    background-repeat: no-repeat; 
+    text-align: left; 
+    direction: ltr;
+}
+
+// Apply this mixin to hide something, even from screen readers.
+@mixin hidden {
+    display: none;
+    visibility: hidden;
+}
+
+// Apply pre-style wrapping.
+@mixin prewrapping {
+    white-space: pre;
+    white-space: pre-wrap;
+    white-space: pre-line;
+    word-wrap: break-word;
+}

data/lib/turbosass/version.rb

@@ -0,0 +1,3 @@
+module TurboSass
+  VERSION = "0.1.0"
+end

data/lib/turbosass.rb

@@ -0,0 +1,18 @@
+require "sass"
+require "sass/plugin"
+
+module TurboSass
+  def self.path
+    File.expand_path(File.join(File.dirname(__FILE__), "turbosass", "scss"))
+  end
+end
+
+module Sass
+  class Engine
+    new_default_options = DEFAULT_OPTIONS.clone
+    new_default_options[:load_paths] << ::TurboSass.path
+
+    remove_const(:DEFAULT_OPTIONS)
+    DEFAULT_OPTIONS = new_default_options.freeze
+  end
+end

data/turbosass.gemspec

@@ -0,0 +1,25 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "turbosass/version"
+
+Gem::Specification.new do |s|
+  s.name        = "turbosass"
+  s.version     = TurboSass::VERSION
+  s.platform    = Gem::Platform::RUBY
+
+  s.authors     = ["Emil Loer"]
+  s.email       = ["emil@koffietijd.net"]
+  s.homepage    = "http://github.com/thedjinn/turbosass"
+  s.summary     = %q{Sass framework for ninjas}
+  s.description = %q{Sass framework for ninjas}
+  s.licenses    = ["MIT"]
+
+  s.rubyforge_project = "turbosass"
+
+  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(%q<haml>, ["~> 3.0.0"])
+end

metadata

@@ -0,0 +1,102 @@
+--- !ruby/object:Gem::Specification 
+name: turbosass
+version: !ruby/object:Gem::Version 
+  hash: 27
+  prerelease: 
+  segments: 
+  - 0
+  - 1
+  - 0
+  version: 0.1.0
+platform: ruby
+authors: 
+- Emil Loer
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-02-21 00:00:00 +01:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: haml
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ~>
+      - !ruby/object:Gem::Version 
+        hash: 7
+        segments: 
+        - 3
+        - 0
+        - 0
+        version: 3.0.0
+  type: :runtime
+  version_requirements: *id001
+description: Sass framework for ninjas
+email: 
+- emil@koffietijd.net
+executables: 
+- turbosass
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- README.markdown
+- Rakefile
+- bin/turbosass
+- example/sinatra/app.rb
+- example/sinatra/config.ru
+- example/sinatra/views/index.haml
+- example/sinatra/views/style.scss
+- lib/turbosass.rb
+- lib/turbosass/scss/_turbosass.scss
+- lib/turbosass/scss/turbosass/_buttons.scss
+- lib/turbosass/scss/turbosass/_css3.scss
+- lib/turbosass/scss/turbosass/_fonts.scss
+- lib/turbosass/scss/turbosass/_grid.scss
+- lib/turbosass/scss/turbosass/_ie6.scss
+- lib/turbosass/scss/turbosass/_reset.scss
+- lib/turbosass/scss/turbosass/_utils.scss
+- lib/turbosass/version.rb
+- turbosass.gemspec
+has_rdoc: true
+homepage: http://github.com/thedjinn/turbosass
+licenses: 
+- MIT
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: turbosass
+rubygems_version: 1.4.1
+signing_key: 
+specification_version: 3
+summary: Sass framework for ninjas
+test_files: []
+