Skip to content. | Skip to navigation

Sections
Personal tools
What is this?
Hi, my name is Tom Lazar and I'm a Plone and Zope developer based in Berlin, Germany and this is my personal and professional (no big difference, really...) website.
 

jquery

Apr 26, 2008

blueprint css + jquery

Filed Under:

I'm using the blueprint CSS framework for a new site that I'm working on and am rather enjoying the process (as far as that is humanly possible, given that it by definition involves working with CSS... cough).

One of the neat features of blueprint is a compressor script that not only renders all the various CSS bits that you want according to the given column numbers and sizes for each project into one neat (and compact) CSS file, but it also lets you define semantic classes and ids, so you can use something like class="navigation" instead of class="span-6 last". And on top of that, the compressor script will also generate a PNG image that conforms to the column size and padding you've selected. This proved to be really helpful in debugging the pages. Simply add the class showgrid to your outer most container div and presto!

When demonstrating the layout to the client, though, I wanted a less obtrusive way of switching the grid on and off and I thus came up with little jQuery script to generate a toggle switch for each page. And since jQuery will be the standard javascript library for Plone from version 3.1 onward, anyway I thought I might as well share the following snippet:

$(document).ready(function() {
    $("body").append("<div id='debug'>turn grid: <a href='' id='togglegrid'>" 
    + gridstate() + "</a></div>";);
    $("#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';
    };
}

P.S. I'm not exactly a fan of the Javascript language but I do appreciate jQuery a lot and for the sanity that it partially restores when working with Javascript. The snippet above is a good example of that in my opinion. Javascript can't get any more "pythonic" than that IMHO ;-) (But please prove me wrong!)