Blankwork A blank canvas for your work

Simple, Flexible and Semantic

Blankwork is a simple, flexible and semantic grid system. It offers not only a semantic markup (no more clutter with "grid_4 alpha" or "one_third"), but also a lot more flexibility.
You can either download it right now, or look around to make sure that this is surely what you need.
Blankwork is written for SASS (Currently SCSS Syntax), but in time we might just port that to other frameworks as well.

Install instructions

Well, you don't really need them. You think you do ? Okay. Take the _blankwork.scss, put it in your project where you want to use blankwork, preferably next to the screen.css or in partials folder. And import it.

    @import "blankwork";
    

Thats it. Really. If you want to follow me on Twitter, look for @justnorris, I'll be tweeting updates as soon as there are any (and there will be...). Also, if you spot a bug, tweet me or fork it on Github

Basics

Set a number of columns, each column width and gutter between them. Thats it, you are good to go.

    $_columns: 12;         // Total number of columns
    $_column-width: 60px;  // Width of a single column
    $_gutter: 20px;        // Width of the gutter

    .wrapper {
      @include wrapper;
    }
    .content {
      @include column(9);
    }
    .sidebar {
      @include column(3);
    }
    

Flexibility

But what if you want to add for example a border, or padding into your element. Theoretically, that would break the design. Not anymore, Blankwork is flexible.

      $_columns: 12;         // Total number of columns
      $_column-width: 60px;  // Width of a single column
      $_gutter: 20px;        // Width of the gutter

      .wrapper {
        @include wrapper;
      }
      .content {
        padding:20px;
        @include column(9, 40px);
      }
      .sidebar {
        padding:20px;
        border:2px solid black;
        @include column(3, 44px);        
      }
      .advancedElement {
        padding:$padding;
        $border: $borderWidth solid black;
        @include column(3, $padding*2+$borderWidth*2);
      }
      

Mixin: column

column(column-count, subtraction, margin-override);

Parameters

Column Count: The number of columns (Default: Total number of $_columns)
Subtraction: Number of pixels to subtract from the calculated width, before returning it. Note, that you have to do a little box model math in your head. For example if you have padding of 20px on both horizontal sides, you need to subtract 40px. (Default: 0)
Margin Override: In case you need it. By default margin is set to the width of $_gutter and divided by 2 on each side ( 20px gutter does a margin 10px to left and 10px to right). (Default: $_gutter)

.element {
  padding:5px;
  @include column(9, 10px);
}

Mixin: wrapper

Wrapper is often called "Container" as well. Wrapper is the element that wraps around your design, sets a width and automatically centers it (can be disabled easily)

Parameters

Column Count: The number of columns (Default: Total number of $_columns)
Center: a TRUE or FALSE statement. If True -> center the element (Default: TRUE)
Subtraction:Same as in Column - Number of pixels to subtract from the calculated width, before returning it. (Default: 0)

.wrapper {
  @include wrapper;
}

.unCenteredWrapper {
  @include wrapper($center:false);
}

Mixin: Container

To be able to use columns inside another element, you need to set that element to be a container. For example if you have a container for a #content column or #sidebar.

Parameters

Column Count: The number of columns (Default: Total number of $_columns)
Subtraction:Same as in Column and Wrapper and - Number of pixels to subtract from the calculated width, before returning it. (Default: 0)

.container {
  padding:5px;
  @include container(9, 10px);

  .child {
    @include column(3);
  }
}

Function: get_width

You may want to get just the width of X column count ? Here you go.

Parameters

Column Count: The number of columns (Default: Total number of $_columns)
Inner Width Only: TRUE or FALSE statement. If TRUE - will return the width of column count, without the outer gutter(margin) width. If FALSE, will return the width including the outer margin Width

.thumbnail {
  width: get_width(3);
  height: get_width(3);
}

Simple 4 Boxes

Just to illustrate, that this actually is a grid system, and you can have 4 simple boxes, which sometimes is the case, but not too often as we know.

HTML

<div id="example1">
  <div class="ex-wrapper">
  <h3> Wrapper </h3>
    <p class="box"><span>Block Boxster</span></p>
    <p class="box"><span>Block Boxster</span></p>
    <p class="box"><span>Block Boxster</span></p>
    <p class="box"><span>Block Boxster</span></p>
  </div>
</div>

SASS

A white background and 1px border. Because of the border, we need to subtract 2px from each column. Works flawlessly. The span is there just to pretty things up.

#example1 {
    .box {
        background-color:white;
        border:1px solid black;
        @include column(3, 2px);
        height:get_width(3);

        span{
            position:relative;
            top:45%;
            margin:0 auto;
        }

    }
}

Two column content with two column sidebar

A more realistic way of a layout, but who has two columns for a content. Well we do. Because we can.
The content is set to be a container and has no margins. In general it is not the one that should have the background, it is just the container, but it's there. Actually in this scenario we could easily do the same thing without the content container. More useful when heights differ.

HTML

<div id="example2">


<div class="ex-wrapper">
<h3> Wrapper </h3>
  <div class="content">
  <h3>Content Here</h3>
  <p class="box"><span>Block Boxster</span></p>
  <p class="box"><span>Block Boxster</span></p>
  </div>
  <div class="sidebar">
  <h3>Sidebar Here</h3>
  <p class="box"><span>Block Boxster</span></p>
  <p class="box"><span>Block Boxster</span></p>
  </div>
</div>


</div>

SASS

Well, let the code speak for itself. Nothing complex at all. Column count, and the subtraction amount all over the place. Sidebar and content are in containers, and the elements in them are aligned easily.

#example2
{
    .content
    {
        background-color:lighten(gray, 40%);
        @include container(8);
        .box 
        {
            background-color:white;
            border:1px solid black;
            @include column(4, 2px);
            height:get_width(3);

        }
    }
    .sidebar
    {
        background-color:lighten(gray, 30%);
        @include container(4);
        .box
        {
            @include column(2, 2px);
            background-color:white;
            border:1px solid black;
            height:get_width(3);
            span
            {
                left: 20%;
            }
        }
    }
}

A single post layout with image

A more realistic scenario. Of course you wouldn't have a post or an article with full width, but in this case we do.

HTML

<div id="example3">

  <div class="ex-wrapper">
    <div class="post"> 
      <h3> Post Title </h3> 
      <img src="img/flower.jpg" />
      <p>
      Ripley Street was deserted, and except for a lighted window or so the village showed not a sign of life; but I narrowly escaped an 
      accident at the corner of the road to Pyrford, where a knot of people stood with their backs to me.  They said nothing to me as I passed.
      I do not know what they knew of the things happening beyond the hill, nor do I know if the silent houses I passed on my way were sleeping securely, or deserted and empty,
      or harassed and watching against the terror of the night.
      </p>
    </div>
  </div>


</div>

SASS

Just look with how little effort you get superb layout. I agree that some work should be done it still, but hey, it's a demo. If you can imagine how you'd do it, you can!

#example3
{
    .post
    {
        @include container;
        padding:10px;
    }

    img
    {
        width:get_width(2);
        float:left;
    }

    p
    {
        @include column(10);
    }

}

We touched the top of the iceberg...

Believe it or not, but writing a documentation is actually pretty time consuming. So, I still haven't touched much of the additional possible applications for this. For example it's easy to have a content width of 960px and use columns based on percentage instide that block. Also, mixing grid systems is easy. Say you want 960px grid system for the header, and a 1200px grid system for everything else. You can have that (think media queries), there are lots of options, which I hope that I'll be able to cover some day, probably in a screencast or three...