Blending Blueprint CSS and jQuery for Layout and Behaviour
Posted by Paul Marcotte | Tags: CSS , jQuery
I've always written my own CSS from scratch. Over time, I've learned the ins and outs of browser incompatibilities, but at a cost (a fraction of my sanity). For a new project I'm playing with, I decided to try out Blueprint CSS and jQuery. Blueprint took a bit of time to embrace, but when it clicked, I was able to get productive and start visualizing my layout in the language of Blueprint. Problem was, where I previously used very descriptive identifiers to provide a more semantic organization of my layout div elements, I was suddenly chaining multiple classes to achieve the same layout.Hipped to this shortcoming in no uncertain terms, I decided to try yet another framework that I've been meaning to learn for some time, but had yet to dive into with any enthusiasm. Here's a block of code the head section of my project:<div class="column span-24 shady">
<div class="column span-23 prepend-1 italic">
<h1 class="bottom">Title:</h1>
<h4>Subtitle</h4>
</div>
</div>
While it gets the job done and would make sense to someone who knows Blueprint CSS, it's shy on describing the context of the layout. This is easily solved with the simplest jQuery code available.
$(document).ready(function(){
// apply styles to divs by id
$("#head,#foot").addClass("column span-23 prepend-1 shady");
$("#title").addClass("column span-23 italic bottom");
});
The javascript comment says it all. With jQuery, I was able to apply Blueprint CSS styles to the following code block to achieve the same layout.
<div id="head">
<div id="title">
<h1>Title:</h1>
<h4>Subtitle</h4>
</div>
</div>
In addition, I wanted to leverage the Blueprint CSS forms plugin to make use of the styles. Instead of labouring over a menu layout, I wanted to use buttons. So I added another function to my jQuery block.
$(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");
$("#title").addClass("column span-23 italic bottom");
});
In order to use the Blueprint buttons within forms, but still add hyperlink behaviour to button that are not part of a form, I simply test the type. A side benefit to this is that I can also define the front controller framework event using the button id. Here's some sample button code.
<button id="user.login" type="button" class="button positive left">
<img src="images/icons/user_go.png" width="16" height="16" title="Login" align="middle" border="0"> Login
</button>
Granted, while this solution works, it will not degrade well if javascript is turned off, so if that's a system requirement, we're going back to the drawing board. I'm happy to continue down this road since it's my own thang. So far, I'm liking the result and I'll continue roll with it as I slowly build out the project.
Anyone else playing with Blueprint and jQuery in this way?
Bownie points to the first person to guess the MVC framework I'm learning at the same time. Yup, that's right, I'm playing with three APIs I've never used before. Good thing this is personal and not for a client!
18 responses so far ↓
Leave a Comment