Blueprint 0.5: The Experiment
Posted on August 28, 2007. 40 comments.
Today marks the release of Blueprint, version 0.5. This is a special release, as it is above all an experiment, trying out a few different techniques as we approach version 1.0.
The Grid
The grid in this release is upped from 14 to 24 columns. Now, before you all go haywire, consider the following:
12 is quite certainly the best number of columns for a grid, mathematically speaking. It is dividable by both three and four, giving you lots of options on how you’d like to set up your layout.
However, after trying out the 12 column scheme on a few sites, I believe it is too constricting. That is, the column count is too low. It was already too low when we were using 14, if you ask me, so 12 doesn’t seem completely right.
That’s why I’ve gone for 24. Being 2 * 12, you get all the flexibility, with the added possibility of creating truly complex grid systems. And, if 12 is your preference, all you have to do is to double your desired span counts.
But hey, Blueprint is about flexibility, not constraints. That’s why Matz from kematzy.com is the latest addition to the growing BP development team. He has created a wonderfully flexible BP grid generator, which lets you input your desired number of columns, margin between columns, and even your preferred total width, and outputs a nicely formatted and customized grid.css.
So please, if 24 is not your bag, check out Matz’s generator.
Also, the first class is no longer needed. :)
PX vs EM
Blueprint 0.4 introduced the use of em units for all vertical spacing, including line-heights and font sizes. However, in retrospect, this does not work as well as it should. While giving IE users the ability to resize text properly, the vertical flow and baseline was disrupted in nearly every browser except Firefox.
I do believe the baseline is quite important, giving each page a great look and feel, so we’re going back to pixels in this release. Resizing might not work as well, but the baseline now looks perfect in nearly every browser. I think this is a fair trade.
To accommodate those not happy with this, BP 0.4 will remain as a download on the Google Code site, so that you may easily make your own changes to stick with em’s.
We do hope to return to using em’s one day, but that won’t happen until we can make them work correctly with the baseline. If anyone wants to tackle this issue, please feel free to do so. :)
Fonts for the typographically literate
Version 0.5 also sports a new set of default fonts. We figure that if you’ve gone so far as buy your own great fonts, you should also get to use them when you browse the web. Here’s the fonts that now gets set in typography.css:
h1,h2,h3,
h4,h5,h6 { font-family: Constantia, "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif; }
body { font-family: Frutiger, Univers, "Helvetica Neue", "Lucida Grande", Calibri, Helvetica, Verdana, sans-serif; }
pre { font-family: Corbel, Verdana, "Bitstream Vera Sans", sans-serif; }
code { font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Monaco, Courier, monospace; }
This is also highly experimental, and the font choices are likely to change in future releases.
Coming in 0.6
A few things didn’t make it into this release. Most noticeably is the forms.css file. Created by Kim Joar Bekkelund, this file aims to give you some great looking default forms, with support for fieldsets, buttons and more. Expect it to ship with BP 0.6.
Another quite important feature that probably will be added to 0.6, is the use of an ie.css stylesheet, loaded with conditional comments, so that IE hacks stays in one place, and doesn’t clutter up our beautiful core files.
Get yer Blueprint, half price!
So that’s that. Another release, another milestone on the way to Blueprint 1.0.
As always, a tutorial, example files, the credits, and the download itself, are all on the Google Code site. So go ahead, and grab your own copy. :)
40 comments
quard says:
Great! Thanks for bp :)
huxley says:
Any chance we can see forms.css even if it isn’t included with BP?
chaoskaizer says:
nice update with the typo and extra grid area. its now *nix friendly
Michael says:
/blueprint/test.html is absolutely beautiful - great work!
Anthony Short says:
Great work! Looking forward to testing this out for my blog design :)
LaZ says:
Thanks a lot guys - really - fantasitic
Guillaume says:
The fonts you mention here aren’t set on the example page. Haven’t checked in release.
But to be fare, I don’t think the typographically literate would end up using serifs in all their headings while the text is sans. Or use a different font in pre, either. I would suggest two possible alternatives :
If you insist on wanting to provide pre-established font-combinations, offer a few wise alternative combinations that could be used as classes set to the body, or to be uncommented. e.g. one style if you want serifs only, one for sans only, one with text in serif, headers in sans, one in monospace only, etc.
Or (and I think that would be better), use the same font-family everywhere, but provide good alternative font-families in the top comments of typography.css
Oh, one more thing, no matter how dispisable its origin is, Arial is a much better alternative to Helvetica than Verdana (cf. body style). So is Trebuchet, for body text at least.
Wilco says:
I’m a bit disapointed to see px being returned again. I feel your argument doesn’t really work either. Because people that would need larger fonts and thus set it that way don’t have any use for perfectly aligned text if they can’t read what it says.
I don’t see there is any gain in this at all. You take out the ability to scale for IE users to make sure their scaling doesn’t mess up your baseline. That’s like taking off an arm to solve the problem of a broken finger.
Olav says:
Thanks for your comments. Again, this is an experimental release, so a lot might change, including fonts and units.
And yeah, I forgot to update the example files on this domain (wow), working on it now.
Beeblebrox says:
Aw, all I needed from 0.5 was forms.css.. hopefully it wont be too long to wait for 0.6… ;-)
Paul Walker says:
Re: Fonts for the typographically literate
I’d suggest adding a few more fonts in; something like this:
h1,h2,h3, h4,h5,h6 { font-family: Bodoni, “Hoefler Text”, Constantia, “Palatino Linotype”, Palatino, Georgia, “Times New Roman”, Times, serif; }
/* for those with bodoni, It’d be great to see it; and for Mac users, Hoefler text is a great font esp. when large (i.e: headings) */
body { font-family: Frutiger, “Frutiger Linotype”, Univers, “Helvetica Neue”, Calibri, Arial, Helvetica, sans-serif; } /* the ‘Helvetica’ which comes with windows looks terrible in IE, and on a Mac there’s “Helvetica Neue”, so i put it lower in the list. Also, Verdana is a terrible Frutiger stand in - Lucida Grande isn’t the best either for similar reasons (too high an x-height) */
/Pre should have the same fonts as Body/
code { font-family: “DejaVu Sans Mono”, Iconsolata, “Panic Sans”, “Bitstream Vera Sans Mono”, Consolas, “Lucida Console”, Monaco, “Courier New”, Courier, monospace; }
.small { font-family: “Lucida Grande”, Corbel, Verdana, “Bitstream Vera Sans”, sans-serif; }
Olav says:
Thanks a bunch, Paul. I’ll try them out. Please let me know if you make any other improvements.
Also, feel free to send comments like the one you just wrote by e-mail as well, so that we might discuss the changes in detail. :)
Jon says:
Love the work - especially 24 columns. It’s really made things easier for layout.
I’ve used the YUI grid layouts in the past and I’m finding your framework MUCH easier to implement.
Looking forward to 1.0!
Gaston Garcia says:
Thanks Blueprint team!
Dennison Uy - Graphic Designer says:
What exactly are you guys “experimenting” on?
Ran Yaniv Hartsetin says:
What a cop out!
I’m currently implementing Blueprint 0.4 on a redesign I’m working on, and was pleasantly surprised to see 0.5 released. However, given the new px-based grid, I simply can’t use it - and I’m guessing many more feel like me.
The whole point of using a framework is to have all the hard stuff sorted out for you - but you just decided to give up.
A px-based grid is arguably useless - anyone remotely proficient in CSS can make one tailored to his own needs in 30 minutes, and it won’t be hampered by the preset columns or the need to mix form with content.
However, an em grid was always completely beyond me, and that is why I was so thrilled to see Blueprint. Don’t get me wrong: I love your work, I appreciate it greatly, and I have recommended it to everyone who would listen.
But the px-based grid is a major disappointment to me, and I’m sticking with 0.4 for now. AFAIK, the grid works fine on all the browsers I tested it on.
Olav says:
@Ran: Thanks for your feedback, and I do agree, we really should use em’s.
I’m still working on the setup that we had in 0.4, trying to make it work consistently in more browsers. However, as I said in the post, I think we should stick to pixels until we get em’s working as we want them to. :)
About the pixel-based grid, I’m not sure if em’s would be a good choice here. I’m not sure if people would appreciate the grid changing if they change the default font size..
fabrizio says:
maybe “em” could be used also using “ex” but i’m not sure about that :)
Cameron says:
Thanks to everyone involved for the release, once you get used to Blueprint it’s definitely far quicker (and imo, nicer) to use than Yahoo!’s UI Grids system.
Don’t think anyone’s quite sure about the typography issues coming up yet - we had been using the 62.5% technique in ignorant bliss until we read the post on the blueprint google groups regarding the default font sizing issues. Interesting to see how it develops.
Few guys in the office were discussing about whether or not the default fonts being set were going to be problematic when it came to cross-browser testing, but they’re easy enough to override I suppose!
Ken Petri says:
This is an extremely promising project and I agree with others that it has definite typographic advantages over YUI Grids.
However (you knew that was coming, didn’t you), I’m with Ran about using px over ems. This kills Blueprint for any work concerned with accessibility.
I see that a fluid layout is planned (also great for accessibility). I know that’s a steep hill, but is that on the books for the 1.0 release? (And when is 1.0 predicted to come out?)
Also, in addition to a print.css, how about a “high contrast” display. (For a model, see Gez Lemon’s Juicy Studio stylesheet.) James Edwards’ excellent stylesheet switcher code makes on-the-fly high contrast a breeze.
Keep up the great work!
Matt says:
Thanks for the ongoing efforts!
James Box says:
Hi Olav – Just wondering why you decided to remove the PiE Clearing float method from the latest version of grids.css? I’m guessing for cleanliness? The problem I’m experiencing is that unless the ‘container’ element is cleared, the background images (grid.png/baseline.png) will not be shown (due to the ‘container’ element having no height).
Your examples don’t suffer from this problem because the horizontal rules you are using have the knock-on effect of clearing the ‘container’ element (I think!).
Jeff Croft says:
Love these changes, especially the return to px-based sizing. For me, it’s 100% better than using ems.
BUT…why not include both? Why not let users choose? The choice is simple: either you get the perfection of pixels or the flexibility of ems. I don’t you, Olav, can make this decision adequately for everyone that uses Blueprint. Personal preference, and especially the needs of any given site, will affect the choice. I say put ‘em both in.
I much prefer the 24 columns to the 14, and I even more love the grid generator. One minor suggestion on this front, though…
A framework ought to be immutable. I don’t think it should ever be recommended that someone edit the Blueprint files themselves. Doing so really affects mantainability. A user should be able to upgrade to the latest Blueprint with a simple “svn up”, and not have to edit files. How to achieve this? Recommend the user override the existing grids.css and whatever other values they wish to change, rather than recommending they edit them directly. This is a much more elegant solution, IMHO. :)
Great work, Olav and team. I’m so excited to see this progressing so nicely!
Jeff Croft says:
Oh, one more suggestion:
Can you add push-x and pull-x classes for more than just four columns? Wit the increase to 24 columns, I can certainly see cases where you’ll wnat push-6 or push-10. In fact, I don’t know why you wouldn’t just add push-x classes all the way up to 24, just in case its needed.
:)
Jeremy Curry says:
Been meaning to rework my site, using this latest version of blueprint I came up with a concept and had it going in less than a day. Thanks - check it out.
Only Me says:
Web 2.0 - where idiots talk about CSS and fonts and absolute positioning, display content using 200 pixels out of a 1920 display, for perfect control and the content still runs out of the divs.
Kyle says:
It would also be nice to be able to add padding to columns without breaking the layout. Right now, the background starts right where text does, and if I add any padding to the column, the whole row breaks.
Jeff Croft says:
Kyle: Look at the .box class. :)
This is one thing that we didn’t have in our CSS framework at The Lawrence Journal-World (which Olav based Blueprint on), but Olav has added it, and it’s a wonderful addition.
Kyle says:
Jeff: Looks like that’s not in the release, but rather in the latest version in svn. Thanks for the tip though–I’ll definitely play around with that.
Carlos Andres Cortes says:
I’m very impressed… nice and cool work!!!
gerhard says:
I did a small hack to underlay blueprint (0.5) into Wordpress. Quit easy - I think blueprint could also be a good basis for further WP releases. see this short and first installation right here: http://www.ammerseeblog.de/
buy hgh says:
Hi, nice topic
Kitchen Refacing says:
very interesting, thanks
Hugo says:
Thanks for the tutorial and the example files. And yes, I did grab a copy of my own :)
ppc internet marketing says:
A user should be able to upgrade to the latest Blueprint with a simple “svn up�, and not have to edit files.
dıs cephe says:
thanks gerhard..
hekimboard says:
ı love it…
outboard motors says:
I love the updates. Especially the compressor - it’s great!
I do miss having an IE PNG fix in there and the nice button styles. Otherwise, all good improvements!
Wong Seo-UL says:
As of today 07/17/08, what is the latest version of it. I would like to hear some feedback from the users… Thanks for sharing ….
oto kiralama says:
Olmayan yeri nasıl gösterecen :D