css

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!)

Ah, what better way to end a multi-month-long blogging hiatus than with a brief 'note to myself'...

Here it goes: in order to properly use negative margins you must declare the object's position as relative for Safari and static for WinIE. (This was, admittedly for a special use case, where the div wrapping the element with the negative margin also was set to overflow: none and WinIE wouldn't honour that, if the contained item's position was set to relative.)

So there, the spell has been broken... see ya!