Over the last few years I have repeatedly been in situations where I am working with multiple clients on tight time scales. After finishing the design of a website I then moved on to the build process often integrating designs from Photoshop PSD's into HTML / template markup for WordPress and Magento.

Time after time, I would pick an off-the-shelf template that closely matched the required design or a generic bare bones template and build from the ground up. The process was slow and often involved chopping large parts of CSS and PHP from template files. This was a time consuming and incredibly boring process that resulted in an acceptable build quality, but not something I could be proud of.

I thought: "surely there is a better approach?!"

So, I set about creating Keystone Theme.

Keystone Theme uses a 20 pixel baseline grid which scales really well with both small and large type fonts and the 20 pixel grid is also used for horizontal positioning. So, what you end with is 20 pixel grid running across the web page.

To complement this, I have created a very flexible markup structure that allows a variety of styles to be applied to various page content units such as header, main content, side bar, etc.

Take a look at these screen shots for some examples of how easy it is to style a site with Keystone Theme:

body{
background:url(../images/bespoke/grid/10px_line.gif);
}
.header{
padding:20px 0 10px;
}
.col-main{
padding:10px 0;
}
.footer{
padding-top:10px;
}

background:url(../images/bespoke/magazine/body_bg.gif) repeat-x;
}
.header-container-block{
background:url(../images/bespoke/magazine/paper_main_bg.png) center top repeat-y;
}
.header{
padding:20px 0 10px;
}
.navigation-container-block{
background:url(../images/bespoke/magazine/paper_main_bg.png) center top repeat-y;
}
.main-container-block{
background:url(../images/bespoke/magazine/paper_main_bg.png) center top repeat-y;
}
.col-main{
padding:10px 0;
}
.footer-container-block{
background:url(../images/bespoke/magazine/paper_footer.png) center top no-repeat;
height:175px;
}
.footer{
padding-top:10px;
}

body{
background:url(../images/bespoke/flower/BirdsNBerries.png);
color:#2C2F22;
}
.grid-container{
padding:0 20px;
border:solid #212121;
border-width:0 1px;
}
#header-container{
background-image: url(../images/bespoke/flower/border.png);
background-position: center bottom;
background-repeat:repeat-x;
background-color:rgba(161,181,92,0.7);
}
.header-container-block{
background:url(../images/bespoke/flower/transparency.png) center top repeat-y;
}
.header{
padding:20px 0 10px;
}
.navigation-container-block{
background:url(../images/bespoke/flower/transparency.png) center top repeat-y;
}
.navigation{
padding-top: 20px;
}
.main-container-block{
background:url(../images/bespoke/flower/transparency.png) center top repeat-y;
}
.col-main{
padding:10px 0;
}
.footer-container-block{
background:url(../images/bespoke/flower/transparency.png) center top repeat-y;
height:auto;
}
.footer{
padding-top:10px;
}

I have tried to make Keystone Theme as nimble and lightweight as possible, so that a site can be styled quickly with the minimum of fuss. The only convention is that elements need to be vertically aligned to a 20 pixel baseline grid.

The real beauty of Keystone Theme is the fact that browser defaults are separated from CMS styles and the top layer of design - the look and feel - is separated further still. This means you can adapt to a new browser without affecting core CMS styling or add a new CMS feature without affecting the top layer of design. Data is separated from presentation.

The bottom line is that for the web developer, their productivity is massively boosted and for the designer, they have freedom of expression without being bound by technical issues. Awesome!

If you are interested in how Keystone Theme can work for your business then please get in touch and I will happily advise you in getting the most from your website budget.