Just finished new design for my blog. It’s fully based on Blueprint CSS framework. After I used it for Mass PageRank Checker tool’s design layout, I decided to use it for the blog’s design too and may be for all my tools and sites. It’s really cool thing.

I will not write a new tutorial about Blueprint in this post but I will give you some useful links which will help you to learn it.

• Official Blueprint tutorial
• Blueprint Google Group
• BlueprintCSS 101 - Nice article about Blueprint features
• Hands on with Blueprint, a CSS Framework - Great blueprint tutorial with code examples
• First Impressions of the Blueprint CSS Framework
• Blueprint Cheat Sheet (PDF)

These are enough to learn how to create really nice web-pages using Blueprint.

First, I wanted to find some cool template from oswd.org for the Mass PageRank Checker tool, but then I decided to create myself a very simple design for it. And taking into consideration that I found Blueprint CSS Framework some days ago I decided to use it in my project.

What is Blueprint CSS Framework? Technically it’s a set of css-files which contain a set of CSS classes and formatting rules that simplify a process of web page creation and design layout building. You can learn more details about it on Blueprint CSS Framework site.

So, I divided all web-page space into 4 parts: top part with header, left part with form, right part with saved previous results table and bottom part with current results table.

Each part is in the separate div - form, previous and results. Look at this code:

<div id="header" class="container">
</div>
<div id="main" class="container">
  <div id="form" class="span-12">
  </div>
  <div id="previous" class="span-12 last">
  </div>
</div>
<div id="results" class="container">
</div>

The code for all parts is easy. The only thing is that I just added some formatting to the original Blueprint’s one:

th {
  border-bottom: 2px solid #CCCCCC;
}
td {
  border-bottom: 1px solid #DDDDDD;
}
.hand {
  cursor: pointer;
}
.hl:hover {
  background-color: #FFFFD9;
}
.center {
  text-align: center;
}
a {
  text-decoration: none;
  color: #000000;
}
a:hover.red {
  color: #FF0000;
  text-decoration: underline;
}

Result page looks like on the following image:

You can download html-page with css files here.