Lately, I’ve taken a liking to building WordPress themes using a combination of the WordPress Sandbox and the Blueprint CSS Framework. If you’re a designer who builds custom WordPress themes and you haven’t heard of either of these two masterpieces of code, an introduction is in order. Then, after you’ve met, I’ll show you how to invite Blueprint to come and play The Sandbox.
The WordPress Sandbox – The perfect start to your next WordPress theme
Straight out of the box, the WordPress Sandbox theme is an exercise in styling simplicity. Lacking any graphics and featuring white on black text, the theme is just waiting for a CSS wizard to craft her next masterpiece.
In addition, the theme features a couple of custom functions that generate CSS classes for the specific context of a particular markup element. For example, let’s say you want to style posts in your “Reflections” category different from posts in your “Quotes” category. Custom functions in The Sandbox make this easy by generating custom class selectors specific to each category.
All-in-all, The Sandbox comes with all the basic building blocks you need to get started building your own custom theme. Having built custom themes using The Sandbox over the past year, I wouldn’t think of starting anywhere else.
The Blueprint CSS Framework – A Solid CSS Foundation
During the past couple of months I’ve become aware of the Blueprint CSS Framework. While I’ve been working with The Sandbox, I keep finding myself coding the same basic CSS declarations for headings, paragraphs, lists and the like. During that time, I’ve thought about coming up with my own basic rules to include with The Sandbox; however, fortunately the Blueprint Framework far outdoes what I was thinking. Among other things, it features:
- An easily customizable grid
- Sensible typography
- Relative font-sizes everywhere
- A typographic baseline
- An extendable plugin system
- Perfected CSS reset
- A stylesheet for printing
- No bloat of any kind
It’s the perfect baseline for my CSS. Furthermore, I’ve only just begun to grasp and harness the power of its grid which allows for precise placement of your columns and other design elements.
Invite Blueprint to Play In The Sandbox
Enough with the introductions, let me show you how to get these two code bases working together:
- I’ll start by assuming you’ve got WordPress installed and you’re using The Sandbox.
- Next, you’ll want to download and unzip the Blueprint CSS Framework, and grab the blueprint folder inside the archive.
- Place the blueprint folder inside the folder for your Sandbox theme.
- Open the main stylesheet for the Sandbox theme, and add the following at the top of the file:
- Next, open header.php and add the following code in the <head>:
<link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/blueprint/print.css" type="text/css" media="print" /> <!--[if IE]><link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
- Finally, while still in header.php, add container to the <body> class attribute:
<body class="<?php sandbox_body_class() ?> container">
That’s it. You’re now ready to build your own custom theme using the WordPress Sandbox and the Blueprint CSS Framework!