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:
@import url('blueprint/screen.css'); - 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!
7 Comments
Permalink
Interesting; I’ve been reticent to dive into the Sandbox or Blueprint… and yet, there’s a keen method to this madness.
I’ve been investigating various frameworks, and these two seem to be champs (one of my own sites uses The Morning After, too, so I’m semi-familiar w/ Blueprint). Putting the two together just may be the best of both worlds… if, I can figure out all the classes and stuff!
Breathe… patience… and give it time. That’s what I’m telling myself. Good stuff, though. Thanks for the merge.
Permalink
Adam, thanks for commenting. Furthermore, I’m just happy that one of my commenters has used the word “reticent” in his comment.
Permalink
I am just getting started on this, and i am glad to find your snippets of code here, but i think you used an emdash instead of two hyphens in the and, i dont know if it matters, but you used ’ instead of ‘ in ’template_directory’. so really the code should read:
<link rel=”stylesheet” href=”/blueprint/print.css” type=”text/css” media=”print” />
And just for the sake of clarity, my body tag now looks like:
<body class=” container”>
thanks for the good work, seeing the code on here gave me the guts to try it out myself. please post more as you integrate these two very cool tools.
Permalink
gr. the comment engine snipped the last bit of the code. email me if it isnt clear what needs to be changed. thanks!
Permalink
@ james - For the second snippet in the post, there should be two dashes to indicate the closing of the html conditional statement. I have corrected that error.
Also, regarding the single quotes in the second snippet: In every instance where there is a single quote, it should be the standard single quote character found to the right of the semicolon key on a QWERTY keyboard. However, after a thorough investigation, I found that WordPress or the Syntax Highlighting plugin was translating the second set of single quotes into “closing curly single quotes.” I even checked the database and found that I have the data in there correctly; however, as it gets rendered, the quotes get incorrectly translated somewhere.
SO, to fix this I used double quotes in the call to bloginfo(); — now the code is syntacticly correct although not syntactically preferred (i.e. it would be preferred to use single quotes because there is no need to parse the text found in the function call).
Finally, I’ve added a third snippet which shows what your body tag should look like after adding the “container” tag.
Cheers!
Permalink
@james - BTW: The template I’m running right now is an example of the very technique that I describe in this tutorial.
Permalink
cool, the site looks good, i will post here when i get my new project up.