Created
May 19, 2011 02:23
-
-
Save brentkirby/980053 to your computer and use it in GitHub Desktop.
Compass/Blueprint/Sprockets Starter Files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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. | |
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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; } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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"; | |
| //////////////////////////////////////////////// |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //////////////////////////////////////////////// | |
| // 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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment