c4c9be0256
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.
144 lines
4.1 KiB
Sass
144 lines
4.1 KiB
Sass
// --------------------------------------------------------------
|
|
// SASS Gridification
|
|
// * Author: Geoff Garside
|
|
// A SASS adaptation of Blueprint CSS
|
|
// * Version: 0.7.1 (2008-02-25)
|
|
// * Website: http://code.google.com/p/blueprintcss/
|
|
// Based on work by:
|
|
// * Chris Eppstein [eppsteins.net]
|
|
// * Lorin Tacket [lorintackett.com]
|
|
// * Olav Bjorkoy [bjorkoy.com]
|
|
// * Nathan Borror [playgroundblues.com]
|
|
// * Jeff Croft [jeffcroft.com]
|
|
// * Christian Metts [mintchaos.com]
|
|
// * Khoi Vinh [subtraction.com]
|
|
// Liquid grid work by:
|
|
// * Ben Listwon
|
|
// * David Bedingfield
|
|
// * Andrei Michael Herasimchuk
|
|
// Involution Studios, http://www.involutionstudios.com
|
|
// Read more about using a grid here:
|
|
// * subtraction.com/archives/2007/0318_oh_yeeaahh.php
|
|
// -----
|
|
// By default, the grid is 80% of window width, with 24 columns.
|
|
//
|
|
// To make the grid fixed, simply change the .container width
|
|
// property to a pixel value. e.g., 960px.
|
|
// -----
|
|
// To use:
|
|
// This module is a REPLACEMENT for the grid module. Simply import it:
|
|
// @import blueprint.sass
|
|
// @import blueprint/liquid.sass
|
|
// -------------------------------------------------------------------
|
|
|
|
@import compass/utilities/general/float.sass
|
|
|
|
// 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 ||= 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 + !blueprint_liquid_grid_width)
|
|
|
|
=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= !blueprint_liquid_container_min_width
|
|
width= !blueprint_liquid_container_width
|
|
margin: 0 auto
|
|
+clearfix
|
|
|
|
=span(!n, !override = false)
|
|
!width = (!blueprint_liquid_grid_width * !n) + (!blueprint_liquid_grid_margin * (!n - 1))
|
|
@if !override
|
|
width= !width !important
|
|
@else
|
|
width= !width
|
|
|
|
=last
|
|
margin-right: 0
|
|
|
|
=column(!n, !last = false)
|
|
+float-left
|
|
overflow: hidden
|
|
+span(!n)
|
|
@if !last
|
|
+last
|
|
@else
|
|
margin-right= !blueprint_liquid_grid_margin
|
|
|
|
=append(!n)
|
|
padding-right= (!blueprint_liquid_grid_width + !blueprint_liquid_grid_margin) * !n
|
|
|
|
=prepend(!n)
|
|
padding-left= (!blueprint_liquid_grid_width + !blueprint_liquid_grid_margin) * !n
|
|
|
|
=pull(!n, !last = false)
|
|
margin-left= (!blueprint_liquid_grid_push_pull * !n)
|
|
|
|
=push(!n)
|
|
+float-right
|
|
margin:
|
|
top: 0
|
|
left= !blueprint_liquid_grid_margin
|
|
right= (!blueprint_liquid_grid_push_pull * !n)
|
|
bottom: 0
|
|
|
|
=border
|
|
border-right: 1px solid #eee
|
|
|
|
=colborder
|
|
padding-right= !blueprint_liquid_grid_margin * 2
|
|
margin-right= !blueprint_liquid_grid_margin * 2
|
|
+border
|
|
|
|
=colruler
|
|
background: #ddd
|
|
color: #ddd
|
|
clear: both
|
|
width: 100%
|
|
height: 0.083em
|
|
margin: 0
|
|
margin-left= !blueprint_liquid_grid_margin * 2
|
|
margin-right= !blueprint_liquid_grid_margin * 2
|
|
border: none
|
|
|
|
=colspacer
|
|
+colruler
|
|
background: #fff
|
|
color: #fff
|
|
|