A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

WordPress BlueprintCSS Skeletal/Bare-bones/Blank Slate Theme

It has become my habit that when designing a website, I always use the template that comes with the BlueprintCSS download. I always make sure that my design “fits” BlueprintCSS.

I am sharing my WordPress-BlueprintCSS Skeletal Theme. The theme is empty – you have to modify it to fit your design. It is also easy to modify because I have set the file templates to something like this:

<?php get_header(); ?>
<div class="container ">
    <div class="span-17" id="content">  
        <?php
                get_template_part( 'loop', 'index' );
        ?>
    </div>
    <div class="span-7 last">
        <?php get_sidebar(); ?>
    </div>
</div><!-- #container -->
<div class="container">
    <?php get_footer(); ?>
</div>

All the individual template files (page.php, index.php, single.php, etc.) are setup something like this. This way, it would be better because you will be able to specify the columns for each template.

Features

  • Easy to update columns. Columns are specified in template files (single.php, index.php, category.php, author.php, etc.
  • BlueprintCSS is located in /css/blueprint
  • Easily add your custom CSS in style.css
  • Based on the Twenty Ten theme
  • No images
  • Only the Menu and Image CSS is included in style.css – I think this is useful
  • The left side has 17 columns while the right side has 7 columns.

Download and Installation

  1. Download in Github https://github.com/wenbert/Wordpress-and-BlueprintCSS
  2. Extract to your /theme directory
  3. Enable the theme.

Please note that this is a work in progress. I encourage you to post your comments / suggestions below…

Screenshot:
. Vista :-(

This entry was posted in General. Bookmark the permalink.

2 Responses to WordPress BlueprintCSS Skeletal/Bare-bones/Blank Slate Theme

  1. Pingback: New blog theme | eKini Web Developer Blog

  2. Thanks for this. it’s very usefull

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>