Blueprint 0.7 has arrived [bjorkoy.com]

Blueprint 0.7 has arrived

Posted on February 20, 2008. 29 comments.

Blueprint 0.7 has finally been released. Expect a more thorough article on all the new stuff soon. For now, here’s a quick rundown.

It’s been way too long since our last release, so 0.7 is in many ways a pretty daunting upgrade. Lots of things have changed, making the framework more powerful, customizable and nimble than ever before.

Here’s the most important new features:

A powerful new compressor/generator script for customizing every part of Blueprint.
A new directory structure, way better thought out than what we had in 0.6.
No more need for the .column class (div + .span-x implies column).
Lots of bugs fixed.

The new compressor

So what does it do?

$ ruby compress.rb -h
Usage: compress.rb [options]
Blueprint Compressor

options
  -o, --output_path=OUTPUT_PATH    Define a different path to output 
                                   generated CSS files to.
  -n, --namespace=BP_NAMESPACE     Define a namespace prepended to all Blueprint classes 
                                   (e.g. .your-ns-span-24)
  -p, --project=PROJECT_NAME       If using the settings.yml file, PROJECT_NAME is the 
                                   project name you want to export
  --column_width=COLUMN_WIDTH      Set a new column width (in pixels) for the output grid
  --gutter_width=GUTTER_WIDTH      Set a new gutter width (in pixels) for the output grid
  --column_count=COLUMN_COUNT      Set a new column count for the output grid
  -h, --help                       Show this help message.

If you’re using Blueprint in several projects, you should check out the new settings file for the compressor. Here’s an example of the new settings file, with most available options:

my_project:
  path: /path/to/my/project/stylesheets
  namespace: custom-namespace-1-
  custom_css:
    ie.css:
      - custom-ie.css
    print.css:
      - docs.css
      - my-print-styles.css
    screen.css:
      - subfolder-of-stylesheets/sub_css.css
  custom_layout:
    column_count: 12
    column_width: 70
    gutter_width: 10
  plugins:
    - fancy-type
    - buttons
  semantic_classes:
    "#footer, #header": ".span-24, div.span-24"
    "#content": ".span-17, div.span-17, div.colborder"
    "#extra-content": ".span-6, div.span-6"
    "div#navigation": "div.span_24, .span-24"
    "div.section, div.entry, .feeds": ".span-6 div.span-6"

Yes, you’re reading that correctly. In order, we have:

Optional custom output path.
Namespace for Blueprint classes, which even updates the test files.
Custom CSS appended to Blueprint stylesheets.
Custom layout settings, almost too easy.
Automatic compression of plugins which then gets added to the main Blueprint file.
Semantic class names from BP classes. Just add them to your HTML, remove the old BP classes from the same HTML, and you’re ready to go!

Huge thanks to Josh Clayton, the newest member of the Blueprint team, for creating all this. He’s even written quite an article describing the compressor in detail.

29 comments

Creative says:

Amazing work guys - to all of you. Some pretty terrific upgrades – almost seems like it’s not even the same BP. Kudos!
Cezary Tomczyk says:

I will try to add some border color changes for every search input, because when users clik on tab the input field don’t change and users may think that this don’t work, so there is nothing happend.
Sam says:

Changelog says 19/02/2007, rather than 19/02/2008

Also, is there any online compression tool (in case you can’t install Ruby)? Or perhaps someone can convert the ruby scripts to an exe (using something like RubyScript2Exe ) - which is probably an easier option?
MyDeskBlog.com says:

I’m really excited with the new features in Blueprint 07. Especially doing away with the need for putting ‘column’ in every class. And finally, semantic classes! Yeah!
Dane says:

Congratulations, Olav! I’m really excited to try out the new compressor in 0.7. I’ve been poking around inside the repo over the last week, and while this is a huge upgrade over 0.6 my tests show that I’ll be able to upgrade www.bigwinds.com to the new version without too much fuss.

From an upgrade standpoint, it seems the most significant changes that might adversely affect front-end rendering are the “clear” to “clearfix” class renaming, the elimination of the column class, and the deprecation of applying Blueprint’s grid structure to non-<div&gtl; elements.

Anywho, excellent work!
Dane says:

Heh, oops. If only you could come up with a framework that tempers the effects of rum, then we would really be onto something.
Gavin says:

Very nice update. Well done!
Zaigham says:

Congratz guys! Its brilliant! :D
Raymond Brigleb 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!
Raymond Brigleb 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!
Viking KARWUR says:

Thanks… BluePrint CSS Framework helps me a lot…
Bast says:

Hi,

thanks you for this release. I very appreceate never add “column” anymore :p.

For a new website, I have to create an elastic center column. How can I do this if i want to do it with blueprintcss ?

Thanks you in advance.
Kenneth Solberg says:

Thanks! We’ve used Blueprint in our latest projects and it’s a real timesaver! It’s a lot easier to look into and understand css layouts based on Blueprint for others that know the framework as well.
Kenneth Solberg says:

Thanks! We’ve used Blueprint in our latest projects and it’s a real timesaver! It’s a lot easier to look into and understand css layouts based on Blueprint for others that know the framework as well.
new pavilion says:

Thanks a lot for the update. Very useful indeed.
new pavilion says:

Thanks a lot for the update. Very useful indeed.
new pavilion says:

Thanks a lot for the update. Very useful indeed.
new pavilion says:

Thanks a lot for the update. Very useful indeed.
scott says:

Thanks for the good work. Can you provide more detail on this decision:

“No more need for the .column class (div + .span-x implies column).”

That directly contradicts this piece of advice from earlier:

“Also, don’t be fooled by the grid documentation’s suggestion to use div elements for all column units. You can apply the .column class to any element. For example, if you’re using the default grid and you want a bar across the top of the page that includes your logo on the left and your navigation on the right, you can add class=�?column span-12�? to an h1 and a ul, rather than making unnecessary divs.” http://www.blueflavor.com/blog/design/blueprintcss_101.php
kamil says:

great work guys. thanks a lot. useful as always!
Lorin Tackett says:

Great work, Olav. I have used the Blueprint 0.7 grid on a few projects now, one was some real heavy lifting. Blueprint made it a cakewalk.

For you Rails fanatics who use HAML and SASS, I’ve adapted the Blueprint 0.7 grid to SASS. It uses SASS arithmetic to calculate the grid, so you can deploy a grid using SASS very quickly by dropping in the file and editing three constants.

Blueprint Grid generator in SASS
somecallmejosh says:

Is Ruby required to use Blueprint?
dotudo says:

Thank you! very well.
cs says:

Thats really great news :) thx for info about this, and greetings for You
dıs cephe says:

Thanks… BluePrint CSS Framework helps me a lot…
free psp games 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!
ashan says:

pornthunder website is very sexy website
kabin says:

nice site thank you.
hekimboard says:

Thats really great news .