Of the two, I now use… neither!

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Just the other day I built a nice page in a matter of a few minutes using Bootstrap, from Twitter and it has me totally sold. If you need to throw something together quickly, then this is the way to go. Things I like about Bootstrap:

• Single css file to include which includes reset CSS (no need for multiple css files).
• Remotely hosted for quickstart. Bootstrap itself suggests to use <link rel=”stylesheet” href=”http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css”>
• Simple markup
• Customizable fixed or fluid layouts
• Typography that just works (check out the inline labels).
• Media markup (although I haven’t actually understood the purpose of it yet).
• Very nice Tables with support for tablesorter.
• Beautiful Forms with sexy buttons.
• Navigation/Tab/Breadcrumb/Pagination
• Sexy Alerts & Navigation 
• … and a whole bunch of things you can do by adding small javascript snippets, such as modal dialogs, popovers, etc…

Definitely worth checking out if you are researching CSS frameworks and haven’t tried it yet!

Related posts:

1. CSS Frameworks, 960 Grid System vs Blueprint CSS
2. New Google Navigation Bar

Don’t ask me why, but my first chosen CSS framework to play with was Blueprint CSS. So I print out a friendly cheatsheet and go over a few examples and everything seems to work fine and I think that’s great, that will come in handy one day. That day was Thursday, when at the office, I was asked to slice up a JPG and make it look like a real website. I said I’d have it done by the end of Friday. Little did I know that Blueprint CSS was going to let me down, which it did. I got stuck on the very first block and via this post, maybe somebody can spot where I might have gone wrong.

Note that for the following test, I have removed all other javascript and css files from my page and the only thing loaded is the Blueprint CSS framework, nothing else. Let’s take a look at the code:

<div class="container">
    <div class="span-24 last">
        <div class="span-4 first">4</div>
        <div class="span-10">10</div>
        <div class="span-10 last">10</div>
    </div>
</div>

Based on samples and support threads that I have read, the first “last” on the span-24 should not be required as it is “special cased” apparently and nor should the “first” in span-4 be needed but I have tried everything with and without these to no effect. Note also that NONE of these div have any borders, padding or margins applied to them whatsoever (If you need borders/padding/margins, you apply it to elements inside the span-x divs because Blueprint CSS is a “pixel perfect” framework). I also tried removing the span-24 div altogether, leaving just the 3 inner divs.

So, what do you expect to see? I expect this:

Instead I get this:

I tried different doctypes, disabled all of my Firefox extensions, tried in Chrome, Opera etc… without any difference. By now I’m very frustrated that I can’t do the most simple thing that I could do manually in CSS, but that’s besides the point. Blueprint CSS should work as advertised or at the very least provide better documentation to deal with the demonstrated problem.

Having passed my Friday deadline for the mockup, I’ve had to find an alternative and fast and work through my weekend to have it done for Monday morning. And that’s where 960 Grid System comes in to the picture. I’d seen this framework before, never used it but liked the look of it, and quite like the idea that it is ~6KB to load up instead of ~15KB that’s needed with Blueprint CSS.

Now, although I still haven’t been able to find a cheatsheet for the 960 Grid System, I found a basic tutorial over at DivitoDesign which is nice and easy to follow. Notably, in that tutorial, there’s a section which clearly explains Margins and how to use the framework to accommodate for these.

As a result, this is the code which I came up with in order to achieve my goal:

<div class="container_24">
    <div class="grid_24">
        <div class="grid_4 alpha">4</div>
        <div class="grid_10">10</div>
        <div class="grid_10 omega">10</div>
    </div>
</div>

And yes! it did work out of the box, which is exactly what I expected Blueprint CSS to do. As a result, at the end of the day, I’ll be using 960 Grid System. As stated above, I have absolutely nothing against Blueprint CSS, and if anything I’m hoping that somebody can point out where I might have gone wrong with it.

2011-11-18 UPDATE: If you are researching CSS frameworks, you might want to check out my CSS Frameworks: In with the New, Out with the Old thread too.

Related posts:

1. CSS Frameworks: In with the New, Out with the Old
2. 12th Annual System Administrator Appreciation Day

This is what I came up with:

(function($) {
    $.equalHeight = function(element) {
        var maxHeight = 0;
        $.each(element, function() {
            if ($(this).height() > maxHeight) {
                 maxHeight = $(this).height();
            }
        });
        $.each(element, function() {
            $(this).height(maxHeight);
        });
    }
})(jQuery);

And an example of usage:

var obj = {
    one:$("#pinned .content"),
    two:$("#top10 .content")
};
$.equalHeight(obj);

Demo:

TEST WITHOUT ANIMATION
TEST WITH ANIMATION
RESET

No related posts.