[Blueprint] Make the primary blueprint mixins easier to use by allowing them to be nested when passing true as the first argument.

The old approach of passing a selector as the first argument is now deprecated in favor of a simple flag to indicate nesting or not.
This commit is contained in:
Chris Eppstein 2009-07-11 11:08:04 -07:00
parent d40f72acbb
commit 24d4ff4146
8 changed files with 121 additions and 65 deletions

View File

@ -1,24 +1,30 @@
// The blueprint IE mixins should be mixed into a stylesheet that gets conditionally included
// into IE like so:
// <!--[if IE]><link rel="stylesheet" href="ie.css"
// <!--[if lt IE 8]><link rel="stylesheet" href="ie.css"
// type="text/css" media="screen, projection"><![endif]-->
// 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")
@if !body_selector == true
+blueprint-ie-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

View File

@ -1,22 +1,29 @@
@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")
@if !body_selector == true
+blueprint-print-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

View File

@ -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

View File

@ -70,10 +70,28 @@
: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")
@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

View File

@ -6,22 +6,27 @@
!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")
@if !body_selector == true
+blueprint-typography-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

View File

@ -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

View File

@ -1,3 +1,8 @@
@import blueprint.sass
+blueprint-print
// 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)

View File

@ -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