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.
This commit is contained in:
Chris Eppstein 2008-12-06 13:41:37 -08:00
parent 1c42afb158
commit 3100476ff5
30 changed files with 517 additions and 250 deletions

View File

@ -1,4 +1,3 @@
@import blueprint/ie.sass @import blueprint/ie.sass
body +blueprint-ie
+blueprint-ie

View File

@ -1,4 +1,3 @@
@import blueprint/print.sass @import blueprint/print.sass
body +blueprint-print
+blueprint-print

View File

@ -1,4 +1,3 @@
@import blueprint/ie.sass @import blueprint/ie.sass
body +blueprint-ie
+blueprint-ie

View File

@ -1,4 +1,3 @@
@import blueprint/print.sass @import blueprint/print.sass
body +blueprint-print
+blueprint-print

View File

@ -1,4 +1,3 @@
@import blueprint/ie.sass @import blueprint/ie.sass
body +blueprint-ie("body.bp")
+blueprint-ie

View File

@ -1,4 +1,3 @@
@import blueprint/print.sass @import blueprint/print.sass
body +blueprint-print("body.bp")
+blueprint-print

View File

@ -1,4 +1,3 @@
@import blueprint/ie.sass @import blueprint/ie.sass
body +blueprint-ie
+blueprint-ie

View File

@ -1,4 +1,3 @@
@import blueprint/print.sass @import blueprint/print.sass
body +blueprint-print
+blueprint-print

View File

@ -4,5 +4,7 @@
+blueprint-grid +blueprint-grid
+blueprint-typography +blueprint-typography
+blueprint-utilities +blueprint-utilities
+blueprint-debug
+blueprint-interaction
form.blueprint form.blueprint
+blueprint-form +blueprint-form

View File

@ -1,4 +1,3 @@
@import blueprint/ie.sass @import blueprint/ie.sass
body +blueprint-ie
+blueprint-ie

View File

@ -7,10 +7,10 @@
.container .container
+container +container
+blueprint-typography("body.blueprint")
body.blueprint body.blueprint
+blueprint-typography +blueprint-scaffolding-body
html &
+body-margins
hr hr
+colruler +colruler
hr.space hr.space

View File

@ -1,4 +1,3 @@
@import blueprint/print.sass @import blueprint/print.sass
body +blueprint-print
+blueprint-print

View File

@ -3,22 +3,20 @@
@import blueprint/modules/scaffolding.sass @import blueprint/modules/scaffolding.sass
@import compass/reset.sass @import compass/reset.sass
.container
+container
+blueprint-typography("body.blueprint") +blueprint-typography("body.blueprint")
body.blueprint body.blueprint
+body-margins +blueprint-scaffolding-body
.container
+container
hr
+colruler
hr.space
+colspacer
hr img#w3c
+colruler :margin-top 0
hr.space :padding-top 0
+colspacer
img#w3c
:margin-top 0
:padding-top 0
body#index body#index
#page-header #page-header

View File

@ -1,19 +1,49 @@
// mix this into a body element // The blueprint IE mixins should be mixed into a stylesheet that gets conditionally included
=blueprint-ie // into IE like so:
// <!--[if IE]><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.
=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 :text-align center
.container +blueprint-ie-hacks
:text-align left
=blueprint-ie-hacks
* html & * html &
legend legend
:margin -18px -8px 16px 0 :margin -18px -8px 16px 0
:padding 0 :padding 0
html>&
p code
:*white-space normal
=blueprint-ie-defaults
.container
:text-align left
ol ol
:margin-left 2em :margin-left 2em
sup sup
:vertical-align text-top :vertical-align text-top
sub sub
:vertical-align text-bottom :vertical-align text-bottom
html>& p code
:*white-space normal
hr hr
:margin -8px auto 11px :margin -8px auto 11px

View File

