Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
*.swo
*.swp
test/*
.DS_Store
14 changes: 7 additions & 7 deletions Gemfile.lock
Original file line number Diff line number Diff line change
@@ -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
Expand Down
21 changes: 18 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion stylesheets/crispy/_grid.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand Down