diff --git a/compass/ie.scss b/compass/ie.scss new file mode 100644 index 0000000..a867281 --- /dev/null +++ b/compass/ie.scss @@ -0,0 +1,16 @@ +@import "blueprint"; + +// To generate css equivalent to the blueprint css but with your configuration applied, uncomment: +// +blueprint-ie + +//Recommended Blueprint configuration with scoping and semantic layout: +body.bp { + @include blueprint-ie(true); + // Note: Blueprint centers text to fix IE6 container centering. + // This means all your texts will be centered under all version of IE by default. + // If your container does not have the .container class, don't forget to restore + // the correct behavior to your main container (but not the body tag!) + // Example: + // .my-container + // text-align: left +} diff --git a/compass/partials/_base.scss b/compass/partials/_base.scss new file mode 100644 index 0000000..fb77f7b --- /dev/null +++ b/compass/partials/_base.scss @@ -0,0 +1,10 @@ +// Here is where you can define your constants for your application and to configure the blueprint framework. +// Feel free to delete these if you want keep the defaults: + +$blueprint-grid-columns: 24; +$blueprint-container-size: 950px; +$blueprint-grid-margin: 10px; + +// Use this to calculate the width based on the total width. +// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you. +$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin; diff --git a/compass/partials/_form.scss b/compass/partials/_form.scss new file mode 100644 index 0000000..8cfade0 --- /dev/null +++ b/compass/partials/_form.scss @@ -0,0 +1,6 @@ +// Only apply the blueprint form styles to forms with +// a class of "bp". This makes it easier to style +// forms from scratch if you need to. + +form.bp { + @include blueprint-form; } diff --git a/compass/partials/_page.scss b/compass/partials/_page.scss new file mode 100644 index 0000000..574db67 --- /dev/null +++ b/compass/partials/_page.scss @@ -0,0 +1,16 @@ +// Import the non-default scaffolding module to help us get started. +@import "blueprint/scaffolding"; + +// This configuration will only apply the +// blueprint styles to pages with a body class of "bp" +// This makes it easier to have pages without blueprint styles +// when you're using a single/combined stylesheet. + +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 + @include blueprint-scaffolding; } diff --git a/compass/partials/_two_col.scss b/compass/partials/_two_col.scss new file mode 100644 index 0000000..3388747 --- /dev/null +++ b/compass/partials/_two_col.scss @@ -0,0 +1,38 @@ +// Page layout can be done using mixins applied to your semantic classes and IDs +// For instance this layout defines a two column layout on pages with +// a body class of "two-col". +// +// The markup would look like: +//
+// +// +//
+// +//
+// +// and the layout would look like: +// +------------------------+ +// | #header | +// +--------+---------------+ +// | | | +// |#sidebar| #content | +// | | | +// +------------------------+ +// | #footer | +// +--------+---------------+ + +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); } } diff --git a/compass/print.scss b/compass/print.scss new file mode 100644 index 0000000..0677297 --- /dev/null +++ b/compass/print.scss @@ -0,0 +1,5 @@ +@import "blueprint"; + +//Recommended Blueprint configuration with scoping and semantic layout: +body.bp { + @include blueprint-print(true); } diff --git a/compass/screen.scss b/compass/screen.scss new file mode 100644 index 0000000..131d749 --- /dev/null +++ b/compass/screen.scss @@ -0,0 +1,13 @@ +// 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"; + +// Combine the partials into a single screen stylesheet. +@import "partials/page"; +@import "partials/form"; +@import "partials/two_col"; diff --git a/content/html/en/index.md b/content/html/en/index.md index 6d02f97..b0af1cf 100644 --- a/content/html/en/index.md +++ b/content/html/en/index.md @@ -30,7 +30,7 @@ $('document').ready(function() { <% end %> <% content_for :title do %> - YPassword» + YPassword» <% end %>