@ -1,10 +1,40 @@
=blueprint-print @import modules/typography.sass
&
:line-height 1.5 // The +blueprint-print mixin must be mixed into the top level of your stylesheet.
:font-family "Helvetica Neue", Helvetica, Arial, sans-serif // However, you can customize the body selector if you wish to control the scope
:color #000 // of this mixin. Examples:
:background none // Apply to any page including the stylesheet:
:font-size 10pt // +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 .container
:background none :background none
hr hr
@ -19,23 +49,22 @@
:background #fff :background #fff
:color #fff :color #fff
h1, h2, h3, h4, h5, h6 h1, h2, h3, h4, h5, h6
:font-family "Helvetica Neue", Arial, "Lucida Grande", sans-serif :font-family= !blueprint_font_family
code code
:font .9em "Courier New", Monaco, Courier, monospace :font
:size .9em
:family= !blueprint_fixed_font_family
img img
:float left :float left
:margin 1.5em 1.5em 1.5em 0 :margin 1.5em 1.5em 1.5em 0
a a
img img
:border none :border none
&:link &:link,
&:visited
:background transparent :background transparent
:font-weight 700 :font-weight 700
:text-decoration underline :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 p img.top
:margin-top 0 :margin-top 0
blockquote blockquote
@ -51,11 +80,3 @@
:color #999 :color #999
.hide .hide
:display none :display none
a:visited
:background transparent
:font-weight 700
:text-decoration underline
/*
a:visited:after
:content " (" attr(href) ") "
:font-size 90%

View File

@ -1,25 +1,30 @@
!font_color= #333 !font_color ||= #333
!quiet_color= !font_color + #333 !quiet_color ||= !font_color + #333
!loud_color= !font_color - #222 !loud_color ||= !font_color - #222
!header_color= !font_color - #111 !header_color ||= !font_color - #111
// !link_color= #009 !link_color ||= #009
// !link_hover_color= !link_color !link_hover_color ||= #000
!link_color= #457ac9 !link_focus_color ||= !link_hover_color
!link_hover_color= #399999 !link_active_color ||= !link_color + #C00
!link_focus_color= !link_color !link_visited_color ||= !link_color - #333
!link_active_color= !link_color + #c00
!link_visited_color= !link_color - #333
!success_color = #264409 !feedback_border_color ||= #DDD
!success_bg_color = #E6EFC2 !success_color ||= #264409
!success_border_color = #C6D880 !success_bg_color ||= #E6EFC2
!success_border_color ||= #C6D880
!notice_color = #514721 !notice_color ||= #514721
!notice_bg_color = #FFF6BF !notice_bg_color ||= #FFF6BF
!notice_border_color = #FFD324 !notice_border_color ||= #FFD324
!error_color = #8a1f11 !error_color ||= #8A1F11
!error_bg_color = #FBE3E4 !error_bg_color ||= #FBE3E4
!error_border_color = #FBC2C4 !error_border_color ||= #FBC2C4
!highlight_color ||= #FF0
!added_color ||= #FFF
!added_bg_color ||= #060
!removed_color ||= #FFF
!removed_bg_color ||= #900

View File

@ -1,8 +1,8 @@
=showgrid(!image = images/grid.png) =showgrid(!image = "images/grid.png")
:background= url(!image) :background= url(!image)
=blueprint-debug(!grid_image = images/grid.png) =blueprint-debug(!grid_image = "images/grid.png")
// Use this class on any div.span / container to see the grid. // Use this class on any column or container to see the grid.
// TODO: prefix this with the project path. // TODO: prefix this with the project path.
.showgrid .showgrid
+showgrid(!grid_image) +showgrid(!grid_image)

View File

@ -2,10 +2,19 @@
To install the fancy type plugin: To install the fancy type plugin:
1. import the fancy_type module: 1. import the fancy_type module:
@import blueprint/modules/fancy_type @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 body
+fancy-type +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 /* Indentation instead of line shifts for sibling paragraphs. Mixin to a style like p + p
=sibling-indentation =sibling-indentation
:text-indent 2em :text-indent 2em
@ -70,12 +79,3 @@
p.incr, p.incr,
.incr p .incr p
+incr +incr
=fancy-type
+fancy-paragraphs
.caps
+caps
.dquo
+dquo
.alt
+alt

View File

@ -17,20 +17,52 @@
@import compass/utilities/general/clearfix.sass @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.
!layout_grid_columns = 24 !blueprint_grid_columns ||= 24
!layout_grid_width = 30px !blueprint_grid_width ||= 30px
!layout_grid_margin = 10px !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 // Columns
// Note: If you use this mixin without the class and want to support ie6 // 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. // you must set text-align left on your container element in an IE stylesheet.
=container =container
:width = !layout_grid_size :width = !blueprint_container_size
:margin 0 auto :margin 0 auto
+clearfix +clearfix
@ -41,7 +73,7 @@
:right 0 :right 0
=span(!n) =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. // Use this mixins to set the width of n columns.
=column(!n, !last = false) =column(!n, !last = false)
@ -50,24 +82,24 @@
@if !last @if !last
+last +last
@else @else
:margin-right = !layout_grid_margin :margin-right = !blueprint_grid_margin
// Mixin to a column to append n empty cols. // Mixin to a column to append n empty cols.
=append(!n) =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. // Mixin to a column to prepend n empty cols.
=prepend(!n) =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 // mixin to a column to move it n columns to the left
=pull(!n, !last = false) =pull(!n, !last = false)
:float left :float left
:position relative :position relative
@if !last @if !last
:margin-left = (-!layout_grid_outer_width * !n) + !layout_grid_margin :margin-left = (-!blueprint_grid_outer_width * !n) + !blueprint_grid_margin
@else @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 // mixin to a column to push it n columns to the right
=push(!n) =push(!n)
@ -75,20 +107,20 @@
:position relative :position relative
:margin :margin
:top 0 :top 0
:right = -!layout_grid_outer_width * !n :right = -!blueprint_grid_outer_width * !n
:bottom 1.5em :bottom 1.5em
:left = !layout_grid_outer_width * !n :left = !blueprint_grid_outer_width * !n
// Border on right hand side of a column. // Border on right hand side of a column.
=border =border
:padding-right = !layout_grid_margin / 2 - 1 :padding-right = !blueprint_grid_margin / 2 - 1
:margin-right = !layout_grid_margin / 2 :margin-right = !blueprint_grid_margin / 2
:border-right 1px solid #eee :border-right 1px solid #eee
// Border with more whitespace, spans one column. // Border with more whitespace, spans one column.
=colborder =colborder
:padding-right= !layout_grid_width - 0.5 * !layout_grid_margin - 1 :padding-right= !blueprint_grid_width - 0.5 * !blueprint_grid_margin - 1
:margin-right= !layout_grid_width - 0.5 * !layout_grid_margin :margin-right= !blueprint_grid_width - 0.5 * !blueprint_grid_margin
:border-right 1px solid #eee :border-right 1px solid #eee
// Mixin this to an hr to make a horizontal ruler across a column. // Mixin this to an hr to make a horizontal ruler across a column.
@ -107,34 +139,3 @@
+colruler +colruler
:background #fff :background #fff
:color #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)

View File

@ -1,42 +1,5 @@
=feedback-base @import colors.sass
:padding .8em
:margin-bottom 1em
:border 2px solid #ddd
=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 =blueprint-interaction
.error .error
@ -53,3 +16,43 @@
+added +added
.removed .removed
+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

View File

@ -33,28 +33,56 @@
@import compass/utilities/general/clearfix.sass @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. // The width shown gives the right floored percentage values.
!layout_liquid_columns = 24 !blueprint_liquid_grid_columns ||= 24
!layout_liquid_width = 4.173% !blueprint_liquid_grid_width ||= 4.173%
!layout_liquid_margin = 0.833em !blueprint_liquid_grid_margin ||= 0.833em
// Do not edit below this line unless you really know what you're doing. // Do not edit below this line unless you really know what you're doing.
!layout_liquid_size = 80% !blueprint_liquid_container_width = 80%
!layout_liquid_min_size = 950px !blueprint_liquid_container_min_width = 950px
!layout_liquid_push_pull = -(!layout_liquid_margin * 4) !blueprint_liquid_grid_push_pull = -(!blueprint_liquid_grid_margin * 4)
=block =blueprint-liquid-grid
:overflow hidden // 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 =container
:min-width= !layout_liquid_min_size :min-width= !blueprint_liquid_container_min_width
:width = !layout_liquid_size :width = !blueprint_liquid_container_width
:margin 0 auto :margin 0 auto
+block +clearfix
=span(!n) =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 =last
:margin-right 0 :margin-right 0
@ -66,23 +94,23 @@
@if !last @if !last
+last +last
@else @else
:margin-right = !layout_liquid_margin :margin-right = !blueprint_liquid_grid_margin
=append(!n) =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) =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) =pull(!n, !last = false)
:margin-left= (!layout_liquid_push_pull * !n) :margin-left= (!blueprint_liquid_grid_push_pull * !n)
=push(!n) =push(!n)
:float right :float right
:margin :margin
:top 0 :top 0
:left 1.5em :left 1.5em
:right= (!layout_liquid_push_pull * !n) :right= (!blueprint_liquid_grid_push_pull * !n)
:bottom 0 :bottom 0
=border =border
@ -107,34 +135,3 @@
:background #fff :background #fff
:color #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)

View File

@ -1,9 +1,28 @@
@import grid.sass @import grid.sass
/* // The styles contained here are meant to provide for an attractive experience out of the box
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.
and are meant 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 :margin 1.5em 0
// Mixin +box to create a padded box inside a column. // Mixin +box to create a padded box inside a column.
@ -12,9 +31,7 @@
:margin-bottom 1.5em :margin-bottom 1.5em
:background #E5ECF9 :background #E5ECF9
=blueprint-scaffolding(!body_selector = "body") =blueprint-scaffolding-defaults
#{!body_selector}
+body-margins
.box .box
+box +box
// Border on right hand side of a column. You can comment this out if you don't plan to use it. // Border on right hand side of a column. You can comment this out if you don't plan to use it.

View File

@ -1,9 +1,29 @@
@import colors.sass @import colors.sass
@import compass/utilities/links/link_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 !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 =normal-text
:font-family= !blueprint_font_family :font-family= !blueprint_font_family
:color= !font_color :color= !font_color
@ -22,10 +42,11 @@
=loud =loud
:color= !loud_color :color= !loud_color
=blueprint-typography(!body_selector = "body") =blueprint-typography-body
#{!body_selector} +normal-text
+normal-text :font-size 75%
:font-size 75%
=blueprint-typography-defaults
h1 h1
+header-text +header-text
:font-size 3em :font-size 3em

View File

@ -1,4 +1,3 @@
@import blueprint/ie.sass @import blueprint/ie.sass
body +blueprint-ie
+blueprint-ie

View File

@ -1,4 +1,3 @@
@import blueprint/print.sass @import blueprint/print.sass
body +blueprint-print
+blueprint-print

View File

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

View File

@ -0,0 +1,3 @@
@import blueprint/ie
+blueprint-ie

View File

@ -0,0 +1,3 @@
@import blueprint/print
+blueprint-print

View File

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

View File

@ -0,0 +1,3 @@
@import blueprint/modules/typography.sass
+blueprint-typography