Why does Blueprint-Css set the maximum grid width for a layout as 950px?

Question

If you use the container class for a layout with blueprint-css, you end up with a maximum width of 950px. I have a layout that needs to exceed this so I'm wondering why Blueprint uses this default?

<div class="container">

Answer 1

Blueprint was designed to simplify the creation of 950px layouts. If you want another size you'll have to use something else or roll your own.

Answer 2

Blueprint chooses this because a little under 1,000 pixels is the currently accepted 'safe' width for a fixed-width website with today's common monitor resolutions. 800x600 is rare enough to be ignored, but 1024x800 is a big enough segment of the userbase to be accommodated.

It's 950 instead of 1024 because browser scrollbars etc. take away a little screen real estate.

Answer 3

Blueprint is very customizable. You can use the compression engine (ruby scripts) that are included with the framework to generate whatever column counts, widths, and gutters you want. It's actually pretty easy to use and pretty powerful.

This walkthough provides a lot of useful info on customization.

For our site, we utilized a settings file with 2 different layout projects - 1 for a 790 based resolution, and one for the old standby 950. We were able to easily create skins based off the output of the compression engine program.

Also, a little known secret is that you can use these filese to solve the so called "semantic css" problem that I'm sure you will hear about if you haven't already.