Using The WordPress Sandbox and The Blueprint CSS Framework Together
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!
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.
Adam, thanks for commenting. Furthermore, I’m just happy that one of my commenters has used the word “reticent” in his comment.
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.
gr. the comment engine snipped the last bit of the code. email me if it isnt clear what needs to be changed. thanks!
@ 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!
@james – BTW: The template I’m running right now is an example of the very technique that I describe in this tutorial.
cool, the site looks good, i will post here when i get my new project up.
Thank you for the sensible combination of these two great frameworks. I followed your directions and yes it seems to have worked.
Just a note to add to the information here, my css editor, Skybound Stylizer, picked up 4 css sheets for editing. They are print.css, style.css, screen.css, and 2c-l.css.
Question: Is there any mechanism to just work on a custom.css file that can overide these 4 base css files? (I guess I could always upload and original, if my css changes get to far off track.)
Thanks, James
@James Gross – Glad you found this tutorial useful. Regarding your question about using a custom CSS file that can override the 4 base css files:
As an advanced step: I generally follow this process:
Finally, if you want to get rid of screen.css all together, you can just copy and paste the CSS from that file directly into style.css (i.e. the default stylesheet used by all WP themes). However, I wouldn’t recommend doing that as the reason why I have written the tutorial this way is to allow you the option of upgrading Blueprint should a new version be released in the future.
Thanks for this down to earth tutorial. I do have one question though…
I am hoping to create a theme derived from Sandbox, using the method defined here (http://codex.wordpress.org/Theme_Development#Theme_Style_Sheet). My goal is to modify the original Sandbox theme as little as possible, while still integrating Blueprint. Do you have any suggestions for doing this?
[...] Using The WordPress Sandbox and The Blueprint CSS Framework Together » Go Web Young Man (tags: wordpress blueprint) [...]
Well I am gonna try this and see what can come out of it. In fact I will redesign my business of Webdesign in the coming weeks.
@James Gross and Michael- for me, a more elegant solution for having a custom style sheet is to create a child theme of sandbox, as outlined here:
http://themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades/
So the basic steps would be to follow the method here and then create a child theme of Sandbox and then select this as the active theme.
I also update my themes using SVN – so I put the Blueprint directory inside the folder with my child theme (let’s call it ‘sample’) and then link to it like this:
@import url(‘../sample/blueprint/screen.css’);
That way Sandbox can be easily updated to the latest version using SVN and the child theme(s) and Blueprint code are not affected by the upgrades. It’s probably a good idea to tell SVN not to update the header.php file otherwise you’d have to keep making the modifications listed above in the tutorial- this is done by adding hader.php to the svn:ignore file.
I am currently designing a new theme using this method which I’ll be using on my site as soon as it’s done.
Thanks for the excellent article, and I really like what you’ve done with this site.
@Guy: An elegant solution indeed! Thank you so much for sharing your expertise. I will definitely have to start implementing the technique you outline.
I’m thinking your comment is now the front runner for “Comment of the Year”.
You’re welcome Michael!
Is there a prize for ‘Comment of the Year’?
[...] post is an expanded version of a comment I made here, plus some new information I’ve since [...]
Thanks for turning me on to BluePrint CSS! I don’t know how much I will use it with WordPress but I have already saved a lot of time with some of my other web projects I’ve been working with.
I’ve just ate my words. I took 10 minutes and it fixed some problems I’ve been having with my WordPress theme and overall cleaned up my stylesheet considerably. I used @Guy’s ideas of creating a sub-theme and it seems to be working great.
@Mark Young: Yes, Guy’s suggestions have helped me to streamline my dev process and clean up my code considerably. Thanks for dropping by. I’m glad this post was able to help you out.
[...] J. Michael Wender’s post on Using BluePrint CSS with WordPress [...]
@Michael: I have found that when using the block quote in wordpress that it would convert my quotes into “pretty quotes” and the only way to get around that was to use the
blocks in the post editor. maybe that will work for your problem you was having as well?Hello,
Thanks for this tutorial, which reconciled me with Sandbox (the CSS reset part was the primary reason why I have abandonned Sandbox). Just one little addition:
Between steps 3 and 4 of your tutorial, add the following: “If you want to edit the files straight from WordPress, change permissions on style.css and header.php from 755 to 775”
Also, since the publication of your article, it seems blueprint had changed quite a bit. You must add another line for it work in Sandbox:
And for clarification, crediting and summarizing, the whole modification in the head :
Guy really deserves the comment of the year! Sandbox + Blueprint + Child Theme is the way to go for me!
[...] are required because the blueprint code change since the publication on michaelwender.com. I added the said modifications in [...]
@David Latapie: Thanks for the update!
Everyone, my CSS cuts off David’s code; however, if you highlight it and copy it, it will grab all that is there.
I can’t see any trackback URL here, so I’ll mention it manually.
I wrote a short article summarizing the whole thing. It needs extra fixing though, especially considering that the child theme doesn’t work for me (I suppose it comes from an incomplete understanding of the @import rule from me)
http://david.latapie.name/blog/3997-bluebox-child-skeleton-definitive-wordpress-starter-theme-so-far?lang=en
[...] Grands mercis à Scott Wallick et Andy Skelton pour Sandbox, Olav Bjorkoy et Christian Montoya, Joshua Clayton, Chris Eppstein and Glenn Rempe pour Blueprint, Michael Wender pour le didacticiel pour combiner les deux, Ian Stewart pour le didacticiel sur les thèmes enfants et Guy James Staniforth pour mélanger celui-ci avec la précédente combinaison. [...]
[...] car le code de Bllueprint a changé depuis la publication sur michaelwender.com. J’ai ajouté lesdites modifications en [...]
Cool tutorial. I love Blueprint CSS. Combing with WP would be a perfect choice for my development needs. No need to learn new stuff
[...] Using The WordPress Sandbox and The Blueprint CSS Framework [...]
[...] SandBox BluePrint CSS Theme y WordPress [...]
[...] Using The WordPress Sandbox and The Blueprint CSS Framework Together [...]
[...] Using The WordPress Sandbox and The Blueprint CSS Framework Together [...]
[...] Using The WordPress Sandbox and The Blueprint CSS Framework Together [...]