Compass Grid Backgrounds

Compass Grid Backgrounds

In previous examples, I used the blueprint's showgrid mixin to debug our grid. There is another way which is more flexible. The other mixin is not part of the blueprint framework, it's in compass. In fact, this is the first example that doesn't use only blueprint. I will show the compass way to debug a grid with a liquid layout.

The markup

The markup hasn't been modified at all since example 01...

  <div id="container">
    <header>
      <h1>Lorem ipsum</h1>
      <hr />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </header>

    <hr class="space">

    <section id="lipsum-1">
      <div class="box">
        <p>Cras elementum tortor in arcu tincidunt ut rhoncus quam posuere.</p>
      </div>
    </section>

    <section id="lipsum-2">
      <div class="box border">
        <p>Duis vel tellus tellus, non condimentum ligula. Proin sagittis dignissim turpis, vitae semper dui tristique non.</p>
      </div>
    </section>

    <section id="lipsum-3">
      <div class="box colborder">
        <p>Morbi sed lacus elit, sed bibendum massa. Donec venenatis posuere eros vitae sollicitudin.</p>
      </div>
    </section>

    <footer>
      <p>Curabitur cursus nisi et odio interdum vulputate. Etiam vestibulum hendrerit nunc tincidunt fringilla.</p>
    </footer>
  </div>

The style

The style start with the same style of the blueprint liquid grid example with the difference that the main container include the grid-background mixin. (See [Compass Grid Backgrounds][http://compass-style.org/reference/compass/layout/grid_background/#const-grid-background-column-width])

@import "blueprint/reset";
@import "partials/base";
@import "blueprint";
@import "blueprint/liquid";
@import "compass/layout/grid-background";

@include blueprint-typography;

#container {
  @include container;
  @include grid-background;
  width: 99%;
}

header, footer {
  @include column($blueprint-grid-columns);
}

#lipsum-1, #lipsum-2, #lipsum-3 {
  @include column($blueprint-grid-columns/3);
}

#lipsum-3 {
  @include last;
}

Out of the box, this doesn't work with the liquid grid because the default values are in pixels. I hope you remember where to write the code to override it, right ? This is in the _base.scss partial for those who has momentarily forget.

@import "blueprint/liquid";

$grid-background-column-width: $blueprint-liquid-grid-width;
$grid-background-gutter-width: $blueprint-liquid-grid-margin;
$grid-background-offset: 0;

This boilerplate set the compass grid background to the default of the blueprint liquid grid. (See Blueprint Liquid)

Last words

There is nothing wrong with using the blueprint showgrid mixin. It's just that the compass ones is mush more flexible and customizable. It's not just the fact it can be adapted to a fluid grid, you have much more control on the display of it.