Keystone Theme

Over the last few years I have been in situations where I need a simple base theme for both WordPress and Magento. There was nothing on the market so I set about writing Keystone Theme.

Features:

  1. Reset stylesheets to strip away CMS default behaviors.
  2. Enhanced 960px horizontal grid with 20px baseline grid.
  3. Bespoke stylesheet where you can add your own styles to radically alter the fundamental presentation.
  4. It works great with both WordPress and Magento and allows you to focus on styling the web page instead of dealing with quirks between the two systems.

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

keystone with grid lines

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

keystone with magazine / news paper

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

keystone with flower design

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; productivity is massively boosted and for the designer and you 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.

Release Notes:

Keystone Theme is provided as is. If you have any questions then please email me but note that I don't offer free support for this product.