Starter files for compass/blueprint

_base.scss

/*
	Sets up any compass imports, as well as variables used throughout css files. This way all files can access the libraries, but without 
	adding additional code to every css file.
*/

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

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

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

/////////////////////////////////////////////////
// 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";

$experimental-support-for-pie: false; // Enable this in ie.css so mixins can enable pie.
$legacy-support-for-ie6: false;

$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;

// Default blueprint colors (defaults listed)
$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;

/*// Table colors
$blueprint-table-header-color: #c3d9ff;
$blueprint-table-stripe-color: #e5ecf9;*/

// Button Defaults
$blueprint-button-background-color:#f5f5f5;
$blueprint-button-font-family:$blueprint-font-family;
$blueprint-button-border-color:#dedede;
$blueprint-button-background-color:#f5f5f5;
$blueprint-button-font-color:#565656;
$blueprint-button-hover-border-color:#c2e1ef;
$blueprint-button-hover-background-color:#dff4ff;
$blueprint-button-hover-font-color:#336699;
$blueprint-button-active-border-color:#6299c5;
$blueprint-button-active-background-color:#6299c5;
$blueprint-button-active-font-color:white;

_defaults.scss

/*
	Defaults file for layouts, sets up the grid, forms, and typography. Used as a separate file so only css files which 
	manage layouts include the extra code.
*/
// Import libraries
@import "includes/base";
@import "includes/mixins";
// Reset 
@import "blueprint/reset";

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

@include blueprint-typography;

///////////////////////////////////////////////
// Setup forms and buttons
///////////////////////////////////////////////

form{ @include blueprint-form-borders; @include blueprint-form-layout; 
	ol.split{ display:block; clear:both; margin:-.5em 0; @include pie-clearfix;
		li{ float:left; margin:0 1em 0 0; vertical-align:middle;
			label, input[type=text], input[type=password], input[type=email]{ display:block; }
			select{ margin:.75em 0; }
		}
	}
	ol{ list-style-type:none !important; margin:0; padding:0; padding-right:10px;
		li{ padding:.5em 0;
			ol{ @extend ol.split; }			
		}
		li.clear{ clear:both; }
		li.buttons{ clear:both; padding:1em 0; }
		li.inline label{ display:inline !important; }
		li.multifield{
			input, select{ display:inline !important; }
		}
		label{ display:block; }
	}
	label abbr{ outline:none; border:none; color:red; }
	input[type=text], input[type=password], input[type=email], textarea{ @include border-radius(5px); padding:.75em;
		&:focus{ outline:none;}
	}
	select{ border-style:solid; 
		&:focus{ outline:none; }
	}
	input[type=checkbox], input[type=radio]{ display:inline; margin-right:1em; vertical-align:baseline; width:auto; }
	label abbr{ border:none; outline:none; color:red; }
	span.field_with_errors{ padding:0; line-height:1; margin:0; display:inline-block;
		input[type=text],input[type=password], textarea{ border:1px solid $error-border-color; background:$error-bg-color; margin-bottom:0; }
		span.errors_for_field{ color:$error-color; line-height:1; font-size:.9em; font-style:italic; }
	}
}

a.button{ @include anchor-button; }
button.button{ @include button-button; }
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; background-image:url(/images/icons/error.png); }
.notice        { background-color:$info-bg-color; border-color:$info-border-color; color:$info-color; background-image:url(/images/icons/notice.png); }
.success       { background-color:$success-bg-color; border-color:$success-border-color; color:$success-color; background-image:url(/images/icons/success.png); }

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; }
}

_mixins.scss

@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));
}

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

@mixin color_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;
}

.button{ border:0px !important; @include border-radius(5px); @include pie_option; color:white;
	span{ @include inline-block; padding:.4em 1em; }
}

@mixin iconSquare($size:32){
	display:block; width:#{$size}px; height:#{$size}px; text-indent:-9999em;
}

@mixin icon32($row:1, $bgx:0px, $offset:0px){
	background-image:url('/images/icons/icon32x32.png'); background-repeat:no-repeat;
	$y: (($row - 1) * -32px - ($row - 1)) + $offset;
	background-position:$bgx $y;
}

@mixin icon24($row:1, $bgx:0px, $offset:0px){
	background-image:url('/images/icons/icon24x24.png'); background-repeat:no-repeat;
	$y: ($row - 1) * -24px;
	background-position:$bgx $y;
}

ie.scss

/*
	IE css. Because IE sucks.
*/

@import "includes/base";
/////////////////////////////////////
// Disable browser specific items in 
// css since this is an ie only stylesheet
/////////////////////////////////////
$experimental-support-for-mozilla:false;
$experimental-support-for-webkit:false;
$experimental-support-for-opera:false; 
$experimental-support-for-khtml:false;
/////////////////////////////////////
// PIE Support
/////////////////////////////////////
$experimental-support-for-pie:true;
$pie-behavior: url("/stylesheets/PIE.htc");
@import "includes/mixins";

button.button{ @include background-image(linear-gradient($blue, darken($blue, 10%))); }

screen.scss

@import 'includes/defaults';