diff --git a/.gitignore b/.gitignore index 5f67ac0..c74aca9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ *.swo *.swp +test/* +.DS_Store diff --git a/Gemfile.lock b/Gemfile.lock index 5668f0a..fe521f2 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,20 +1,20 @@ PATH remote: . specs: - crispy-grid (0.0.1) + crispy-grid (0.5.0) compass (>= 0.11) - sass (>= 3.1.0) + sass (>= 3.1.2) GEM remote: http://rubygems.org/ specs: - chunky_png (1.2.5) - compass (0.11.3) + chunky_png (1.3.1) + compass (0.12.6) chunky_png (~> 1.2) fssm (>= 0.2.7) - sass (~> 3.1) - fssm (0.2.7) - sass (3.1.10) + sass (~> 3.2.19) + fssm (0.2.10) + sass (3.2.19) PLATFORMS ruby diff --git a/README.md b/README.md index bd58801..53d94fb 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,23 @@ $grid-columns: 30, 24, 24, 13 @import crispy/grid ``` +### Clearfix Configuration +Clearfixing has to be done in order to enforce the container to enclose its content. Crispy Grid uses the [Compass Clearfix Utility](http://compass-style.org/reference/compass/utilities/general/clearfix/) which provides two kinds of clearfixes: Overflow and Pie. +By default, the overflow: hidden method is used. This might get in your way when you have content that wants to 'break out' of your container. +Use `pie` if container contents should be visible outside of the container (e.g. when positioned absolutely). +Crispy allow you to set your preffered clearfix project-wide by using +the `$grid-default-clearfix` variable. So just add the following to your +crispy config: + + +``` sass +$grid-default-clearfix: pie +``` + +If you don't provide any value, Crispy will default to the `overflow` +method. You can also override your specified default for single elements +by providing `$clearfix` for a `+grid-container` (explained below). + ### Configuration for using border-box By default, Crispy Grid mimics this more natural behavior for a box-sizing: content-box setting by doing calculations. If you start a new project and do not have to support IE7, we recommend you to use box-sizing: border-box instead. @@ -210,10 +227,8 @@ Use might also find these mixins useful: * see above * `clearfix` * Clearfixing has to be done in order to enforce the container to enclose its content. - * Default: overflow + * Default: Value specified for `$grid-default-clearfix` * Possible values: `overflow`, `pie`, `pie-clearfix` (same as `pie`) - * By default, the overflow: hidden method is used. This might get in your way when you have content that wants to 'break out' of your container. - * Specify `$clearfix: pie` if container contents should be visible outside of the container (e.g. when positioned absolutely). * See the used [Compass clearfix lib](http://compass-style.org/reference/compass/utilities/general/clearfix/) ## Changelog diff --git a/stylesheets/crispy/_grid.sass b/stylesheets/crispy/_grid.sass index 372ee21..fe738ca 100644 --- a/stylesheets/crispy/_grid.sass +++ b/stylesheets/crispy/_grid.sass @@ -10,6 +10,7 @@ $grid-gutter-width: false !default $grid-gutter-widths: false !default $grid-columns: 24 !default $grid-box-sizing: content-box !default +$grid-default-clearfix: overflow !default @function default-device() @return $device or nth($devices, 1) @@ -75,7 +76,7 @@ $grid-box-sizing: content-box !default // Unlike with columns, paddings and borders of a container do not affect its inner width. // Clearfixing has to be done in order to enforce the container to enclose its content. // By default, the overflow: hidden method is used. Specify $clearfix: pie if container contents should be visible outside of the container (e.g. when positioned absolutely). -=grid-container($device: default-device(), $colspan: grid-columns($device), $padding: 0, $differing-right-padding: false, $border-width: 0, $differing-right-border-width: false, $left-margin: auto, $right-margin: auto, $clearfix: overflow) +=grid-container($device: default-device(), $colspan: grid-columns($device), $padding: 0, $differing-right-padding: false, $border-width: 0, $differing-right-border-width: false, $left-margin: auto, $right-margin: auto, $clearfix: $grid-default-clearfix) +column-metrics($colspan, $device, $padding, $differing-right-padding, $border-width, $differing-right-border-width, $right-margin, $left-margin, true) @if $clearfix == pie or $clearfix == pie-clearfix +pie-clearfix