Blueprint 0.4 released
Posted on August 11, 2007. 29 comments.
(If you don’t know what Blueprint is, read this first.)
Pencils down, let’s ship this thing, and bring print design on the web one step closer, as the first release of Blueprint is quickly closing in on 15 000 downloads.
Please read that back to me. The first point-release of a framework, built on a technology that behaves differently in most browsers, with known, gaping holes, has been downloaded almost 15 000 times. If there ever was a time for a new release, this would be it.
Version 0.3 also produced this statement from Khoi Vinh, online design director for The New York Times, and chief catalyst for bringing grid-based designs to the web:
“Is there a way I can turn Blueprint into traffic for Subtraction.com?
Enter version 0.4
Here’s most of the changes at a glance. Scroll down for explanations and clarifications.
- All font sizes and vertical margins are now elastic, through the use of
emunits. Resizing works great in every tested browser. - Comes with a new, compressed version of BP, which reduces the size of the core files by 60 percent.
- Support for incremental leading, contributed by Mark Boulton.
- Adds perfected CSS buttons, by Kevin Hale of Particletree fame.
- Fixes all known IE bugs.
- Loads of minor fixes and additions.
I’d say this qualifies as a good, nay, make that a great release. Remember that BP now has taken on a life of its own, and that many of these changes have been contributed by people all over the globe. Be sure to check out BP’s contributors section.
Also, if you have a great fix or addition, post it to the new Blueprint Google Group.
About the changes
Now for a few, hopefully clarifying notes on some of the changes.
Elastic font sizes also means elastic line-heights, and as you may know, calculation of em’s in browsers are inconsistent at best. Because of this, I’ve taken the idealistic approach.
The line-heights (and by extension, the baseline) are set to values that should make them look quite perfect. In Firefox, for instance, they do. In Safari or Opera however, the baseline is a bit off.
This is a problem, but I am working on it, and I’m not even sure you’ll notice it at the default font size. :)
Contributed by print designer extraordinaire Mark Boulton, Incremental leading is a pretty exciting new feature. As most of the ideas in Blueprint, this one comes from the world of print design.
Say you have a sidebar, with smaller type than your main column. Having the same line-height in this column as in your main column might be a bad idea, as this implies a relationship between the content in each column that might not be there.
Enter incremental leading: This sets the ratio between the lines of the two columns to be 4:5, meaning that for 4 lines of text in the main column, you get 5 lines of text in the sidebar. Follow the link above to learn more about this technique.
The new compressed version is an absolute must for high-volume sites. It strips the core files of the framework down to 40% of their original size, mostly through removing comments and whitespace. Check out screen.css for information on how to use it.
And that’s that
I think this is a release one with great confidence can use on a live site, especially now that the glaring IE bugs are fixed. There might, however, be undiscovered bugs, so be on the lookout for a possible 0.4.5 release.
I’d just like to take this moment to thank all the people who have commented on, written about, contributed to, or mailed me about Blueprint. Your enthusiasm, ideas for features, bug fixes, and willingness to overlook obvious flaws in the first release has been nothing short of amazing. So thanks!
If you’d like to contribute or comment on BP, please send me an e-mail: olav at bjorkoy dot com.
Still here? Head on over to the Blueprint site to read about this new release, or just grab yourself a copy.
Credits
As always, please remember that BP is based on work by the following people:
The new BP logo was created by Ludwig Wendzich.
29 comments
Olav says:
Just a test comment. Blog system kneeling.
Montoya says:
Wow, that was fast. Thanks for listening to everyone’s input.
Kel says:
Sah-weet! Thanks! Maybe .05 could also include the demo html files along with the zip? This is about the fastest development I’ve seen in quite a while. Very refreshing.
nocturnale says:
This is landmark work.
Will says:
The download link at the bottom of http://bjorkoy.com/blueprint/ is broken at the moment, points to bjorkoy.com/blueprint/blueprint%200.4.zip which is not correct.
Will says:
I apologize, my browser for some reason is not reading something right. The same URL works for my friends that does not work for me when the %20 is written out…weird
Olav says:
Thanks guys. :)
@Will: Stick to Google Code. The old BP site is quickly becoming outdated.
Dever says:
Congrats on the new release :)
Milos says:
Great news! I’m still so amazed. And now that almost everything I need works fine in Blueprint, there definitely aren’t any reasons not to use Blueprint. Olav… contragts. Awesome job! Thank you.
Dennis Eusebio says:
Hey I made a template psd for designers who want to get started with this blueprint’s grid. I originally made it just for my own use but figure it could help out a couple people.
I broke it up into common column layouts using the default 14 50px columns as dividers. Lemme know if you wanna add it to the project.
Dennis
Ingo Chao says:
Does the assumption
font-size: 75% = 12px
hold for IE on a 120dpi laptop?
I think the default font size for IE is set to 20px instead of 16px in such an installation.
If this is true, you will get inconsistencies when relying on the % to px transfer.
(font-size: 75% -> 20px x 0.75 = 15px)
Darren says:
Blueprint is going well. I have to be evil though and say nothing replaces a hand coded design :D
Great work.
allgood2 says:
Ingo Chao says: Does the assumption font-size: 75% = 12px hold for IE on a 120dpi laptop?
Ingo, I think the file ‘reset.css’ resets all or most web browsers default font sheets and styles so that they don’t interfere. But I haven’t tested on a PC laptop yet.
Jimbor says:
Great job!! But there seems some difference with the buttons displaying in ie6, ie7 and ff2. Please have a check. Thanks again. It’s really great~
Fthrkl says:
super, thanks.
lengani says:
This is nice! Many thanks to you and all contributors.
Aleks says:
Great work.
But could you provide an alternate version with pixel-sizing? For those of us who prefer consistensy of pixels to ie6 bugs, you know.
Aleks says:
And adding new Vista font-types to typography.css might be a good idea: http://www.christianmontoya.com/2007/03/06/add-windows-vista-fonts-to-your-stylesheets/
Florian says:
Man, you’re fast! - This is an really impressive work so far. And even though I’d rather rely on my handwritten CSS - I got more than one inspiration from BP and I’m sure if I’d get into a real hurry (aren’t we always?) it certainly give it a spin. Thumbs up! -Florian
Patrick Burt says:
I just Stumbled Upon this site by chance, and what a gem of a program I see, I’ll be sure to give it a try!
prowl says:
looks like the download link is broken
Hundredth Codemonekey says:
This is great, I’ve been tinkering around with it for a couple of days now and I’m impressed at how well organised known development approaches have been compiled into one file.
Here is the IE6 fix:
Here are some additional grid classes for those who need to present wireframe mock-ups to their bosses:
.wireframe{margin-bottom:1.5em;padding:1.5em;background-color:#ffc;} .stretch-1{height:1.5em;} .stretch-2{height:3em;} .stretch-3{height:4.5em;} etc…
Wireframes are best used as separate boxes which you switch with the content inside the grid, as a pure presentation technique. You could use a serverside or javascript switcher between content and wireframes.
Jeff says:
I’ve been waiting for this!! Never had the time. Thanks for taking this and making it happen. Maybe an GUI to dynamically build the blueprint core files to spec (columns, width, etc) Love it!
Lothar Baier says:
Thanks a lot for that! I made a quick checkup of the new version and think it will save me a lot of time during the next designs.
But I have one complaint. A lot of the designs I do have to have (you know - customer is king) a layout like 25% 50% 25% or 50% 25% 25% and so on. This is not possible with 14 columns except for stacking subcolumns into subcolumns. Quickly we end up in a real divitis.
So my suggestion: why not go with 16 columns, wich would make things a lot easier for me and probly also for others.
Ryan Imel says:
Just thought I’d let you know that Eric Meyer referenced Blueprint during his first talk this morning at An Event Apart. Figured you’d get a kick out of that ;)
稅務顧� says:
Thanks so much for this! This is exactly what I was looking for.
�膜 says:
Thanks so much for this! This is exactly what I was looking for.
hekimboard says:
looks like the download link is broken
dıs cephe says:
thanks..