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.

So, I’ve decided to start from Mass PageRank Checker tool. Sometimes I need to check Google PageRank for the large list of URLs. I also need to save the results with the ability to view them at any moment. I think this tool can be useful for a lot of people.

First, let me to describe what do we exactly need.

• The tool must be easy in use and have user-friendly GUI;
• The tool must check Google PageRank for the list of URLs;
• The results must be saved to the database;
• The user can view previously saved results any moment;
• Any results can be downloaded as .csv file or deleted from the database.

Ok, now let me to define technical requirements.

• Platform - Apache, PHP, MySQL;
• CSS framework - Blueprint;
• PHP framework - CodeIgniter

May be you want to ask me why I choose these frameworks and platform. The answer is just because they are really cool. And I will prove it in the next posts.

Further readings: Design layout for Mass PageRank Checker
Finally, Mass PageRank Checker tool!