github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Take margins into account in liquid grid.

Browse Source 
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
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frameworks/blueprint/stylesheets/blueprint/_liquid.sass
View File

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