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.
This commit is contained in:
Christoffer Eliesen 2009-11-27 13:20:47 +01:00 committed by S. Christoffer Eliesen
parent 1eef589c29
commit c4c9be0256

View File

@ -36,13 +36,13 @@
// Main layout grid, override these constants 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.
!blueprint_liquid_grid_columns ||= 24 !blueprint_liquid_grid_columns ||= 24
!blueprint_liquid_grid_width ||= 4.173% !blueprint_liquid_grid_width ||= 3.167%
!blueprint_liquid_grid_margin ||= 0.833em !blueprint_liquid_grid_margin ||= 1.042%
// 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.
!blueprint_liquid_container_width = 80% !blueprint_liquid_container_width = 80%
!blueprint_liquid_container_min_width = 950px !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 =blueprint-liquid-grid
// A container should group all your columns // A container should group all your columns
@ -82,7 +82,7 @@
+clearfix +clearfix
=span(!n, !override = false) =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 @if !override
width= !width !important width= !width !important
@else @else
@ -101,10 +101,10 @@
margin-right= !blueprint_liquid_grid_margin margin-right= !blueprint_liquid_grid_margin
=append(!n) =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) =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) =pull(!n, !last = false)
margin-left= (!blueprint_liquid_grid_push_pull * !n) margin-left= (!blueprint_liquid_grid_push_pull * !n)
@ -113,7 +113,7 @@
+float-right +float-right
margin: margin:
top: 0 top: 0
left: 1.5em left= !blueprint_liquid_grid_margin
right= (!blueprint_liquid_grid_push_pull * !n) right= (!blueprint_liquid_grid_push_pull * !n)
bottom: 0 bottom: 0
@ -121,8 +121,8 @@
border-right: 1px solid #eee border-right: 1px solid #eee
=colborder =colborder
padding-right: 2% padding-right= !blueprint_liquid_grid_margin * 2
margin-right: 2% margin-right= !blueprint_liquid_grid_margin * 2
+border +border
=colruler =colruler
@ -131,7 +131,9 @@
clear: both clear: both
width: 100% width: 100%
height: 0.083em 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 border: none
=colspacer =colspacer