[SOLVED] The ZEN Grid in SASS give a lot of CSS

The ZEN Grid in SASS give a lot of CSS

I used the ZEN Grid system for SASS in my project. I want a simple 12 columns 960 grid.

I use this code:

$legacy-support-for-ie6: false;
$legacy-support-for-ie7: false;
@import "zen";

$zen-column-count: 12;
$zen-gutter-width: 20px;


.row {
    @include zen-grid-container;
}

.col-6 {
    @include zen-clear();
    @include zen-grid-item(4, 1);
}

But now comes the problem. The .col-6 get a lot of CSS now. ZEN Grids give the .col-6 class this CSS:

clear: left;
float: left;
width: 33.33333%;
margin-left: 0%;
margin-right: -33.33333%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;

How can I remove the clears, margins, box sizing and all that CSS. I only want the simple CSS properties for the grid.

Solution

The clear is coming from the zen-clear() mixin: https://github.com/JohnAlbin/compass-zen-grids/blob/master/stylesheets/zen/_grids.scss#L170

If you look at the source, there's additional parameters to the zen-grid-item mixin (https://github.com/JohnAlbin/compass-zen-grids/blob/master/stylesheets/zen/_grids.scss#L71), which will allow you to turn off the box-sizing:

@include zen-grid-item(4, 1, $box-sizing: content-box);

The other properties are a little more difficult to remove. If all else fails, you could overwrite Zen's mixins with one of your own.