10 Things I Learned about Blueprint CSS

As a designer I have an appreciation for clean, hand-crafted CSS—but also for getting things done quickly. Using a good CSS framework like Blueprint CSS provides a lot of tools that make the layout of the page much quicker and easier to implement. It also provides a comprehensive approach to resetting and fixing known browser issues and bugs. While Blueprint introduced more markup than I was comfortable with at first, I quickly learned its advantages. Here are a few things I learned about Blueprint.

1. First, I found a nice Blueprint cheat-sheet.
2. To install and set up Blueprint, use the project generator. It sets things up nicely and includes all the extras.
3. Make sure your page is NOT rendering in quirks mode when using Blueprint. The basic fix for this is to set the DOCTYPE (see more about Quirksmode)
4. Let the tool do the work. While using Blueprint to lay out your page, try to use the given classes and selectors when possible before adding custom markup or CSS to your project. The more you can use the pre-defined syntax, the easier it is to read and maintain, and the smaller your CSS file will be. If you would like to update Blueprint at some point at some point in the future you can simply replace the old files to take advantage of new features. As with any grid system, never modify the source files of the grid itself.
5. Get to know the Blueprint syntax and how each element works before you begin. Here are the basics:
   • .container — Wrap your entire layout in a div with this class.
   • .span (e.g.: .span-24 is the width of the container and 3 div.span-8 inside will float 3 columns of equal width)
   • .prepend-x — adds any number of columns (in the form of padding) to the left side of your div; x = ‘1 to n’ number of columns
   • .append-x — adds any number of columns to the right side of your div; x = ‘1 to n’ number of columns
   • .prepend-top — Adds 1.5em of space above the div
   • .append-bottom — Adds 1.5em of space below the div
   • .last — removes the margin from the div (mostly used on the last div in a series, but can be used on any div)
   • .border — Adds 1px border on right hand side of a column.
   • .colborder — Border with more whitespace. Spans one column with the border in the center.
   • hr and hr.space — A predefined horizontal rule, with the option of one that is “invisible” for adding space between divs.
   • .push-x — Push an element any number of columns to the right; x = ‘1 to n’ number of columns
   • .pull-x — Pull an element any number of columns to the left; x = ‘1 to n’ number of columns
   • .box — Creates a padded box inside a column.
   • .clear — Apply to a column that should drop below previous ones.
   • .clearfix — Clear floats without extra markup. (Before using this see Everything you know about clearfix is wrong“)
   • .showgrid — Use on any div to hide or show the column.
6. Understand the difference between prepend/append and push/pull. Keep in mind that ‘prepend’ and ‘append’ will add PADDING to the inside of the containing div. Use ‘push’ and ‘pull’ to add MARGIN to the left and right, respectively.
7. Over-rides are fine (just put them into your custom CSS). For example, Blueprint (or any grid system for that matter), doesn’t do “half” grids. What about when you want to push your div just 13 pixels right or left? No tools inside Blueprint to do that. However, there were a couple exceptions where I pushed a div a few pixels to the right or left in my CSS because I had adding space somewhere else that pushed the div off my grid. It was a choice I made to add a little breathing room to my design. Everything in moderation!
8. Include the IE stylesheet fixer-upper in the beginning. @import blueprint/ie. Doing so will save you a lot of IE fixing time, and probably include fixes you didn’t even know were needed. On this project, I made the mistake of not pulling in the ie stylesheet at the beginning, and had to undo some manual IE fixes I had implemented. Live and learn.
9. When using a design with a different page width than the standard grid width (960px), use a blueprint generator to come up with the new CSS or define it in _base.scss and let Blueprint do the rest. Don’t forget to resize the grid.png if you change your column or margin width. There are several Blueprint generators out there to choose from https://github.com/joshuaclayton/blueprint-css/wiki/Tools-and-Resources. I used http://bgg.kematzy.com/
10. Implement the javascript fix to toggle showgrid on and off. It’s much handier to click a link on your page rather than having to manually add a class to a div every time you want to see the grid overlay.

$(document).ready(function() {
  var foo = "<div id='debug'>" +
    "turn grid: <a href='' id='togglegrid'>" +
      gridstate() + "</a></div>";
    $("body").append(foo);
    $("#debug").css("position", "absolute");
    $("#debug").css("bottom", "0");
    $("#togglegrid").click(toggle_grid);
});

function toggle_grid () {
    $(".container").toggleClass("showgrid");
    $("#togglegrid").text(gridstate());
    return false;
}

function gridstate () {
    if ($(".container").hasClass("showgrid")) {
        return 'off';
    } else {
        return 'on';
    };
}