Created
April 27, 2011 21:30
-
-
Save solars/945261 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
// This import applies a global reset to any page that imports this stylesheet. | |
@import "blueprint/reset"; | |
// To configure blueprint, edit the partials/base.sass file. | |
@import "partials/base"; | |
// Import all the default blueprint modules so that we can access their mixins. | |
@import "blueprint"; | |
// Import the non-default scaffolding module. | |
@import "blueprint/scaffolding"; | |
@import "blueprint/grid"; | |
// To generate css equivalent to the blueprint css but with your | |
// configuration applied, uncomment: | |
// @include blueprint | |
// If you are doing a lot of stylesheet concatenation, it is suggested | |
// that you scope your blueprint styles, so that you can better control | |
// what pages use blueprint when stylesheets are concatenated together. | |
body.bp { | |
@include blueprint-typography(true); | |
@include blueprint-utilities; | |
@include blueprint-debug; | |
@include blueprint-interaction; | |
// Remove the scaffolding when you're ready to start doing visual design. | |
// Or leave it in if you're happy with how blueprint looks out-of-the-box | |
} | |
form.bp { | |
@include blueprint-form; | |
// You'll probably want to remove the scaffolding once you start styling your site. | |
@include blueprint-scaffolding; } | |
// Page layout can be done using mixins applied to your semantic classes and IDs: | |
body.two-col { | |
#container { | |
@include container; } | |
#header, #footer { | |
@include column($blueprint-grid-columns); } | |
#sidebar { | |
// One third of the grid columns, rounding down. With 24 cols, this is 8. | |
$sidebar-columns: floor($blueprint-grid-columns / 3); | |
@include column($sidebar-columns); } | |
#content { | |
// Two thirds of the grid columns, rounding up. | |
// With 24 cols, this is 16. | |
$content-columns: ceil(2 * $blueprint-grid-columns / 3); | |
// true means it's the last column in the row | |
@include column($content-columns, true); } } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment