From 3100476ff5fef5cd2d62363223ec24326c9389be Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sat, 6 Dec 2008 13:41:37 -0800 Subject: [PATCH] Coding spree to clean up the blueprint stylesheets and make them more similar to blueprint-css, more configurable, and more consistent. Breakdown of changes: === Remove the body scope that is unnecessarily added to many blueprint classes due to the way the mixins were constructed and used. Blueprint mixins that operate on the body tag now follow a pattern where they take the body selector as an argument and must always be mixed into the top level of a stylesheet. The classes will be scoped whenever the selector is not a simple "body" selector which is the default. Mixins affected: +blueprint-ie, +blueprint-print, +blueprint-typography, and +blueprint-scaffolding. All of these mixins use corresponding +[mixin]-body and +[mixin]-defaults mixins in their implementations that you can use directly if you feel constrained by the requirement to mix into the top-level. === Made all configurable constants possible to override in a base stylesheet using conditional assignment. Moved many colors that were still hard coded to the colors.sass module so they can be overridden. === Restored some blueprint defaults even though I didn't like them. With the exception of the blueprint link urls which are now available as a mixin called +blueprint-show-link-urls (they used to just be commented out.) === Grid constants have been renamed in both the grid and liquid grid modules. These constants are now conditionally assigned to make the grid easily configured. === The liquid grid now uses the compass clearfix. === moved the primary mixin for a module (where one exists) to the top of the file for clarity of readers. === blueprint grid classes are now appropriately scoped under the .container class. --- .../blueprint_default/stylesheets/ie.sass | 3 +- .../blueprint_default/stylesheets/print.sass | 3 +- .../blueprint_plugins/stylesheets/ie.sass | 3 +- .../blueprint_plugins/stylesheets/print.sass | 3 +- examples/blueprint_scoped/stylesheets/ie.sass | 3 +- .../blueprint_scoped/stylesheets/print.sass | 3 +- .../blueprint_scoped_form/stylesheets/ie.sass | 3 +- .../stylesheets/print.sass | 3 +- .../stylesheets/screen.sass | 2 + .../blueprint_semantic/stylesheets/ie.sass | 3 +- .../stylesheets/liquid.sass | 6 +- .../blueprint_semantic/stylesheets/print.sass | 3 +- .../stylesheets/screen.sass | 22 ++- .../blueprint/stylesheets/blueprint/_ie.sass | 42 ++++- .../stylesheets/blueprint/_print.sass | 65 ++++--- .../blueprint/modules/_colors.sass | 45 ++--- .../stylesheets/blueprint/modules/_debug.sass | 6 +- .../blueprint/modules/_fancy_type.sass | 20 +-- .../stylesheets/blueprint/modules/_grid.sass | 103 ++++++------ .../blueprint/modules/_interaction.sass | 79 ++++----- .../blueprint/modules/_liquid.sass | 95 +++++------ .../blueprint/modules/_scaffolding.sass | 31 +++- .../blueprint/modules/_typography.sass | 31 +++- .../blueprint/templates/project/ie.sass | 3 +- .../blueprint/templates/project/print.sass | 3 +- .../stylesheets/blueprint/css/typography.css | 158 ++++++++++++++++++ .../stylesheets/blueprint/sass/ie.sass | 3 + .../stylesheets/blueprint/sass/print.sass | 3 + .../stylesheets/blueprint/sass/screen.sass | 17 ++ .../blueprint/sass/typography.sass | 3 + 30 files changed, 517 insertions(+), 250 deletions(-) create mode 100644 test/fixtures/stylesheets/blueprint/css/typography.css create mode 100644 test/fixtures/stylesheets/blueprint/sass/ie.sass create mode 100644 test/fixtures/stylesheets/blueprint/sass/print.sass create mode 100644 test/fixtures/stylesheets/blueprint/sass/screen.sass create mode 100644 test/fixtures/stylesheets/blueprint/sass/typography.sass diff --git a/examples/blueprint_default/stylesheets/ie.sass b/examples/blueprint_default/stylesheets/ie.sass index 3cf4b9f9..f948dbd1 100644 --- a/examples/blueprint_default/stylesheets/ie.sass +++ b/examples/blueprint_default/stylesheets/ie.sass @@ -1,4 +1,3 @@ @import blueprint/ie.sass -body - +blueprint-ie \ No newline at end of file ++blueprint-ie \ No newline at end of file diff --git a/examples/blueprint_default/stylesheets/print.sass b/examples/blueprint_default/stylesheets/print.sass index 942379c0..642d3e12 100644 --- a/examples/blueprint_default/stylesheets/print.sass +++ b/examples/blueprint_default/stylesheets/print.sass @@ -1,4 +1,3 @@ @import blueprint/print.sass -body - +blueprint-print \ No newline at end of file ++blueprint-print \ No newline at end of file diff --git a/examples/blueprint_plugins/stylesheets/ie.sass b/examples/blueprint_plugins/stylesheets/ie.sass index 3cf4b9f9..f948dbd1 100644 --- a/examples/blueprint_plugins/stylesheets/ie.sass +++ b/examples/blueprint_plugins/stylesheets/ie.sass @@ -1,4 +1,3 @@ @import blueprint/ie.sass -body - +blueprint-ie \ No newline at end of file ++blueprint-ie \ No newline at end of file diff --git a/examples/blueprint_plugins/stylesheets/print.sass b/examples/blueprint_plugins/stylesheets/print.sass index 942379c0..642d3e12 100644 --- a/examples/blueprint_plugins/stylesheets/print.sass +++ b/examples/blueprint_plugins/stylesheets/print.sass @@ -1,4 +1,3 @@ @import blueprint/print.sass -body - +blueprint-print \ No newline at end of file ++blueprint-print \ No newline at end of file diff --git a/examples/blueprint_scoped/stylesheets/ie.sass b/examples/blueprint_scoped/stylesheets/ie.sass index 3cf4b9f9..959b1c2a 100644 --- a/examples/blueprint_scoped/stylesheets/ie.sass +++ b/examples/blueprint_scoped/stylesheets/ie.sass @@ -1,4 +1,3 @@ @import blueprint/ie.sass -body - +blueprint-ie \ No newline at end of file ++blueprint-ie("body.bp") \ No newline at end of file diff --git a/examples/blueprint_scoped/stylesheets/print.sass b/examples/blueprint_scoped/stylesheets/print.sass index 942379c0..394f6881 100644 --- a/examples/blueprint_scoped/stylesheets/print.sass +++ b/examples/blueprint_scoped/stylesheets/print.sass @@ -1,4 +1,3 @@ @import blueprint/print.sass -body - +blueprint-print \ No newline at end of file ++blueprint-print("body.bp") \ No newline at end of file diff --git a/examples/blueprint_scoped_form/stylesheets/ie.sass b/examples/blueprint_scoped_form/stylesheets/ie.sass index 3cf4b9f9..f948dbd1 100644 --- a/examples/blueprint_scoped_form/stylesheets/ie.sass +++ b/examples/blueprint_scoped_form/stylesheets/ie.sass @@ -1,4 +1,3 @@ @import blueprint/ie.sass -body - +blueprint-ie \ No newline at end of file ++blueprint-ie \ No newline at end of file diff --git a/examples/blueprint_scoped_form/stylesheets/print.sass b/examples/blueprint_scoped_form/stylesheets/print.sass index 942379c0..642d3e12 100644 --- a/examples/blueprint_scoped_form/stylesheets/print.sass +++ b/examples/blueprint_scoped_form/stylesheets/print.sass @@ -1,4 +1,3 @@ @import blueprint/print.sass -body - +blueprint-print \ No newline at end of file ++blueprint-print \ No newline at end of file diff --git a/examples/blueprint_scoped_form/stylesheets/screen.sass b/examples/blueprint_scoped_form/stylesheets/screen.sass index 19479116..5c612064 100644 --- a/examples/blueprint_scoped_form/stylesheets/screen.sass +++ b/examples/blueprint_scoped_form/stylesheets/screen.sass @@ -4,5 +4,7 @@ +blueprint-grid +blueprint-typography +blueprint-utilities ++blueprint-debug ++blueprint-interaction form.blueprint +blueprint-form diff --git a/examples/blueprint_semantic/stylesheets/ie.sass b/examples/blueprint_semantic/stylesheets/ie.sass index 3cf4b9f9..f948dbd1 100644 --- a/examples/blueprint_semantic/stylesheets/ie.sass +++ b/examples/blueprint_semantic/stylesheets/ie.sass @@ -1,4 +1,3 @@ @import blueprint/ie.sass -body - +blueprint-ie \ No newline at end of file ++blueprint-ie \ No newline at end of file diff --git a/examples/blueprint_semantic/stylesheets/liquid.sass b/examples/blueprint_semantic/stylesheets/liquid.sass index e458dd62..cca04a18 100644 --- a/examples/blueprint_semantic/stylesheets/liquid.sass +++ b/examples/blueprint_semantic/stylesheets/liquid.sass @@ -7,10 +7,10 @@ .container +container ++blueprint-typography("body.blueprint") + body.blueprint - +blueprint-typography - html & - +body-margins + +blueprint-scaffolding-body hr +colruler hr.space diff --git a/examples/blueprint_semantic/stylesheets/print.sass b/examples/blueprint_semantic/stylesheets/print.sass index 942379c0..642d3e12 100644 --- a/examples/blueprint_semantic/stylesheets/print.sass +++ b/examples/blueprint_semantic/stylesheets/print.sass @@ -1,4 +1,3 @@ @import blueprint/print.sass -body - +blueprint-print \ No newline at end of file ++blueprint-print \ No newline at end of file diff --git a/examples/blueprint_semantic/stylesheets/screen.sass b/examples/blueprint_semantic/stylesheets/screen.sass index 970ad492..a8620009 100644 --- a/examples/blueprint_semantic/stylesheets/screen.sass +++ b/examples/blueprint_semantic/stylesheets/screen.sass @@ -3,22 +3,20 @@ @import blueprint/modules/scaffolding.sass @import compass/reset.sass -.container - +container - +blueprint-typography("body.blueprint") body.blueprint - +body-margins + +blueprint-scaffolding-body + .container + +container + hr + +colruler + hr.space + +colspacer -hr - +colruler -hr.space - +colspacer - -img#w3c - :margin-top 0 - :padding-top 0 + img#w3c + :margin-top 0 + :padding-top 0 body#index #page-header diff --git a/frameworks/blueprint/stylesheets/blueprint/_ie.sass b/frameworks/blueprint/stylesheets/blueprint/_ie.sass index 40f0b2dd..80c05196 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_ie.sass +++ b/frameworks/blueprint/stylesheets/blueprint/_ie.sass @@ -1,19 +1,49 @@ -// mix this into a body element -=blueprint-ie +// 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. + +=blueprint-ie(!body_selector = "body") + #{!body_selector} + +blueprint-ie-body + @if !body_selector != "body" + +blueprint-ie-defaults + @if !body_selector == "body" + +blueprint-ie-defaults + +=blueprint-ie-body :text-align center - .container - :text-align left + +blueprint-ie-hacks + +=blueprint-ie-hacks * html & legend :margin -18px -8px 16px 0 :padding 0 + html>& + p code + :*white-space normal + +=blueprint-ie-defaults + .container + :text-align left ol :margin-left 2em sup :vertical-align text-top sub :vertical-align text-bottom - html>& p code - :*white-space normal hr :margin -8px auto 11px diff --git a/frameworks/blueprint/stylesheets/blueprint/_print.sass b/frameworks/blueprint/stylesheets/blueprint/_print.sass index f95b0b8d..c141596d 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_print.sass +++ b/frameworks/blueprint/stylesheets/blueprint/_print.sass @@ -1,10 +1,40 @@ -=blueprint-print - & - :line-height 1.5 - :font-family "Helvetica Neue", Helvetica, Arial, sans-serif - :color #000 - :background none - :font-size 10pt +@import modules/typography.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. + +=blueprint-print(!body_selector = "body") + #{!body_selector} + +blueprint-print-body + @if !body_selector != "body" + +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. +=blueprint-show-link-urls + &:after + :content " (" attr(href) ") " + :font-size 90% + +=blueprint-print-body + :line-height 1.5 + :font-family= !blueprint_font_family + :color #000 + :background none + :font-size 10pt + +=blueprint-print-defaults .container :background none hr @@ -19,23 +49,22 @@ :background #fff :color #fff h1, h2, h3, h4, h5, h6 - :font-family "Helvetica Neue", Arial, "Lucida Grande", sans-serif + :font-family= !blueprint_font_family code - :font .9em "Courier New", Monaco, Courier, monospace + :font + :size .9em + :family= !blueprint_fixed_font_family img :float left :margin 1.5em 1.5em 1.5em 0 a img :border none - &:link + &:link, + &:visited :background transparent :font-weight 700 :text-decoration underline - /* This style is in blueprint, but I think it's annoying and it doesn't work in all browsers. - &:after - :content " (" attr(href) ") " - :font-size 90% p img.top :margin-top 0 blockquote @@ -51,11 +80,3 @@ :color #999 .hide :display none - a:visited - :background transparent - :font-weight 700 - :text-decoration underline - /* - a:visited:after - :content " (" attr(href) ") " - :font-size 90% diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass index f48e6489..9cb07caf 100644 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass @@ -1,25 +1,30 @@ -!font_color= #333 -!quiet_color= !font_color + #333 -!loud_color= !font_color - #222 +!font_color ||= #333 +!quiet_color ||= !font_color + #333 +!loud_color ||= !font_color - #222 -!header_color= !font_color - #111 +!header_color ||= !font_color - #111 -// !link_color= #009 -// !link_hover_color= !link_color -!link_color= #457ac9 -!link_hover_color= #399999 -!link_focus_color= !link_color -!link_active_color= !link_color + #c00 -!link_visited_color= !link_color - #333 +!link_color ||= #009 +!link_hover_color ||= #000 +!link_focus_color ||= !link_hover_color +!link_active_color ||= !link_color + #C00 +!link_visited_color ||= !link_color - #333 -!success_color = #264409 -!success_bg_color = #E6EFC2 -!success_border_color = #C6D880 +!feedback_border_color ||= #DDD +!success_color ||= #264409 +!success_bg_color ||= #E6EFC2 +!success_border_color ||= #C6D880 -!notice_color = #514721 -!notice_bg_color = #FFF6BF -!notice_border_color = #FFD324 +!notice_color ||= #514721 +!notice_bg_color ||= #FFF6BF +!notice_border_color ||= #FFD324 -!error_color = #8a1f11 -!error_bg_color = #FBE3E4 -!error_border_color = #FBC2C4 +!error_color ||= #8A1F11 +!error_bg_color ||= #FBE3E4 +!error_border_color ||= #FBC2C4 + +!highlight_color ||= #FF0 +!added_color ||= #FFF +!added_bg_color ||= #060 +!removed_color ||= #FFF +!removed_bg_color ||= #900 diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass index 22d7893f..1bbeebf8 100644 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass @@ -1,8 +1,8 @@ -=showgrid(!image = images/grid.png) +=showgrid(!image = "images/grid.png") :background= url(!image) -=blueprint-debug(!grid_image = images/grid.png) - // Use this class on any div.span / container to see the grid. +=blueprint-debug(!grid_image = "images/grid.png") + // Use this class on any column or container to see the grid. // TODO: prefix this with the project path. .showgrid +showgrid(!grid_image) diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass index 7f9064b5..32b2ce9b 100644 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass @@ -2,10 +2,19 @@ To install the fancy type plugin: 1. import the fancy_type module: @import blueprint/modules/fancy_type - 2. mixin +fancy-type to your project's body: + 2. mixin +fancy-type to your project's body or at the top level of your stylesheet: body +fancy-type +=fancy-type + +fancy-paragraphs + .caps + +caps + .dquo + +dquo + .alt + +alt + /* Indentation instead of line shifts for sibling paragraphs. Mixin to a style like p + p =sibling-indentation :text-indent 2em @@ -70,12 +79,3 @@ p.incr, .incr p +incr - -=fancy-type - +fancy-paragraphs - .caps - +caps - .dquo - +dquo - .alt - +alt diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass index 70f5f216..737b0bfd 100755 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_grid.sass @@ -17,20 +17,52 @@ @import compass/utilities/general/clearfix.sass -// Main layout grid, edit these parameters to build your grid and container sizes. -!layout_grid_columns = 24 -!layout_grid_width = 30px -!layout_grid_margin = 10px +// Main layout grid, override these constants to build your grid and container sizes. +!blueprint_grid_columns ||= 24 +!blueprint_grid_width ||= 30px +!blueprint_grid_margin ||= 10px + +!blueprint_grid_outer_width = !blueprint_grid_width + !blueprint_grid_margin +!blueprint_container_size = !blueprint_grid_outer_width * !blueprint_grid_columns - !blueprint_grid_margin + + +=blueprint-grid + // A container should group all your columns + .container + +container + // Use these classes (or mixins) to set the width of a column. + @for !n from 1 to !blueprint_grid_columns + 1 + .span-#{!n} + +span(!n) + div + &.span-#{!n} + +column(!n, !n == !blueprint_grid_columns) + // The last column in a row needs this class (or mixin) or it will end up on the next row. + div.last + +last + // Add these to a column to append empty cols. + @for !n from 1 to !blueprint_grid_columns + .append-#{!n} + +append(!n) + // Add these to a column to prepend empty cols. + @for !n from 1 to !blueprint_grid_columns + .prepend-#{!n} + +prepend(!n) + // Use these classes on an element to push it into the + // next column, or to pull it into the previous column. + @for !n from 1 to !blueprint_grid_columns + 1 + .pull-#{!n} + +pull(!n) + @for !n from 1 to !blueprint_grid_columns + 1 + .push-#{!n} + +push(!n) -// Do not edit below this line unless you really know what you're doing. -!layout_grid_outer_width = !layout_grid_width + !layout_grid_margin -!layout_grid_size = !layout_grid_width * !layout_grid_columns + (!layout_grid_margin * (!layout_grid_columns - 1)) // Columns // Note: If you use this mixin without the class and want to support ie6 // you must set text-align left on your container element in an IE stylesheet. =container - :width = !layout_grid_size + :width = !blueprint_container_size :margin 0 auto +clearfix @@ -41,7 +73,7 @@ :right 0 =span(!n) - :width = !layout_grid_width * !n + (!layout_grid_margin * (!n - 1)) + :width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1)) // Use this mixins to set the width of n columns. =column(!n, !last = false) @@ -50,24 +82,24 @@ @if !last +last @else - :margin-right = !layout_grid_margin + :margin-right = !blueprint_grid_margin // Mixin to a column to append n empty cols. =append(!n) - :padding-right = (!layout_grid_outer_width) * !n + :padding-right = (!blueprint_grid_outer_width) * !n // Mixin to a column to prepend n empty cols. =prepend(!n) - :padding-left = (!layout_grid_outer_width) * !n + :padding-left = (!blueprint_grid_outer_width) * !n // mixin to a column to move it n columns to the left =pull(!n, !last = false) :float left :position relative @if !last - :margin-left = (-!layout_grid_outer_width * !n) + !layout_grid_margin + :margin-left = (-!blueprint_grid_outer_width * !n) + !blueprint_grid_margin @else - :margin-left = -!layout_grid_outer_width * !n + :margin-left = -!blueprint_grid_outer_width * !n // mixin to a column to push it n columns to the right =push(!n) @@ -75,20 +107,20 @@ :position relative :margin :top 0 - :right = -!layout_grid_outer_width * !n + :right = -!blueprint_grid_outer_width * !n :bottom 1.5em - :left = !layout_grid_outer_width * !n + :left = !blueprint_grid_outer_width * !n // Border on right hand side of a column. =border - :padding-right = !layout_grid_margin / 2 - 1 - :margin-right = !layout_grid_margin / 2 + :padding-right = !blueprint_grid_margin / 2 - 1 + :margin-right = !blueprint_grid_margin / 2 :border-right 1px solid #eee // Border with more whitespace, spans one column. =colborder - :padding-right= !layout_grid_width - 0.5 * !layout_grid_margin - 1 - :margin-right= !layout_grid_width - 0.5 * !layout_grid_margin + :padding-right= !blueprint_grid_width - 0.5 * !blueprint_grid_margin - 1 + :margin-right= !blueprint_grid_width - 0.5 * !blueprint_grid_margin :border-right 1px solid #eee // Mixin this to an hr to make a horizontal ruler across a column. @@ -107,34 +139,3 @@ +colruler :background #fff :color #fff - -=blueprint-grid - // A container should group all your columns - .container - +container - // Use these classes (or mixins) to set the width of a column. - @for !n from 1 to !layout_grid_columns + 1 - .span-#{!n} - +span(!n) - div - &.span-#{!n} - +column(!n, !n == !layout_grid_columns) - // The last column in a row needs this class (or mixin) or it will end up on the next row. - div.last - +last - // Add these to a column to append empty cols. - @for !n from 1 to !layout_grid_columns - .append-#{!n} - +append(!n) - // Add these to a column to prepend empty cols. - @for !n from 1 to !layout_grid_columns - .prepend-#{!n} - +prepend(!n) - // Use these classes on an element to push it into the - // next column, or to pull it into the previous column. - @for !n from 1 to !layout_grid_columns + 1 - .pull-#{!n} - +pull(!n) - @for !n from 1 to !layout_grid_columns + 1 - .push-#{!n} - +push(!n) diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass index 21277468..a94fb2d8 100644 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_interaction.sass @@ -1,42 +1,5 @@ -=feedback-base - :padding .8em - :margin-bottom 1em - :border 2px solid #ddd +@import colors.sass -=error - +feedback-base - :background= !error_bg_color - :color= !error_color - :border-color= !error_border_color - a - :color= !error_color - -=notice - +feedback-base - :background= !notice_bg_color - :color= !notice_color - :border-color= !notice_border_color - a - :color= !notice_color - -=success - +feedback-base - :background= !success_bg_color - :color= !success_color - :border-color= !success_border_color - a - :color= !success_color - -=highlight - :background #ff0 - -=added - :background #060 - :color #fff - -=removed - :background #900 - :color #fff =blueprint-interaction .error @@ -53,3 +16,43 @@ +added .removed +removed + +=feedback-base + :padding .8em + :margin-bottom 1em + :border= 2px solid !feedback_border_color + +=error + +feedback-base + :background = !error_bg_color + :color = !error_color + :border-color = !error_border_color + a + :color = !error_color + +=notice + +feedback-base + :background = !notice_bg_color + :color = !notice_color + :border-color = !notice_border_color + a + :color = !notice_color + +=success + +feedback-base + :background = !success_bg_color + :color = !success_color + :border-color = !success_border_color + a + :color = !success_color + +=highlight + :background = !highlight_color + +=added + :background = !added_bg_color + :color = !added_color + +=removed + :background = !removed_bg_color + :color = !removed_color diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass index 952c5502..858ebf37 100644 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass @@ -33,28 +33,56 @@ @import compass/utilities/general/clearfix.sass -// Main layout grid, edit these parameters to build your grid and container sizes. +// Main layout grid, override these constants to build your grid and container sizes. // The width shown gives the right floored percentage values. -!layout_liquid_columns = 24 -!layout_liquid_width = 4.173% -!layout_liquid_margin = 0.833em +!blueprint_liquid_grid_columns ||= 24 +!blueprint_liquid_grid_width ||= 4.173% +!blueprint_liquid_grid_margin ||= 0.833em // Do not edit below this line unless you really know what you're doing. -!layout_liquid_size = 80% -!layout_liquid_min_size = 950px -!layout_liquid_push_pull = -(!layout_liquid_margin * 4) +!blueprint_liquid_container_width = 80% +!blueprint_liquid_container_min_width = 950px +!blueprint_liquid_grid_push_pull = -(!blueprint_liquid_grid_margin * 4) -=block - :overflow hidden +=blueprint-liquid-grid + // A container should group all your columns + .container + +container + // Use these classes (or mixins) to set the width of a column. + @for !n from 1 to !blueprint_liquid_grid_columns + 1 + .span-#{!n} + +span(!n) + div + &.span-#{!n} + +column(!n, !n == !blueprint_liquid_grid_columns) + // The last column in a row needs this class (or mixin) or it will end up on the next row. + div.last + +last + // Add these to a column to append empty cols. + @for !n from 1 to !blueprint_liquid_grid_columns + .append-#{!n} + +append(!n) + // Add these to a column to prepend empty cols. + @for !n from 1 to !blueprint_liquid_grid_columns + .prepend-#{!n} + +prepend(!n) + // Use these classes on an element to push it into the + // next column, or to pull it into the previous column. + @for !n from 1 to !blueprint_liquid_grid_columns + 1 + .pull-#{!n} + +pull(!n) + @for !n from 1 to !blueprint_liquid_grid_columns + 1 + .push-#{!n} + +push(!n) =container - :min-width= !layout_liquid_min_size - :width = !layout_liquid_size + :min-width= !blueprint_liquid_container_min_width + :width = !blueprint_liquid_container_width :margin 0 auto - +block + +clearfix =span(!n) - :width= (!layout_liquid_width * !n) - ((!layout_liquid_width * !n) % 1) + :width= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1) =last :margin-right 0 @@ -66,23 +94,23 @@ @if !last +last @else - :margin-right = !layout_liquid_margin + :margin-right = !blueprint_liquid_grid_margin =append(!n) - :padding-right= (!layout_liquid_width * !n) - ((!layout_liquid_width * !n) % 1) + :padding-right= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1) =prepend(!n) - :padding-left= (!layout_liquid_width * !n) - ((!layout_liquid_width * !n) % 1) + :padding-left= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1) =pull(!n, !last = false) - :margin-left= (!layout_liquid_push_pull * !n) + :margin-left= (!blueprint_liquid_grid_push_pull * !n) =push(!n) :float right :margin :top 0 :left 1.5em - :right= (!layout_liquid_push_pull * !n) + :right= (!blueprint_liquid_grid_push_pull * !n) :bottom 0 =border @@ -107,34 +135,3 @@ :background #fff :color #fff - -=blueprint-liquid-grid - // A container should group all your columns - .container - +container - // Use these classes (or mixins) to set the width of a column. - @for !n from 1 to !layout_liquid_columns + 1 - .span-#{!n} - +span(!n) - div - &.span-#{!n} - +column(!n, !n == !layout_liquid_columns) - // The last column in a row needs this class (or mixin) or it will end up on the next row. - div.last - +last - // Add these to a column to append empty cols. - @for !n from 1 to !layout_liquid_columns - .append-#{!n} - +append(!n) - // Add these to a column to prepend empty cols. - @for !n from 1 to !layout_liquid_columns - .prepend-#{!n} - +prepend(!n) - // Use these classes on an element to push it into the - // next column, or to pull it into the previous column. - @for !n from 1 to !layout_liquid_columns + 1 - .pull-#{!n} - +pull(!n) - @for !n from 1 to !layout_liquid_columns + 1 - .push-#{!n} - +push(!n) diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass index 60201971..6fd879c0 100644 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass @@ -1,9 +1,28 @@ @import grid.sass -/* - The styles contained here are meant to provide for an attractive experience out of the box - and are meant to be removed once custom visual design begins. +// The styles contained here are meant to provide for an attractive experience out of the box +// and are expected to be removed once custom visual design begins. -=body-margins +// The +blueprint-scaffolding 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-scaffolding +// Scoped by a single presentational body class: +// +blueprint-scaffolding("body.blueprint") +// Semantically: +// +blueprint-scaffolding("body#page-1, body#page-2, body.a-special-page-type") +// Alternatively, you can use the +blueprint-scaffolding-body and +blueprint-scaffolding-defaults +// mixins to construct your own semantic style rules. + +=blueprint-scaffolding(!body_selector = "body") + #{!body_selector} + +blueprint-scaffolding-body + @if !body_selector != "body" + +blueprint-scaffolding-defaults + @if !body_selector == "body" + +blueprint-scaffolding-defaults + +=blueprint-scaffolding-body :margin 1.5em 0 // Mixin +box to create a padded box inside a column. @@ -12,9 +31,7 @@ :margin-bottom 1.5em :background #E5ECF9 -=blueprint-scaffolding(!body_selector = "body") - #{!body_selector} - +body-margins +=blueprint-scaffolding-defaults .box +box // Border on right hand side of a column. You can comment this out if you don't plan to use it. diff --git a/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass b/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass index bd5bf260..4627c6d2 100644 --- a/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass +++ b/frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass @@ -1,9 +1,29 @@ @import colors.sass @import compass/utilities/links/link_colors.sass -!blueprint_font_family ||= "Helvetica Neue", Helvetica, Arial, sans-serif +!blueprint_font_family ||= "Helvetica Neue", Helvetica, Arial, sans-serif !blueprint_fixed_font_family ||= 'andale mono', 'lucida console', monospace +// 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: +// +blueprint-typography +// Scoped by a single presentational body class: +// +blueprint-typography("body.blueprint") +// Semantically: +// +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} + +blueprint-typography-body + @if !body_selector != "body" + +blueprint-typography-defaults + @if !body_selector == "body" + +blueprint-typography-defaults + =normal-text :font-family= !blueprint_font_family :color= !font_color @@ -22,10 +42,11 @@ =loud :color= !loud_color -=blueprint-typography(!body_selector = "body") - #{!body_selector} - +normal-text - :font-size 75% +=blueprint-typography-body + +normal-text + :font-size 75% + +=blueprint-typography-defaults h1 +header-text :font-size 3em diff --git a/frameworks/blueprint/templates/project/ie.sass b/frameworks/blueprint/templates/project/ie.sass index 3cf4b9f9..f948dbd1 100644 --- a/frameworks/blueprint/templates/project/ie.sass +++ b/frameworks/blueprint/templates/project/ie.sass @@ -1,4 +1,3 @@ @import blueprint/ie.sass -body - +blueprint-ie \ No newline at end of file ++blueprint-ie \ No newline at end of file diff --git a/frameworks/blueprint/templates/project/print.sass b/frameworks/blueprint/templates/project/print.sass index 942379c0..642d3e12 100644 --- a/frameworks/blueprint/templates/project/print.sass +++ b/frameworks/blueprint/templates/project/print.sass @@ -1,4 +1,3 @@ @import blueprint/print.sass -body - +blueprint-print \ No newline at end of file ++blueprint-print \ No newline at end of file diff --git a/test/fixtures/stylesheets/blueprint/css/typography.css b/test/fixtures/stylesheets/blueprint/css/typography.css new file mode 100644 index 00000000..5e09ba62 --- /dev/null +++ b/test/fixtures/stylesheets/blueprint/css/typography.css @@ -0,0 +1,158 @@ + + +body { + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + color: #333333; + font-size: 75%; } + +h1 { + font-weight: normal; + color: #222222; + font-size: 3em; + line-height: 1; + margin-bottom: 0.5em; } + h1 img { + margin: 0; } + +h2 { + font-weight: normal; + color: #222222; + font-size: 2em; + margin-bottom: 0.75em; } + +h3 { + font-weight: normal; + color: #222222; + font-size: 1.5em; + line-height: 1; + margin-bottom: 1em; } + +h4 { + font-weight: normal; + color: #222222; + font-size: 1.2em; + line-height: 1.25; + margin-bottom: 1.25em; + height: 1.25em; } + +h5 { + font-weight: normal; + color: #222222; + font-size: 1em; + font-weight: bold; + margin-bottom: 1.5em; } + +h6 { + font-weight: normal; + color: #222222; + font-size: 1em; + font-weight: bold; } + +h2 img, h3 img, h4 img, h5 img, h6 img { + margin: 0; } + +p { + margin: 0 0 1.5em; } + p img { + float: left; + margin: 1.5em 1.5em 1.5em 0; + padding: 0; } + p img.right { + float: right; + margin: 1.5em 0 1.5em 1.5em; } + +a { + text-decoration: underline; + color: #000099; } + a:visited { + color: #000066; } + a:focus { + color: black; } + a:hover { + color: black; } + a:active { + color: #cc0099; } + +blockquote { + margin: 1.5em; + color: #666; + font-style: italic; } + +strong { + font-weight: bold; } + +em { + font-style: italic; } + +dfn { + font-style: italic; + font-weight: bold; } + +sup, sub { + line-height: 0; } + +abbr, acronym { + border-bottom: 1px dotted #666; } + +address { + margin: 0 0 1.5em; + font-style: italic; } + +del { + color: #666; } + +pre, code { + margin: 1.5em 0; + white-space: pre; + font: 1em 'andale mono', 'lucida console', monospace; + line-height: 1.5; } + +tt { + font: 1em 'andale mono', 'lucida console', monospace; + line-height: 1.5; } + +li ul, li ol { + margin: 0 1.5em; } + +ul { + margin: 0 1.5em 1.5em 1.5em; + list-style-type: disc; } + +ol { + margin: 0 1.5em 1.5em 1.5em; + list-style-type: decimal; } + +dl { + margin: 0 0 1.5em 0; } + dl dt { + font-weight: bold; } + +dd { + margin-left: 1.5em; } + +table { + margin-bottom: 1.4em; + width: 100%; } + +th { + font-weight: bold; + background: #C3D9FF; + padding: 4px 10px 4px 5px; } + +td { + padding: 4px 10px 4px 5px; } + +tr.even td { + background: #E5ECF9; } + +tfoot { + font-style: italic; } + +caption { + background: #eee; } + +.quiet { + color: #666666; } + +.loud { + color: #111111; } diff --git a/test/fixtures/stylesheets/blueprint/sass/ie.sass b/test/fixtures/stylesheets/blueprint/sass/ie.sass new file mode 100644 index 00000000..cbd72ab5 --- /dev/null +++ b/test/fixtures/stylesheets/blueprint/sass/ie.sass @@ -0,0 +1,3 @@ +@import blueprint/ie + ++blueprint-ie \ No newline at end of file diff --git a/test/fixtures/stylesheets/blueprint/sass/print.sass b/test/fixtures/stylesheets/blueprint/sass/print.sass new file mode 100644 index 00000000..493af468 --- /dev/null +++ b/test/fixtures/stylesheets/blueprint/sass/print.sass @@ -0,0 +1,3 @@ +@import blueprint/print + ++blueprint-print \ No newline at end of file diff --git a/test/fixtures/stylesheets/blueprint/sass/screen.sass b/test/fixtures/stylesheets/blueprint/sass/screen.sass new file mode 100644 index 00000000..61b77544 --- /dev/null +++ b/test/fixtures/stylesheets/blueprint/sass/screen.sass @@ -0,0 +1,17 @@ +@import blueprint/screen +@import compass/reset + ++blueprint +#main.container + #top + +column(24, last) + #middle + +column(24, last) + #left + +column(6) + #content + +column(12) + #right + +column(6, last) + #bottom + +column(24, last) diff --git a/test/fixtures/stylesheets/blueprint/sass/typography.sass b/test/fixtures/stylesheets/blueprint/sass/typography.sass new file mode 100644 index 00000000..13262468 --- /dev/null +++ b/test/fixtures/stylesheets/blueprint/sass/typography.sass @@ -0,0 +1,3 @@ +@import blueprint/modules/typography.sass + ++blueprint-typography \ No newline at end of file