From c4c9be0256bf84d0d58323d93ee00f36d2a7d0fd Mon Sep 17 00:00:00 2001 From: Christoffer Eliesen Date: Fri, 27 Nov 2009 13:20:47 +0100 Subject: [PATCH] Take margins into account in liquid grid. The previous version of liquid grid would not take margins into proper account. With this patch the margins are a correct percentage of the container, and adding multiple margins / columns together should add up to just about 100% (not entirely accurate, but very close). The math is as follows: With the previous version, you get these numbers: 4.173% grid width * 24 columns = 100.152%, which due to rounding 'fixes' in the template becomes exactly 100%. However, this is without any margins. Once you add margins, you exceed 100%, rendering margins unusable. To add to the confusion, the margins are not a percentage of the width, but instead in 'em' units, making it very difficult to keep the entire grid from getting beyond 100% in width once you add margins. With this patch, you get these numbers: (3.167% grid width + 1.042% margin) * 24 columns = 101.1016%. Since you don't use any margin for the last column, you subtract one margin and end up with 99.974%. Optimally this number would be 100.000%, but the 0.026% error is difficult to remove, and an acceptable compromise in my opinion. In summary, this patch enables margins to be used with the liquid grid, which is the expected behaviour. --- .../stylesheets/blueprint/_liquid.sass | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/frameworks/blueprint/stylesheets/blueprint/_liquid.sass b/frameworks/blueprint/stylesheets/blueprint/_liquid.sass index 0e41d32e..43bffeb1 100644 --- a/frameworks/blueprint/stylesheets/blueprint/_liquid.sass +++ b/frameworks/blueprint/stylesheets/blueprint/_liquid.sass @@ -36,13 +36,13 @@ // Main layout grid, override these constants to build your grid and container sizes. // The width shown gives the right floored percentage values. !blueprint_liquid_grid_columns ||= 24 -!blueprint_liquid_grid_width ||= 4.173% -!blueprint_liquid_grid_margin ||= 0.833em +!blueprint_liquid_grid_width ||= 3.167% +!blueprint_liquid_grid_margin ||= 1.042% // Do not edit below this line unless you really know what you're doing. !blueprint_liquid_container_width = 80% !blueprint_liquid_container_min_width = 950px -!blueprint_liquid_grid_push_pull = -(!blueprint_liquid_grid_margin * 4) +!blueprint_liquid_grid_push_pull = -(!blueprint_liquid_grid_margin + !blueprint_liquid_grid_width) =blueprint-liquid-grid // A container should group all your columns @@ -82,7 +82,7 @@ +clearfix =span(!n, !override = false) - !width = (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1) + !width = (!blueprint_liquid_grid_width * !n) + (!blueprint_liquid_grid_margin * (!n - 1)) @if !override width= !width !important @else @@ -101,10 +101,10 @@ margin-right= !blueprint_liquid_grid_margin =append(!n) - padding-right= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1) + padding-right= (!blueprint_liquid_grid_width + !blueprint_liquid_grid_margin) * !n =prepend(!n) - padding-left= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1) + padding-left= (!blueprint_liquid_grid_width + !blueprint_liquid_grid_margin) * !n =pull(!n, !last = false) margin-left= (!blueprint_liquid_grid_push_pull * !n) @@ -113,7 +113,7 @@ +float-right margin: top: 0 - left: 1.5em + left= !blueprint_liquid_grid_margin right= (!blueprint_liquid_grid_push_pull * !n) bottom: 0 @@ -121,8 +121,8 @@ border-right: 1px solid #eee =colborder - padding-right: 2% - margin-right: 2% + padding-right= !blueprint_liquid_grid_margin * 2 + margin-right= !blueprint_liquid_grid_margin * 2 +border =colruler @@ -131,7 +131,9 @@ clear: both width: 100% height: 0.083em - margin: 0 0 1.583em + margin: 0 + margin-left= !blueprint_liquid_grid_margin * 2 + margin-right= !blueprint_liquid_grid_margin * 2 border: none =colspacer