rapido-css 0.0.1

data/stylesheets/utilities/_helper-classes.scss

@@ -0,0 +1,32 @@
+.wrapper, .w {
+	@extend .clearfix;
+	margin: 0 auto;
+	max-width: $desk-end;
+	padding-left: 20px;
+	padding-right: 20px;
+}
+
+.fixed-wrapper, .fw {
+	@extend .clearfix;
+	margin: 0 auto;
+	width: $desk-end;
+}
+
+$i: 100;
+@while $i > 0 {
+	.width-#{$i} { width: $i * 1% !important; }
+	$i: $i - 5;
+}
+
+.transition {
+	@include transition();
+}
+
+// Text replacement
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+.ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;line-height:0;font-size:0;}
+.ir:before{content:"";display:block;width:0;height:150%}
+.hidden{display:none!important;visibility:hidden}
+.visuallyhidden{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0}
+.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;overflow:visible;position:static;width:auto;margin:0}
+.invisible{visibility:hidden}

data/stylesheets/utilities/_icon-fonts.scss

@@ -0,0 +1,111 @@
+@if $use-brandico {
+	@font-face {
+	  font-family: 'brandico';
+	  font-style: 'normal';
+	  font-weight: 'normal';
+	  src: url('http://weloveiconfonts.com/api/fonts/brandico/brandico.eot');
+	  src: url('http://weloveiconfonts.com/api/fonts/brandico/brandico.eot?#iefix') format('eot'),
+	  url('http://weloveiconfonts.com/api/fonts/brandico/brandico.woff') format('woff'),
+	  url('http://weloveiconfonts.com/api/fonts/brandico/brandico.ttf') format('truetype'),
+	  url('http://weloveiconfonts.com/api/fonts/brandico/brandico.svg#brandico') format('svg');
+	}
+}
+
+@if $use-entypo {
+	@font-face {
+	  font-family: 'entypo';
+	  font-style: 'normal';
+	  font-weight: 'normal';
+	  src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');
+	  src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix') format('eot'),
+	  url('http://weloveiconfonts.com/api/fonts/entypo/entypo.woff') format('woff'),
+	  url('http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf') format('truetype'),
+	  url('http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo') format('svg');
+	}
+}
+
+@if $use-fontawesome {
+	@font-face {
+	  font-family: 'FontAwesome';
+	  font-style: 'normal';
+	  font-weight: 'normal';
+	  src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot');
+	  src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'),
+	  url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'),
+	  url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'),
+	  url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
+	}
+}
+
+@if $use-fontelico {
+	@font-face {
+	  font-family: 'fontelico';
+	  font-style: 'normal';
+	  font-weight: 'normal';
+	  src: url('http://weloveiconfonts.com/api/fonts/fontelico/fontelico.eot');
+	  src: url('http://weloveiconfonts.com/api/fonts/fontelico/fontelico.eot?#iefix') format('eot'),
+	  url('http://weloveiconfonts.com/api/fonts/fontelico/fontelico.woff') format('woff'),
+	  url('http://weloveiconfonts.com/api/fonts/fontelico/fontelico.ttf') format('truetype'),
+	  url('http://weloveiconfonts.com/api/fonts/fontelico/fontelico.svg#fontelico') format('svg');
+	}
+}
+
+@if $use-maki {
+	@font-face {
+	  font-family: 'maki';
+	  font-style: 'normal';
+	  font-weight: 'normal';
+	  src: url('http://weloveiconfonts.com/api/fonts/maki/maki.eot');
+	  src: url('http://weloveiconfonts.com/api/fonts/maki/maki.eot?#iefix') format('eot'),
+	  url('http://weloveiconfonts.com/api/fonts/maki/maki.woff') format('woff'),
+	  url('http://weloveiconfonts.com/api/fonts/maki/maki.ttf') format('truetype'),
+	  url('http://weloveiconfonts.com/api/fonts/maki/maki.svg#maki') format('svg');
+	}
+}
+
+@if $use-openweb-icons {
+	@font-face {
+	  font-family: 'OpenWeb Icons';
+	  font-style: 'normal';
+	  font-weight: 'normal';
+	  src: url('http://weloveiconfonts.com/api/fonts/openwebicons/openwebicons.eot');
+	  src: url('http://weloveiconfonts.com/api/fonts/openwebicons/openwebicons.eot?#iefix') format('eot'),
+	  url('http://weloveiconfonts.com/api/fonts/openwebicons/openwebicons.woff') format('woff'),
+	  url('http://weloveiconfonts.com/api/fonts/openwebicons/openwebicons.ttf') format('truetype'),
+	  url('http://weloveiconfonts.com/api/fonts/openwebicons/openwebicons.svg#openweb_iconsregular') format('svg');
+	}
+}
+
+@if $use-typicons {
+	@font-face {
+	  font-family: 'Typicons';
+	  font-style: 'normal';
+	  font-weight: 'normal';
+	  src: url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.eot');
+	  src: url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.eot?#iefix') format('eot'),
+	  url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.woff') format('woff'),
+	  url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.ttf') format('truetype'),
+	  url('http://weloveiconfonts.com/api/fonts/typicons/typicons-regular-webfont.svg#TypiconsRegular') format('svg');
+	}
+}
+
+@if $use-zocial {
+	@font-face {
+	  font-family: 'zocial';
+	  font-style: 'normal';
+	  font-weight: 'normal';
+	  src: url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.eot');
+	  src: url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.eot?#iefix') format('eot'),
+	  url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.woff') format('woff'),
+	  url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.ttf') format('truetype'),
+	  url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.svg#zocialregular') format('svg');
+	}
+}
+
+
+
+@mixin icon-font($char: '\f013', $font: 'FontAwesome') {
+	display: inline-block;
+	font-family: $font;
+	content: "#{$char}";
+}

