The ZEN Grid in SASS give a lot of CSS

Question

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.

Answer 1

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.

Answer 2

Zen Grid is using Compass, and it is creating all of those browser prefixes for you so that all browsers look similar. But you are right this clutters up the CSS. Thankfully they have default boolean variables you can override allowing you to turn them off.

Add and set any or all of these to false to remove the extra prefixes:

$experimental-support-for-mozilla : true !default;
$experimental-support-for-webkit : true !default;
$support-for-original-webkit-gradients : true !default;
$experimental-support-for-opera : true !default;
$experimental-support-for-microsoft : true !default;
$experimental-support-for-khtml : true !default;

Reference Removing Vendor Prefixes from Compass Stylesheets from compass-style.org