Blueprint Scaffolding

Blueprint scaffolding

Scaffolding gets you basic out of the box style and some classes to start styling your application. It's not great looking style but it will get you there. In other words, it helps you draft your website. (See Blueprint Scaffolding)

The markup

We will take the first example of this series, a lipsum sites with a header, a footer and 3 cols.

  <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>

I added some minor changes. There now 2 hr elements in the header and each of the 3 columns on the middle row have a special div.

The purpose of the hr is to separate section of the style. The first with a separtor (default). But if we want just space, just add the "space" class to the hr.

The divs in the middle row all have the class "box". This is a quick way to tell our designer there will be boxes there. The last two boxes have "border" and "colborder" respectively. They both add a border to the right hand side of the boxes while the last (colborder) also span 1 column.

The style

As usual the style is very quick and easy. Just import/include blueprint-scaffolding as below.

@import "blueprint/reset";
@import "partials/base";
@import "blueprint";
@import "blueprint/scaffolding";

@include blueprint-typography;

#container {
  @include container;
  @include blueprint-scaffolding;
}

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

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

#lipsum-3 {
  @include last;
}

Last words

While scaffolding should not go into your production stylesheet it's a good way to draft a website, especially if you are not the designer. In don't really get the use of border and colborder classes thought.