data/stylesheets/utilities/_media-queries.scss

@@ -0,0 +1,45 @@
+@mixin media($media-query){
+
+    @if $media-query == palm{
+
+        @media only screen and (max-width:$palm-end) { @content; }
+
+    }
+
+    @if $media-query == lap{
+
+        @media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; }
+
+    }
+
+    @if $media-query == lap-and-up{
+
+        @media only screen and (min-width:$lap-start) { @content; }
+
+    }
+
+    @if $media-query == portable{
+
+        @media only screen and (max-width:$lap-end) { @content; }
+
+    }
+
+    @if $media-query == desk{
+
+        @media only screen and (min-width:$desk-start) { @content; }
+
+    }
+
+    @if $media-query == desk-wide{
+
+        @media only screen and (min-width: $desk-wide-start) { @content; }
+
+    }
+
+    @if $media-query == all{
+
+        @content;
+
+    }
+
+}

data/stylesheets/utilities/_mixins.scss

@@ -0,0 +1,372 @@
+//
+// Mixins
+// --------------------------------------------------
+
+
+// UTILITY MIXINS
+// --------------------------------------------------
+
+// Clearfix
+// --------
+// For clearing floats like a boss h5bp.com/q
+@mixin clearfix {
+	*zoom: 1;
+	&:before,
+	&:after {
+		display: table;
+		content: "";
+		// Fixes Opera/contenteditable bug:
+		// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+		line-height: 0;
+	}
+	&:after {
+		clear: both;
+	}
+}
+
+// Webkit-style focus
+// ------------------
+@mixin tab-focus() {}
+
+// Center-align a block level element
+// ----------------------------------
+@mixin center-block() {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+
+// Sizing shortcuts
+// -------------------------
+@mixin size($height, $width) {
+	width: $width;
+	height: $height;
+}
+@mixin square($size) {
+	@include size($size, $size);
+}
+
+// Placeholder text
+// -------------------------
+@mixin placeholder($color: $gray) {
+	&:-moz-placeholder {
+		color: $color;
+	}
+	&:-ms-input-placeholder {
+		color: $color;
+	}
+	&::-webkit-input-placeholder {
+		color: $color;
+	}
+}
+
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+@mixin text-overflow() {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+
+@mixin hide-text {
+	color:            transparent;
+	font:             0/0 a;
+	text-shadow:      none;
+}
+
+// @mixin reset-filter() {
+//   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+// }
+
+
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+	@if type-of($position) == list {
+		$coordinates: $position;
+		$position: relative;
+	}
+
+	$top: nth($coordinates, 1);
+	$right: nth($coordinates, 2);
+	$bottom: nth($coordinates, 3);
+	$left: nth($coordinates, 4);
+
+	position: $position;
+
+	@if $top == auto {
+		top: $top;
+	}
+	@else if not(unitless($top)) {
+		top: $top;
+	}
+
+	@if $right == auto {
+		right: $right;
+	}
+	@else if not(unitless($right)) {
+		right: $right;
+	}
+
+	@if $bottom == auto {
+		bottom: $bottom;
+	}
+	@else if not(unitless($bottom)) {
+		bottom: $bottom;
+	}
+
+	@if $left == auto {
+		left: $left;
+	}
+	@else if not(unitless($left)) {
+		left: $left;
+	}
+}
+
+
+@mixin center ($width, $height: null) {
+	@include position(absolute, 50% 0 0 50%);
+	margin-left: -($width / 2);
+	@if $height { margin-top: -($height / 2); }
+	@else { margin-top: -($width / 2);  }
+}
+
+
+@mixin triangle ($size, $color, $direction) {
+	height: 0;
+	width: 0;
+
+	@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
+		border-color: transparent;
+		border-style: solid;
+		border-width: $size / 2;
+
+		@if $direction == up {
+			border-bottom-color: $color;
+
+		} @else if $direction == right {
+			border-left-color:   $color;
+
+		} @else if $direction == down {
+			border-top-color:    $color;
+
+		} @else if $direction == left {
+			border-right-color:  $color;
+		}
+	}
+
+	@else if ($direction == up-right) or ($direction == up-left) {
+		border-top: $size solid $color;
+
+		@if $direction == up-right {
+			border-left:  $size solid transparent;
+
+		} @else if $direction == up-left {
+			border-right: $size solid transparent;
+		}
+	}
+
+	@else if ($direction == down-right) or ($direction == down-left) {
+		border-bottom: $size solid $color;
+
+		@if $direction == down-right {
+			border-left:  $size solid transparent;
+
+		} @else if $direction == down-left {
+			border-right: $size solid transparent;
+		}
+	}
+}
+
+// For now only side triangles with border
+@mixin triangle_border($size, $color, $border-color, $border-width, $direction) {
+
+	// $border-width-fix: '';
+	$border-width-fix: '';
+
+	@if $border-width == 1px {
+		$border-width-fix: $border-width * 4;
+	} @else {
+		$border-width-fix: $border-width * 2;
+	}
+
+	$bg-size: $size + $border-width-fix;
+
+	&:before, &:after {
+		content: "";
+		display: block;
+		position: absolute;
+		top: 50%;
+
+		@if $direction == 'right' { left: -($border-width); }
+		@if $direction == 'left' { right: -($border-width); }
+	}
+
+	&:before {
+		@include triangle($size, $color, $direction);
+		margin-top: -($size / 2);
+		z-index: 2;
+	}
+
+	&:after {
+		@include triangle($bg-size, $border-color, $direction);
+		margin-top: -($bg-size / 2);
+		zoom: 1;
+	}
+}
+
+
+@mixin text-inset-shadow($bg: #fff, $textcolor: #054d4a, $contrast:  #f43059) {
+	$shadow: darken($textcolor, 30%);
+
+	color: rgba($textcolor, 0.8);
+	text-shadow: 1px 5px 7px $bg, 0 0 0 rgba($shadow,.8);
+	// ::-moz-selection, ::selection {
+	// 	background: $contrast;
+	// 	color: $bg;
+	// 	text-shadow: none;
+	// }
+}
+
+@mixin alpha-color($color: #fff, $alpha: .5, $attribute: background) {
+	@if $attribute == color {
+		color: $color;
+		color: rgba($color, $alpha);
+	} @else {
+		#{$attribute}-color: $color;
+		#{$attribute}-color: rgba($color, $alpha);
+	}
+}
+
+
+// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
+@mixin keyframes($name) {
+	// $original-prefix-for-webkit:    $prefix-for-webkit;
+	// $original-prefix-for-mozilla:   $prefix-for-mozilla;
+	// $original-prefix-for-opera:     $prefix-for-opera;
+	// $original-prefix-for-spec:      $prefix-for-spec;
+
+	// @if $original-prefix-for-webkit {
+	//   @include disable-prefix-for-all();
+	//   $prefix-for-webkit: true;
+	@-webkit-keyframes #{$name} {
+		@content;
+	}
+	// }
+	// @if $original-prefix-for-mozilla {
+	//   @include disable-prefix-for-all();
+	//   $prefix-for-mozilla: true;
+	@-moz-keyframes #{$name} {
+		@content;
+	}
+	// }
+	// @if $original-prefix-for-opera {
+	//   @include disable-prefix-for-all();
+	//   $prefix-for-opera: true;
+	@-o-keyframes #{$name} {
+		@content;
+	}
+	// }
+	// @if $original-prefix-for-spec {
+	//   @include disable-prefix-for-all();
+	//   $prefix-for-spec: true;
+	@keyframes #{$name} {
+		@content;
+	}
+	// }
+
+}
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// Horizontal dividers
+// -------------------------
+// Dividers (basically an hr) within dropdowns and nav lists
+@mixin nav-divider($top: #e5e5e5, $bottom: false) {
+	*width: 100%;
+
+	@if $bottom {
+		height: 2px;
+	} @else {
+		height: 1px;
+	}
+	// margin: (($base-line-height / 2) - 1) 0; // 8px 1px
+	// *margin: -5px 0 5px;
+	overflow: hidden;
+	background-color: $top;
+	@if $bottom { border-bottom: 1px solid $bottom; }
+}
+
+
+// Images
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+@mixin shadow-comicbook($padding: 5px, $color: #bbb, $size: 15px, $distance: 10px) {
+
+	$lightColor: lighten($color, 8);
+	$degree: $size/1px;
+
+	@include box-shadow(0 1px 3px $color);
+	border:5px solid #fff;
+	display: inline-block;
+	line-height: 0;
+	position: relative;
+
+	&:before,
+	&:after {
+		// border: 0;
+		background-color: $lightColor;
+		content: '';
+		z-index: -1;
+		position: absolute;
+		left: $distance;
+		bottom: $distance;
+		width: 70%;
+		height: 55%;
+		@include box-shadow(0 $size $size+1 $lightColor);
+		@include transform(skew(-15deg) rotate(-6deg));
+	}
+
+	&:after {
+		left: auto;
+		right: $distance+1;
+		@include transform(skew(15deg) rotate(6deg));
+
+	}
+}
+
+// GRID
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// @include columns( $cols, $cols-container: $total-columns, $omega: false,  $nth-omega: false, $remove-omega: false, $from: left, $media: all, $highlight-omega: false );
+
+@mixin columns (
+	$cols,
+	$cols-container: $total-columns,
+	$omega: false,
+	$nth-omega: false,
+	$remove-omega: false,
+	$from: left,
+	$media: all,
+	$highlight-omega: false
+	) {
+
+	@include media($media) {
+		$direction: left;
+
+		@if $from != left {
+			$direction: right;
+		}
+
+		@include span-columns($cols, $cols-container, $from: $direction);
+		@if $omega { @include omega($from: $direction); }
+		@if $nth-omega { @include nth-omega($nth-omega, $from: $direction); }
+		@if $remove-omega { @include remove-omega; }
+		// background: red;
+		@if $highlight-omega  {
+			@if $omega { background: blue; }
+			@if $nth-omega { &:nth-child(#{$nth-omega}) {background: blue;} }
+		}
+	}
+}

data/stylesheets/utilities/_retina-sprites.scss

@@ -0,0 +1,70 @@
+// @import "compass/utilities/sprites";         // Include compass sprite helpers
+// @import "compass/css3/background-size";      // Include helper to calc background size
+
+
+@mixin retina-sprite($name, $hover: false, $active: false) {
+  @include _retina-sprite($name, $sprites, $sprites2x, $hover, $active);
+}
+
+// The general purpose retina sprite mixin.
+  //
+  //    @include retina-sprite(name, $spritemap1, $spritemap2)
+  //    @include retina-sprite(name, $spritemap1, $spritemap2[, $dimensions: true, $pad: 0])
+  //
+  //    If `dimensions` is true, then width/height will also be set.
+  //
+  //    if `pad` is non-zero, then that's how much padding the element will have (requires
+  //    $spacing on the sprite maps). Great for iPhone interfaces to make hit areas bigger.
+  //
+@mixin _retina-sprite($name, $sprites, $sprites2x, $hover, $active, $dimensions: true, $pad: 0) {  
+  @if $dimensions == true {
+    @include sprite-dimensions($sprites, $name);
+  }
+  background-image: sprite-url($sprites);
+  background-position: sprite-position($sprites, $name, -$pad, -$pad);
+  background-repeat: no-repeat;
+
+  @if $hover == true {
+    $name_hover: $name + _hover;
+    &:hover {
+      background-position: sprite-position($sprites, $name_hover, -$pad, -$pad);
+    }
+  }
+  @if $active == true {
+    $name_active: $name + _active;
+    &:active {
+      background-position: sprite-position($sprites, $name_active, -$pad, -$pad);
+    }
+  }
+  
+  @if $pad > 0 {
+    padding: $pad;
+  }
+  
+  @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
+    & {
+      $pos: sprite-position($sprites2x, $name, -$pad * 2, -$pad * 2);
+      background-image: sprite-url($sprites2x);
+      background-position: nth($pos, 1) nth($pos, 2) / 2;
+      @include background-size(ceil(image-width(sprite-path($sprites2x)) / 2) auto);
+      //  sprite-path() returns the path of the generated sprite sheet, which
+      //  image-width() calculates the width of. the ceil() is in place in case
+      //  you have sprites that have an odd-number of pixels in width
+      
+      @if $hover == true {
+        $name_hover: $name + _hover;    // create myButton_hover and assign it
+        &:hover{
+          $pos: sprite-position($sprites2x, $name_hover, -$pad * 2, -$pad * 2);
+          background-position: nth($pos, 1) nth($pos, 2) / 2;
+        }
+      }
+      @if $active == true {
+        $name_active: $name + _active;    // create myButton_active and assign it
+        &:active{
+          $pos: sprite-position($sprites2x, $name_active, -$pad * 2, -$pad * 2);
+          background-position: nth($pos, 1) nth($pos, 2) / 2;
+        }
+      }
+    }
+  }
+}

data/stylesheets/utilities/_sprites.scss

@@ -0,0 +1,26 @@
+.s {
+	// position:relative;
+	content: "";
+	// top:-1px;
+	display: inline-block;
+	overflow:hidden;
+	vertical-align:middle;
+	text-align:center;
+	font-style:normal;
+	zoom:1;
+	*text-indent:-9999px;
+
+	// &:before{
+	// 	display:block;
+	// 	width:0;
+	// 	height:100%;
+	// 	content:"";
+	// }
+}
+
+@include all-s-sprites(true);
+
+@mixin sprite($name) {
+	@extend .s;
+	@extend .s-#{$name};
+}

data/templates/project/manifest.rb

@@ -0,0 +1,2 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'screen.sass', :media => 'screen, projection'

data/templates/project/screen.scss

@@ -0,0 +1,2 @@
+// This is where you put the contents of the main stylesheet for the user's project.
+// It should import your sass stylesheets and demonstrate how to use them.