[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:
parent
d40f72acbb
commit
24d4ff4146
@ -1,27 +1,33 @@
|
||||
// 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")
|
||||
#{!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
|
||||
|
@ -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.
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
||||
|
@ -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)
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user