Dec 12
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!
Dec 13, 2007 at 6:23 AM Interesting POC Paul.
Decorating the divs with JQuery does keep the HTML cleaner.
As far as guessing which MVC framework you are working on, I'll have to recuse myself since I know the answer.
DW
Dec 13, 2007 at 7:53 PM Hey Dan,
Thanks. CSS is a strange beast. The intent is honourable, but the implementation isn't DRY and therein lies the problem in more ways than demonstration above. Using multiple class declarations is the best way to avoid repetitive CSS, but it leaves us with repetitive code in the class attributes of our html element. I mentioned this on Peter's blog, but it bears repeating. What I would like to see a way to apply predefined classes to a element using the following (pseudocode):
#head {apply: [column,span-23,append-1,shaded]}
p {apply: [pullquote,dropcap]}
Where the apply attribute accepts an array of classes. I might experiment with pre-compiling the css on the server side to avoid the degradation issue when javascript is disabled. That's actually beyond my ken, but I'm always up for a diversion... ;)
Dec 21, 2007 at 3:14 AM This is not working :
#head {apply: [column,span-23,append-1,shaded]}
p {apply: [pullquote,dropcap]}
regards,
DMF
http://www.dinamis.eu
Dec 21, 2007 at 6:15 PM I guess I wasn't clear by saying "apply" is not a valid CSS attribute, but that I wish it were.
For all the goodness that CSS brings, it is not a scripting language. You can't parameterize a color or size and re-use throughout your document. This makes CSS very un-DRY (Don't Repeat Yourself).
I've read a few interesting articles on suggestions for building CSS dynamically and you can do that in any scripting language by simply setting the content-type to text/css returning raw output.
I hope that makes more sense? :)
P.
Dec 26, 2007 at 7:24 AM Yes, now it makes sesnse. Thanks,
DMF
http://www.dinamis.eu
Jan 8, 2008 at 6:26 AM Hey I mentioned over on Peter Bell's blog that I had recently created a semantic layout generator for Blueprint that is a lot like this in its implementation. You pass the IDs into a method and then layout your page. It'll spit out the CSS that you need so that you don't have to add classes in your HTML. There's a full writeup with links to the code and a how-to on Bajooter [1].
I like where you were going with this and it is certainly more elegant with jQuery than prototype + scriptaculous. My code ended up a tad bulkier than yours.
1. http://bajooter.com/archives/blueprint-css-architect-easy-way-layout-your-websites
Jan 8, 2008 at 9:22 AM Hi Dustin,
I just checked out your architect demo. Using jQuery to add class style is fine if js is turned on, but it will not degrade well (with js turned off). Your architect tool is definitely the way to go in terms of generating a layout template. Yahoo Grids has a layout generator and I see the your architect tool filling that space for Blueprint. Keep up the good work!
May 2, 2008 at 2:27 PM CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html
May 26, 2008 at 7:27 AM Hello
You want to check out <a href="http://www.jdclayton.com/blueprints_compress_a_walkthrough.html">Blueprints compresser</a>. You can include your own semantic classes and id's in the settings.yml file.
May 26, 2008 at 2:57 PM Johan, Thanks for the tip!
May 26, 2008 at 6:16 PM I just discovered blueprint myself this weekend. I am redesigning accidentdesigns.com. And i made up a settings.yml file for the project but the compressor throws an error. Please tell me if you have any luck with it if you try it yourself.
Dec 9, 2008 at 3:53 PM With Construct you can generate custom CSS and you won't need to use the class names that grid.css relies on:
http://constructyourcss.com
Jan 14, 2009 at 1:40 PM ColdBox?
Oct 30, 2009 at 9:39 PM Take a look at Compass + Blueprint. It uses Sass to achieve the "apply" functionality you are after via "mixins".
http://sass-lang.com/
Nov 2, 2009 at 11:39 AM Thanks, Mark. Appreciate the lead.
Feb 17, 2010 at 5:31 AM Great, Mark. Really Great