diff --git a/frameworks/blueprint/stylesheets/blueprint/_ie.sass b/frameworks/blueprint/stylesheets/blueprint/_ie.sass index 9421d908..13db8a22 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_ie.sass +++ b/frameworks/blueprint/stylesheets/blueprint/_ie.sass @@ -1,27 +1,33 @@ // The blueprint IE mixins should be mixed into a stylesheet that gets conditionally included // into IE like so: -// -// The +blueprint-ie mixin must be mixed into the top level of your stylesheet. -// However, you can customize the body selector if you wish to control the scope -// of this mixin. Examples: -// Apply to any page including the stylesheet: -// +blueprint-ie -// Scoped by a single presentational body class: -// +blueprint-ie("body.blueprint") -// Semantically: -// +blueprint-ie("body#page-1, body#page-2, body.a-special-page-type") -// Alternatively, you can use the +blueprint-ie-body and +blueprint-ie-defaults -// mixins to construct your own semantic style rules. +// Usage examples: +// As a top-level mixin, apply to any page that includes the stylesheet: +// +blueprint-ie +// Scoped by a presentational class: +// body.blueprint +// +blueprint-ie(true) +// Scoped by semantic selectors: +// body#page-1, body#page-2, body.a-special-page-type +// +blueprint-ie(true) +// Deprecated: +// You can pass the body selector as the first argument when used as a top-level mixin +// +blueprint-ie("body#page-1, body#page-2, body.a-special-page-type") =blueprint-ie(!body_selector = "body") - #{!body_selector} + @if !body_selector == true +blueprint-ie-body - @if !body_selector != "body" - +blueprint-ie-defaults - @if !body_selector == "body" +blueprint-ie-defaults + @else + #{!body_selector} + +blueprint-ie-body + @if !body_selector != "body" + @debug "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint-ie, pass true as the first argument and mix it into #{!body_selector}." + +blueprint-ie-defaults + @if !body_selector == "body" + +blueprint-ie-defaults =blueprint-ie-body :text-align center diff --git a/frameworks/blueprint/stylesheets/blueprint/_print.sass b/frameworks/blueprint/stylesheets/blueprint/_print.sass index d147bf7a..7726339e 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_print.sass +++ b/frameworks/blueprint/stylesheets/blueprint/_print.sass @@ -1,25 +1,32 @@ @import modules/typography.sass @import compass/utilities/general/float.sass -// The +blueprint-print mixin must be mixed into the top level of your stylesheet. -// However, you can customize the body selector if you wish to control the scope -// of this mixin. Examples: -// Apply to any page including the stylesheet: -// +blueprint-print -// Scoped by a single presentational body class: -// +blueprint-print("body.blueprint") -// Semantically: -// +blueprint-print("body#page-1, body#page-2, body.a-special-page-type") -// Alternatively, you can use the +blueprint-print-body and +blueprint-print-defaults -// mixins to construct your own semantic style rules. + +// Usage examples: +// As a top-level mixin, apply to any page that includes the stylesheet: +// +blueprint-print +// Scoped by a presentational class: +// body.blueprint +// +blueprint-print(true) +// Scoped by semantic selectors: +// body#page-1, body#page-2, body.a-special-page-type +// +blueprint-print(true) +// Deprecated: +// You can pass the body selector as the first argument when used as a top-level mixin +// +blueprint-print("body#page-1, body#page-2, body.a-special-page-type") =blueprint-print(!body_selector = "body") - #{!body_selector} + @if !body_selector == true +blueprint-print-body - @if !body_selector != "body" - +blueprint-print-defaults - @if !body_selector == "body" +blueprint-print-defaults + @else + #{!body_selector} + +blueprint-print-body + @if !body_selector != "body" + @debug "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint-print, pass true as the first argument and mix it into #{!body_selector}." + +blueprint-print-defaults + @if !body_selector == "body" + +blueprint-print-defaults // This style is in blueprint, but I think it's annoying and it doesn't work in all browsers. // Feel free to mix it into anchors where you want it. diff --git a/frameworks/blueprint/stylesheets/blueprint/_screen.sass b/frameworks/blueprint/stylesheets/blueprint/_screen.sass index 15762552..ce3509ea 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_screen.sass +++ b/frameworks/blueprint/stylesheets/blueprint/_screen.sass @@ -6,7 +6,21 @@ @import modules/interaction.sass @import modules/debug.sass +// Usage examples: +// As a top-level mixin, apply to any page that includes the stylesheet: +// +blueprint +// Scoped by a presentational class: +// body.blueprint +// +blueprint(true) +// Scoped by semantic selectors: +// body#page-1, body#page-2, body.a-special-page-type +// +blueprint(true) +// Deprecated: +// You can pass the body selector as the first argument when used as a top-level mixin +// +blueprint("body#page-1, body#page-2, body.a-special-page-type") =blueprint(!body_selector = "body") + @if !body_selector != "body" + @debug "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint, pass true as the first argument and mix it into #{!body_selector}." +blueprint-typography(!body_selector) +blueprint-utilities +blueprint-grid diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass index 1efaa2dc..5c4599a3 100644 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_rtl.sass @@ -70,14 +70,32 @@ :margin-left= (!blueprint_grid_width - 2 * !blueprint_grid_margin)/2 :border-left 1px solid #eee +// Usage examples: +// As a top-level mixin, apply to any page that includes the stylesheet: +// +rtl-typography +// Scoped by a presentational class: +// body.blueprint +// +rtl-typography(true) +// Scoped by semantic selectors: +// body#page-1, body#page-2, body.a-special-page-type +// +rtl-typography(true) +// Deprecated: +// You can pass the body selector as the first argument when used as a top-level mixin +// +rtl-typography("body#page-1, body#page-2, body.a-special-page-type") =rtl-typography(!body_selector = "body") - html #{!body_selector} - :font-family Arial, sans-serif - @if !body_selector != "body" - +rtl-typography-defaults - @if !body_selector == "body" - body - +rtl-typography-defaults + @if !body_selector == true + html & + :font-family Arial, sans-serif + +rtl-typography-defaults + @else + html #{!body_selector} + :font-family Arial, sans-serif + @if !body_selector != "body" + @debug "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +rtl-typography, pass true as the first argument and mix it into #{!body_selector}." + +rtl-typography-defaults + @if !body_selector == "body" + body + +rtl-typography-defaults =rtl-typography-defaults h1, h2, h3, h4, h5, h6 diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass index bb11783e..049fd143 100644 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass @@ -6,25 +6,30 @@ !blueprint_fixed_font_family ||= "'andale mono', 'lucida console', monospace" !blueprint_font_size ||= 12px -// The +blueprint-typography mixin must be mixed into the top level of your stylesheet. -// However, you can customize the body selector if you wish to control the scope -// of this mixin. Examples: -// Apply to any page including the stylesheet: +// Usage examples: +// As a top-level mixin, apply to any page that includes the stylesheet: // +blueprint-typography -// Scoped by a single presentational body class: -// +blueprint-typography("body.blueprint") -// Semantically: +// Scoped by a presentational class: +// body.blueprint +// +blueprint-typography(true) +// Scoped by semantic selectors: +// body#page-1, body#page-2, body.a-special-page-type +// +blueprint-typography(true) +// Deprecated: +// You can pass the body selector as the first argument when used as a top-level mixin // +blueprint-typography("body#page-1, body#page-2, body.a-special-page-type") -// Alternatively, you can use the +blueprint-typography-body and +blueprint-typography-defaults -// mixins to construct your own semantic style rules. - =blueprint-typography(!body_selector = "body") - #{!body_selector} + @if !body_selector == true +blueprint-typography-body - @if !body_selector != "body" - +blueprint-typography-defaults - @if !body_selector == "body" +blueprint-typography-defaults + @else + #{!body_selector} + +blueprint-typography-body + @if !body_selector != "body" + @debug "[DEPRECATED] To specify a the selector \"#{!body_selector}\" to +blueprint-typography, pass true as the first argument and mix it into #{!body_selector}." + +blueprint-typography-defaults + @if !body_selector == "body" + +blueprint-typography-defaults =normal-text :font-family= !blueprint_font_family diff --git a/frameworks/blueprint/templates/project/ie.sass b/frameworks/blueprint/templates/project/ie.sass index fad09158..1ba6fd06 100644 --- a/frameworks/blueprint/templates/project/ie.sass +++ b/frameworks/blueprint/templates/project/ie.sass @@ -1,15 +1,16 @@ @import blueprint.sass -+blueprint-ie +// To generate css equivalent to the blueprint css but with your configuration applied, uncomment: +// +blueprint-ie -// Note : -// -// Compass will center text to fix IE6 container centering. -// This means all your texts will be centered under all version of IE by default. -// Please don't forget to restore the correct behavior to your main container (but not the body tag!) -// -// Example : -// -// .container, .footer -// :text-align left +//Recommended Blueprint configuration with scoping and semantic layout: +body.bp + +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/frameworks/blueprint/templates/project/print.sass b/frameworks/blueprint/templates/project/print.sass index 8e5d49d8..e3727d9e 100644 --- a/frameworks/blueprint/templates/project/print.sass +++ b/frameworks/blueprint/templates/project/print.sass @@ -1,3 +1,8 @@ @import blueprint.sass -+blueprint-print \ No newline at end of file +// To generate css equivalent to the blueprint css but with your configuration applied, uncomment: +// +blueprint-print + +//Recommended Blueprint configuration with scoping and semantic layout: +body.bp + +blueprint-print(true) \ No newline at end of file diff --git a/frameworks/blueprint/templates/project/screen.sass b/frameworks/blueprint/templates/project/screen.sass index e3588dcd..d3d9be68 100644 --- a/frameworks/blueprint/templates/project/screen.sass +++ b/frameworks/blueprint/templates/project/screen.sass @@ -11,9 +11,9 @@ // +blueprint //Recommended Blueprint configuration with scoping and semantic layout: -+blueprint-typography("body.bp") +blueprint-scaffolding("body.bp") body.bp + +blueprint-typography(true) +blueprint-utilities +blueprint-debug +blueprint-interaction