[TIP] Blueprint CSS Framework

Heya all, I just want to give a tip about a nice grid-based CSS Framework that’s appearing: Blueprint CSS Framework (author’s blog).

It’s now hosted on Google Code.

I find it very easy to combine blueprint with the typical community websites I put up with MODx - the grid-based approach makes it easy to put different sections where I want them, and still I get the power of CSS instead of tables (but it IS a grid of course, not liquid CSS).

The cool thing is that blueprint is based on the sum of all the newest work and discussions on best approaches for this kind of layout, and also include nice typographic standards, and upcoming is nice and coherent styling of forms and user action links. WOW this seems like a total sellout, but I’m no way associated with this, just found it through digg or something, it’s just that I liked it so much

Anyways, more users equals more input equals(?) a better framework, and I think it’s worth to check it out

Tjalve

This is indeed great framework, and the best thing about it is, its not bloated!

I have been using a framework that I built for over a year and I was able to convert my existing CSS framework in a matter of minutes. I think this will be indispensable in a multi designer organization but may be overkill for those who will be freelancing or solo designers. Myself, I am working with at least two designers and will be hiring more as my company grows and a framework in invaluable of ensuring consistency across projects and for maintenance.

Be warned, for those of you who are hardcore standards literalists and would faint at the sight of anything remotely presentational in the markup Blueprint CSS uses a number of classes that point to presentation in order to build the grid such as .span-6 (referring to the number of spans a particular column runs (sounds a little familiar eh.) Jeff Croft makes some valid arguments for allowing some presentational nomenclature within the HTML for both production and group production environments most valid being the fact that many of us will never redesign a site without touching the HTML save for those of us building CSS Zen Garden sheets.

I like it myself. A number of points that some people new to the Blueprint CSS framework seem to miss is that while the initial framework is actually large he is recommending using it seperated into the series of files for development and then using one of the compression utilities to both compress the CSS file and move all the content into a single file for live productions. Also people miss the point that the Blueprint CSS is not rigidly fixed to the 50px column +20px gutter. In the comments you can easily see how to change the ratio/column/width relationship.

One of the parts of BP CSS that I have been using since the spring is Eric Meyer’s Reset Reloaded to eliminate all the browser default styles of the HTML elements. This ensures that you are starting from scratch and not relying on browser defaults to position, space or style HTML elements.

Cheers and all the best,

Jay

Tripoli is really nice as well, but not intended to address the grid as Blueprint does (see near the bottom for a discussion of how it differs from BP): http://monc.se/tripoli/

Blueprint is great so quick to setup a website, I have stopped worrying about semantic markup, I have learned to love the presentational markup, its just a pipe dream to re-design a website without touching the html, so I just don’t worry about it anymore. I know zen garden does it but it just wont work in the real world.

kick on
ss

Woooh interresting discussion and lots of valuable links here, thanks guys !

I think Blueprint does a great job with setting up the baseline grid for type, so I import that part of the style sheet. Personally, I’ve never found that a framework for layout has been helpful because every client’s needs are so different, and I’ll end up hacking the thing to bits anyways.