We're hiring!

We're actively seeking developers and designers for our Detroit & Ann Arbor locations.

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.
    Thanks to Tom Lazar @ tomster.org (Also—thanks to one of our developers, Drew Colthorp, noticed a couple minor bugs in the original javascript and fixed them for me. See code below.)
$(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';
    };
}
Paul Hart (25 Posts)

I spend my time dreaming with clients, discovering users wants and needs, providing direction through “road maps” for the entire product development journey.

This entry was posted in UX/Design Tools and tagged . Bookmark the permalink. Both comments and trackbacks are currently closed.

7 Comments

  1. Posted January 4, 2011 at 3:04 pm

    Make sure to try compass style. It contains modified blueprint framework that makes it easy to keep your stiles highly semantic and contains bunch of useful mixins.

  2. Posted January 4, 2011 at 3:04 pm

    And, you might want to try compare Compass style http://compass-style.org/ which is build on top of Sass http://sass-lang.com/ with LessCSS lesscss.org

  3. Posted January 4, 2011 at 3:04 pm

    Thanks for the suggestion, Montreal. I actually did use Haml/Sass and Compass on this project. In my first draft of the article, I mentioned these, but chose to keep the scope of the blog post solely to Blueprint. I plan to do a post at some point about the advantages of using these together. All three of these are highly recommended!

    For this project, we chose not to use all the power that Compass provides through the use of semantic classes. We kept the Blueprint classes in the markup. We did this mostly for ease of readability for future maintainers of the system and also because of the final resting place of the html/css. I was working in a “static mockups” ruby-like environment and the developers were working in ASP.NET MVC. My markup, css, and javascript were ported to their environment as needed throughout the project.

  4. Posted January 4, 2011 at 3:04 pm

    Thanks. helpful article

  5. Posted January 4, 2011 at 3:04 pm

    Thanks for the article, man. Here is the source for those cheatsheets, with some newer versions:

    http://www.garethjmsaunders.co.uk/blueprint/

  6. Posted January 4, 2011 at 3:04 pm

    Thanks, the list save my time for experiment with blueprint.

  7. Posted March 2, 2012 at 6:58 am

    Nice description quite helpful for people starting to use blueprint css framework

One Trackback

  1. By CSS Framework Frustration | Atomic Spin on August 9, 2011 at 3:13 pm

    [...] 08/09/2011: For more recent information about our experience with implementing CSS frameworks, see this post or visit our web category.The question of whether or not to use a CSS Framework has come up of [...]