Adding Blueprint CSS to your Wordpress Theme.
This tutorial assumes that you have already installed Wordpress, if you have yet to do so check out the 5min Wordpress installation or check with your hosting company, many come with a ‘one click install’ option. In this tutorial we’ll be adding Blueprint CSS to the powerful blogging platform Wordpress. This tutorial has been written using Wordpress 2.9.2.
What is Blueprint CSS and why should we care?
Good question. Blueprint CSS is a CSS framework that provides structure to your design. When installed it comes with a grid already in place, typographic styling and other goodies that give a nice foundation for the styling of your content. It is easy to use and probably the most important thing about Blueprint is the amount of time and headache it can save.
If you decide to use a custom grid generated from bluecalc you need to modify one of the provided stylesheets (steps 2 &3) .
2. Open the screen.css file in your favorite text editor
3. In that file, replace the code under the comment /* grid.css */ (and before the comment /* forms.css */) with the one provided to you through the generator.
*Please Note* I happen to be using a child theme of Thematic but it is not required to install Blueprint.
4. Once your style sheets are set create a folder called ‘CSS’ inside the theme folder you are using(found within the WP-content folder), and place the downloaded blueprint folder within ‘CSS’. Create another stylesheet called ’style.css’ that will become your personal stylesheet for styling your blog. This will allow you to modify the styling without having to disrupt the styling already in place by Blueprint CSS. See below for a screenshot of file structure:
Great, now Blueprint is in your theme and ready to be called to action. To do this we need to call it with a little bit of PHP since it is working in a dynamic setting.
5. Open your funcitons.php file (found in your theme folder) in your favorite text editor
6. Using PHP we’ll need to call each of the provided stylesheets downloaded through Blueprint CSS as well as our stylesheet that we’ll be modifying. Insert the code below and be sure to insert the directory name you are using in place of the text ‘XXXXX’ below. The first 3 functions call the stylesheets provided by Blueprint CSS, the final is the custom stylesheet you’ll be using. NOTE ***This stylesheet should always be called last.***
7. Finally let’s invite Blueprint to the party.
In your style sheet ’style.css’ you’ll want to import the blueprint provided ’screen.css’ file at the top of your imports if you happen to have multiples as with Thematic.
/*Invite Blueprint to the party*/ @import url('blueprint/screen.css');
That’s it for the addition of Blueprint CSS
Now you can add classes to your HTML to span various columns within your grid as shown in the youtube tutorial. You can also DL a cheatsheet for Blueprint here:
Good luck and happy styling!