Blending Blueprint CSS and jQuery for Layout and Behaviour
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.
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
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... ;)
#head {apply: [column,span-23,append-1,shaded]}
p {apply: [pullquote,dropcap]}
regards,
DMF
http://www.dinamis.eu
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.
DMF
http://www.dinamis.eu
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-archite...
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!