Compass/Blueprint/Sprockets Starter Files

_compat.scss

/*
	Include browser-specific css here. This file should be included in the main css file as well as ie.css. 
	This way PIE can apply itself to any css3 items that have been used.
	add @import pie_option; to allow SASS to toggle it on for IE and off for everyone else.
*/

_defaults.scss

/*
	A few layout defaults. Sets up buttons, forms, flash/notification messages and reset. This file should only be 		
	imported into the main css file.
*/

// Reset 
@import "blueprint/reset";

///////////////////////////////////////////////
// Setup typography
///////////////////////////////////////////////

@include blueprint-typography;

///////////////////////////////////////////////
// Setup forms
///////////////////////////////////////////////

form{ 	@include blueprint-form-borders; 
		@include blueprint-form-layout; 
	
	ol.split{ display:block; clear:both; margin:-.5em 0px; @include pie-clearfix;		
		li{ 
			float:left; 
			margin:0px 1em 0px 0px; 
			vertical-align:middle;
			
			label, 
			input[type=text], 
			input[type=password], 
			input[type=email]{ display:block; }			
			select{ margin:.75em 0px; }			
		}
	}
	
	ol{ list-style-type:none !important; margin:0px; padding:0px; padding-right:10px;		
		li{ padding:.5em 0px;			
			&.clear{ clear:both; }
			&.buttons{ clear:both; padding:.25em 0px 0px 0px; }
			&.inline label{ display:inline !important; }
			&.multifield{
				input, select{ display:inline !important; }
			}
			
			ol{ @extend ol.split; }
		}
		
		label{ display:block; }
	}
	
	ol.inline li.label{ display:inline !important; }
	label abbr{ outline:none; border:none; color:red; }
	input[type=text], 
	input[type=password], 
	input[type=email], 
	textarea{ 
		@include border-radius(2px); padding:.65em;
		&:focus{ outline:none; border-color:#333; }
	}
	select{ border-style:solid !important;
		&:focus{ outline:none; }
	}
	select[multiple=multiple]{ 
		@include border-radius(2px); border-color:#ccc; 
	}
	input[type=checkbox], 
	input[type=radio]{ 
		display:inline; margin-right:1em; vertical-align:baseline; width:auto; }

	span.field_with_errors{ padding:0px; line-height:1; margin:0px; position:relative;		
		input[type=text],
		input[type=password], 
		input[type=email], 
		textarea{ 
			border:1px solid $error-border-color; background:$error-bg-color; margin-bottom:0px;
		}		
		span.error_for_field{ 
			line-height:.75em; font-size:.9em; font-style:italic; color:$error-color; display:block; 
		}
	}
}

///////////////////////////////////////////////
// Setup buttons
///////////////////////////////////////////////


@import "blueprint/buttons";
$blueprint-button-font-family: $blueprint-font-family;

a.button{ @include anchor-button; }
button.button{ @include button-button; }

.button{ @include border-radius(5px); @include pie_option; padding:0px 1.5em; margin:0px; text-decoration:none; 
		 @include button-colors; @include button-active-colors; @include button-hover-colors;
	&:hover{  }
	&:active{  }
}
a.button, button.button{ @extend .button; }


////////////////////////////////////
// Notifications
////////////////////////////////////
div.error, div.notice, div.success, div.alert{ padding: .8em; margin-bottom: 1em; border-width:.17em; border-style:solid; position:relative; }
.error, .alert { background-color:$error-bg-color; border-color:$error-border-color; color:$error-color; }
.notice        { background-color:$info-bg-color; border-color:$info-border-color; color:$info-color; }
.success       { background-color:$success-bg-color; border-color:$success-border-color; color:$success-color; }

/*div.flash_message{ @include border-radius(5px); background-repeat:no-repeat; background-position:10px 45%; padding-left:35px;
	text-align:left; 
	span{ position:absolute; top:30%; right:1em; cursor:pointer; cursor:hand; }
}*/
div.flash_message{ position:fixed; top:0; left:0; height:40px; line-height:45px; font-size:1.3em; border-left:none; border-right:none; border-top:none;
	width:100%; z-index:2000; padding:0 !important; text-align:center; border-bottom-width:2px; cursor:pointer; cursor:hand;
	span{ font-size:.8em; font-style:italic; padding-left:1em; }
}

_global.scss

/*
	Include this file within each SCSS file to have access to libraries and variables. By itself this import adds
	no additional css so it can be included cleanly.
*/

// Debug enables grids
$debug: false !default;

////////////////////////////////////////////////
// Import libraries
////////////////////////////////////////////////
@import "imports";
@import "setup";
@import "mixins";
////////////////////////////////////////////////

_imports.scss

/*
	Sets up any compass/blueprint imports. This file adds no CSS and can be included in every file.
*/

////////////////////////////////////////////////
// Import Blueprint defaults
////////////////////////////////////////////////
@import "blueprint/grid";
@import "blueprint/typography";
@import "blueprint/form";
@import "blueprint/interaction";
@import "blueprint/debug";

/////////////////////////////////////////////////
// Import CSS3 Goodness
/////////////////////////////////////////////////
@import "compass/utilities/sprites";
@import "compass/css3/text-shadow";
@import "compass/css3/box-shadow";
@import "compass/css3/border-radius";
@import "compass/css3/gradient";
@import "compass/css3/font-face";
@import "compass/css3/pie";
@import "compass/css3/opacity";
@import "compass/utilities/general/min";
@import "compass/utilities/lists";
@import "compass/typography/vertical_rhythm";

_mixins.scss

/*
	Some useful mixins
*/

@mixin pie_option{
	@if $experimental-support-for-pie{ @include pie; }
}

@mixin gradient($start:$blue, $end:false, $darken:6%){
	@if not $end{ $end:darken($start, $darken); }
	@include background-image(linear-gradient($start, $end));
}


@mixin gradient($start:$blue, $end:false, $darken:6%){
	@if not $end{ $end:darken($start, $darken); }
	@include background-image(linear-gradient($start, $end));
}

// Creates CSS3 gradient buttons
@mixin gradient_button($start:$blue, $end:false, $darken:6%){
	@if not $end{ $end:darken($start, $darken); }
	@include gradient($start, $end, $darken); @include single-text-shadow(darken($end, ($darken*2)));
	&:active{
		background:darken($end, 10%) !important; @include single-text-shadow(darken($start, ($darken*2)));
	}
	&:hover{
		$start:lighten($start, 7%);
		$end:lighten($end, 7%);
		@include gradient($start, $end, $darken); @include single-text-shadow(darken($end, ($darken*2))); 
	}	
	@include pie_option;
}

_setup.scss

////////////////////////////////////////////////
// Blueprint grid setup.
////////////////////////////////////////////////

$blueprint-container-size: 970px;
$blueprint-grid-margin: 10px;
$blueprint-grid-width:30px;
//$blueprint-grid-columns: 24;
//$blueprint-container-size: 960px;
//$blueprint-grid-margin: 10px;
//$blueprint-grid-width: 30;//($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin;

// Grid image generation
@import 'compass/layout/grid-background';
$grid-background-column-color:#eef2f9;
$grid-background-baseline-color:rgba(0,0,0,0.15);
$grid-background-gutter-color:#fff;
$grid-background-offset:10px;

////////////////////////////////////////////////
// IE Support (enable in IE.scss)
////////////////////////////////////////////////
$experimental-support-for-pie: false;
$legacy-support-for-ie6: false;

////////////////////////////////////////////////
// CSS3 Text Shadow
////////////////////////////////////////////////
$default-text-shadow-color: black;
$default-text-shadow-h-offset: 1px;
$default-text-shadow-v-offset: 1px;
$default-text-shadow-blur: 1px;
$default-border-radius: 10px;

////////////////////////////////////////////////
// Blueprint typography setup.
////////////////////////////////////////////////
$font-color: #333333;

// Links
$link-color: #0066cc;
$link-hover-color: #0099ff;
$link-focus-color: $link-hover-color;
$link-active-color: lighten(adjust-hue($link-color, 75deg), 10%);
$link-visited-color: darken($link-color, 10%);

// Notifications
$feedback-border-color: #dddddd;
$success-color: #3e5a3d;
$success-bg-color: #ddf5c4;
$success-border-color: #a7da74;
$notice-color: #514721;
$notice-bg-color: #fff6bf;
$notice-border-color: #ffd324;
$info-color: #be9109;
$info-bg-color: #fbf1d2;
$info-border-color: #ffcc33;
$error-color: #bd132a;
$error-bg-color: #fde0e4;
$error-border-color: #E41D38;

////////////////////////////////////////////////
// Blueprint table setup.
////////////////////////////////////////////////
$blueprint-table-header-color: #c3d9ff;
$blueprint-table-stripe-color: #e5ecf9;

////////////////////////////////////////////////
// Blueprint button setup.
////////////////////////////////////////////////
$blueprint-button-font-family:$blueprint-font-family;
$blueprint-button-background-color:#333;
$blueprint-button-border-color:darken($blueprint-button-background-color, 10%);
$blueprint-button-font-color:#fff;
$blueprint-button-hover-background-color:#555;
$blueprint-button-hover-border-color:darken($blueprint-button-hover-background-color, 10%);
$blueprint-button-hover-font-color:$blueprint-button-font-color;
$blueprint-button-active-background-color:#444;
$blueprint-button-active-border-color:darken($blueprint-button-active-background-color, 10%);
$blueprint-button-active-font-color:white;