Beautifying Blueprint CSS
Paul Marcotte just put together a proof of concept for using jQuery to beautiful the kind of css required to make Blueprint work . . .
The idea is that you just put content specific div titles and then add the appropriate presentation classes using jQuery. Below is an example of the kind of thing:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function(){
if (this.type == 'button') {
window.location = "index.cfm?event="+this.id;
}
});
$("#menu,#head,#foot").addClass("column span-23 prepend-1 shady");
});
</script>
<div id="menu"> . . .</div>
<div id="head"> . . .</div>
<div id="foot"> . . .</div>
$(document).ready(function(){
$("button").click(function(){
if (this.type == 'button') {
window.location = "index.cfm?event="+this.id;
}
});
$("#menu,#head,#foot").addClass("column span-23 prepend-1 shady");
});
</script>
<div id="menu"> . . .</div>
<div id="head"> . . .</div>
<div id="foot"> . . .</div>
Just as I was about to get excited, he reminded me that it's more of a "cool concept" than a practical approach only because it would degrade horribly if JavaScript wasn't enabled.
Oh well . . .
UPDATE: It appears Paul has blogged about the details.
"Javascript is requesied for this site"
This screen should show after your flash into (which *doesn't* have a 'skip into' button (<-- apparently one of the most clicked links on the web))
:D
What I'd really like to see is a way to pull off the jQuery workaround inside CSS itself. Something like: div#head { apply: [classname] }, where you an array of predefined classes to define the style. I did a little reconnaissance on this topic, but no luck. :(
1. http://bajooter.com/archives/blueprint-css-archite...