1

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.

JSW189
  • 6,267
  • 11
  • 44
  • 72
Mike Vierwind
  • 1,482
  • 4
  • 23
  • 44
  • 1
    If you remove the `box-sizing`, then you're going to have problems with the calculation of the element's width. `box-sizing` is what's allowing the 10px left/right padding to be calculated as part of the `33.33333%` width. Take it away and your element will become 20px wider and potentially break your layout. – cimmanon Dec 18 '12 at 15:18

2 Answers2

3

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.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • The problem is. The output gives a clear: left. With this clear left. The boxes are not floating. – Mike Vierwind Dec 18 '12 at 15:35
  • 1
    Right, the clear is there because you're calling the `zen-clear()` mixin, whose only purpose is to inject a the proper clear direction (left or right), on purpose. – cimmanon Dec 18 '12 at 15:38
0

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

Sean Keating
  • 1,718
  • 14
  • 28
  • 1
    Zen isn't using the Compass mixins, though. Toggling those variables will do nothing because the properties are written out by hand: https://github.com/JohnAlbin/compass-zen-grids/blob/master/stylesheets/zen/_grids.scss#L133 – cimmanon Dec 18 '12 at 15:34