this is a great idea. I've been playing around with it, and I think more documentation needs to go into examples. maybe several different layouts (real life) that uses this... I will submit some of my own layouts....

I have already created a small guide. It can be found at the following: http://gamemakker.co.uk/2007/08/05/blueprint-a-css-framework/

Hope it helps anyone getting started

Can the same be done, but with liquid width instead of the fixed 960px?

Liquid layouts are still in development so currently the answer is no. I think I'm right in saying that lol

That is correct, gamemakker. ;)

For the uninitiated, what's the lol about?

This is very cool. I also look forward to the liquid layout!

i'm having a LOT of trouble getting form elements to behave with this--- am i the only one?

for form elements i put this in grid.css

input, select, textarea{

border: 1px black solid; margin: 0px;

not everything is fine now but it works with the grid.

the example page (http://bjorkoy.com/blueprint/test.html) doesn't work in internet explorer 6. the right column slips under the left one. is this a bug?

One thing that would be a great eventual addition would be standardized form element styles, that also behaved on the grid...something I've always had trouble with.

One thing that would be a great eventual addition would be standardized form element styles, that also behaved on the grid...something I've always had trouble with.

The problem with a system like this is that you have to write html that is not strictly structural since you are, infact, assigning classes that describe the layout of the page not the type of content.

@dodazzi: You could alias the built-in class names with some of your own, but that won't overcome issues about source-order with the heavy reliance on floats.

I do confirm with nathan.sirius - the grids does not work with IE6. I also noticed there is inclusion of a fix for the squirrel demo, but it is not available in the distribution I downloaded???

<!--lt IE 7?> <link

rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">

Blueprint is just to set up your site grid verry fast but how do you guys handle styling of the whole site?

Do you fool around in the blueprint css files or dou you creat a new one?

I am very impressed. I wanted to learn the grid, and I doubt I would have the confidence to do this without Blueprint.

I have one question regarding search engine optimisation.

How do you code the Left sidebar, Main content and Right sidebar described above so that the Main content appears before the Left sidebar (where the navigation bar would go)?

In other words, the code would be:

<main> <left> <right>

and the style would render as:

Left main right

I am very impressed. I wanted to learn the grid, and I doubt I would have the confidence to do this without Blueprint.

I have one question regarding search engine optimisation.

How do you code the Left sidebar, Main content and Right sidebar described above so that the Main content appears before the Left sidebar (where the navigation bar would go)?

In other words, the code would be:

<main> <left> <right>

and the style would render as:

Left main right

I am very impressed. I wanted to learn the grid, and I doubt I would have the confidence to do this without Blueprint.

I have one question regarding search engine optimisation.

How do you code the Left sidebar, Main content and Right sidebar described above so that the Main content appears before the Left sidebar (where the navigation bar would go)?

In other words, the code would be:

<main> <left> <right>

and the style would render as:

Left main right

I am very impressed. I wanted to learn the grid, and I doubt I would have the confidence to do this without Blueprint.

I have one question regarding search engine optimisation.

How do you code the Left sidebar, Main content and Right sidebar described above so that the Main content appears before the Left sidebar (where the navigation bar would go)?

In other words, the code would be:

<main> <left> <right>

and the style would render as:

Left main right

I am very impressed. I wanted to learn the grid, and I doubt I would have the confidence to do this without Blueprint.

I have one question regarding search engine optimization.

How do you code the Left sidebar, Main content and Right sidebar described above so that the Main content appears before the Left sidebar (where the navigation bar would go)?

In other words, the code would be:

<main> <left> <right>

and the style would render as:

Left main right

Just tried:

<div class="column span-8">Main</div> <div class="column span-3 first">Left</div> <div class="column span-3 last">Right</div>

But that wont work, you will need te edit the css to do that.

This should work.

<div class="container">

<div class="column span-8 first">Main</div> <div class="column span-3">Left</div> <div class="column span-3 last">Right</div>

Also to frederikheyninck, I give all of my divs IDs and create a separate css file to style them. I do not touch the blueprint css files at all. If you want to see a site layout that I developed with blueprint, browse to http://bethelebensburg.org/Default2.aspx. (It will eventually just be http://www.bethelebensburg.org ) This layout is made up of three main columns, left, middle, and right. The middle is then made up of a header div, an image div, a navigation div, and then two more columns, the left div and right div( news events, content respectively ). The footer was a bit tricky as I could not seem to prepend 2 to it and have it work correctly. So, currently the footer spans all 14 columns and uses a background image to draw the footer and then I have the text centered to look like its on top of the black part of the image. The site looks almost identical in Firefox and IE 7. In IE6 I noticed extra space between the image div and the navigation div. I am going to spend some more time working on it tonight. I just want to say how great blueprint is. It saved me a lot of frustration. Keep up the good work.

I also had a lot of trouble getting form elements to line up correctly. Especially in tables. Here is how I addressed the issue. I set the vertical-align property to "top" of both elements and table cells. If you are using a table, setting valign="top" will not correct the issue. You must use the style.

What does the span mean?

What does the span mean?

What does the span mean?

Surely this is a backwards step. As someone previously mentioned it is moving back towards having structural syntax in the HTML. What if you have lots of pages, and you make a layout change. You would have to correct all the pages?

Surely this is a backwards step. As someone previously mentioned it is moving back towards having structural syntax in the HTML. What if you have lots of pages, and you make a layout change. You would have to correct all the pages?

great work..very useful..keep going! :)

Why would you have to change every page? I'm sure the majority of developers will be making use of a template for their layout design. For example .NET has master pages, coldfusion has custom tags or frameworks such as fusebox or model glue, java/JSP has tiles plus more, etc.

I just found Blueprint and hadn't known that others have developed a CSS framework. I developed my own (not as detailed or tested as this) but in a team production environment I think frameworks are key.

@Adrian Westlake: I am not sure why you would change every page. If you are building pages that don't take advantage of some type of scripting language include or CMS system to serve and parse common site elements it is likely a small site. I haven't done a static site in years that doesn't at least pull common elements from a fileset or database. Even if you are not using a server based script you can use the templating functions of some of the WYSIWYG editors out there. Oh, did I ask who is still building whole sites without scripting anymore?

One thing I don't like about the Blueprint are the use of words that have completely different meanings in the framework. Span is an HTML inline element container and in Blueprint it is being used in reference to the virtual column spans of the divs that make up the subcontainers of the page. That being said, I might suggest calling it grid_span or g_span or some such to differentiate. We have all seen novice designers using elements as class names and then applying them to an element or to its container. Lets not cause any confusion.

Update: After playing with BP-CSS for less than an hour I was able to easily convert my existing framework.

Comment: Until conditional CSS references become an acceptable method (acceptable by browser parsers) this framework does require compromise when some devs, myself included, have learned to build a more semantic HTML document that leaves all positional elements and descriptors out of the document.

dodazzi is right that "...you have to write html that is not strictly structural since you are, infact, assigning classes that describe the layout of the page not the type of content."

Describing something as a span-6 is a hard and fixed class that doesn't add meaning to the document and doesn't describe the content type. Whereas I currently use IDs like site_id with a corresponding class of logo or tagline as they reflect content types and add meaning.

While I am torn as to whether or not I will incorporate this into a live project or try and morph it into a more semantic framework, I will continue to try to learn from it.

BTW: Grids are nice but the numbers don't actually work out in Firefox as span-6 + span-8 != span-14 it comes up large and the only way to get it to work is to add the class first and last to the second column so that it doesn't creep outside the container size.

Update: Okay, I sorted out the math. I had assigned the class .box to the column divs and since it pads the div it also grows the div.

I would suggest the following changing the padding to px from ems and then create a corresponding .span-x .box width reduction to zero out the size increase. E.g.:

.span-6 {width:400px;}
.span-6 .box{width:380px;}

This would really only be used if there were coloured backgrounds or background images on the columns whereas if you were using a white bg on all columns you wouldn't really need this.

I've been having the same math problem with .box

But I don't understand how the padding of a div can affect the dimensions of it parent div. Isn't that what differntiates padding from margin: padding is inside the edge of the div, margin is outside?

Its often good to try a little harder before posting.

To use .box don't add it to the class names of the <div> that defines the column you want to style. Rather create a child <div> and assign class="column box" of just class="box" to it. Then add your content inside of that <div>. It should fill the dimensions of its parent <div>, look just the way you want it, and not mess with sizes of any other element.

I don't understand the choice for 50 px columns and 20 px gutters.

Why not develop a horizontal grid that is based off of the 18 px baseline?

Perhaps 54 px columns and 18 px gutters. Definitely easier to develop in photoshop and I feel like it presents a better harmony across the page.

The current setup just seems like it is in place because it is easy not because it is based on anything?

Just wondering what the thought behind it is?

I was wondering the same; What are the thoughts behind the choosen proportions? This would be really interesting to know. Along with the fact that a 800 € software doesn't provide a way to create guides in a smarter way

Im having anough of many many j2ee frameworks and don't need a css framework !

Hrmm... I want to have my div 100% of the width of the container, with my text aligned to the right... how would I go about doing that?

Thanks all!

List margin...

I've created a simple tutorial here for people that are new to blueprint. Hope it helps! http://www.sontakey.net/archives/61

I'm with Adrian on this one. Your class and id names should NOT be used to describe the manner in which they're laid out! Without wishing to diminish all the hard work that has plainly gone into it, this IS a step back for the semantic web we should be striving for.

To explain to the uninitiated:

Ideally we might wish for our website to display on a pc screen, as well as a mobile phone, or even via an audible screen reader to a blind or visually impaired user. We'd rather not rewrite the markup three times for the three different devices, it's best to use the one XH?TML Template and style it with CSS for the three devices.

A simple example:

<div id="left_column"></div> might not be in the left column for a mobile phone due to restricted screen space - and, for a screen reader, "left" anything is irrelevant!

Be semantic about it. Give meaning to your elements. <div id="navigation"> is much better!

Good work on the Blueprint stuff, but for all our sakes, revisit this issue. Please.

I'm with Adrian on this one. Your class and id names should NOT be used to describe the manner in which they're laid out! Without wishing to diminish all the hard work that has plainly gone into it, this IS a step back for the semantic web we should be striving for.

To explain to the uninitiated:

Ideally we might wish for our website to display on a pc screen, as well as a mobile phone, or even via an audible screen reader to a blind or visually impaired user. We'd rather not rewrite the markup three times for the three different devices, it's best to use the one XH?TML Template and style it with CSS for the three devices.

A simple example:

<div id="left_column"></div> might not be in the left column for a mobile phone due to restricted screen space - and, for a screen reader, "left" anything is irrelevant!

Be semantic about it. Give meaning to your elements. <div id="navigation"> is much better!

Good work on the Blueprint stuff, but for all our sakes, revisit this issue. Please.

I'm with Adrian on this one. Your class and id names should NOT be used to describe the manner in which they're laid out! Without wishing to diminish all the hard work that has plainly gone into it, this IS a step back for the semantic web we should be striving for.

To explain to the uninitiated:

Ideally we might wish for our website to display on a pc screen, as well as a mobile phone, or even via an audible screen reader to a blind or visually impaired user. We'd rather not rewrite the markup three times for the three different devices, it's best to use the one XH?TML Template and style it with CSS for the three devices.

A simple example:

<div id="left_column"></div> might not be in the left column for a mobile phone due to restricted screen space - and, for a screen reader, "left" anything is irrelevant!

Be semantic about it. Give meaning to your elements. <div id="navigation"> is much better!

Good work on the Blueprint stuff, but for all our sakes, revisit this issue. Please.

I'm with Adrian on this one. Your class and id names should NOT be used to describe the manner in which they're laid out! Without wishing to diminish all the hard work that has plainly gone into it, this IS a step back for the semantic web we should be striving for.

To explain to the uninitiated:

Ideally we might wish for our website to display on a pc screen, as well as a mobile phone, or even via an audible screen reader to a blind or visually impaired user. We'd rather not rewrite the markup three times for the three different devices, it's best to use the one XH?TML Template and style it with CSS for the three devices.

A simple example:

<div id="left_column"></div> might not be in the left column for a mobile phone due to restricted screen space - and, for a screen reader, "left" anything is irrelevant!

Be semantic about it. Give meaning to your elements. <div id="navigation"> is much better!

Good work on the Blueprint stuff, but for all our sakes, revisit this issue. Please.

I'm with Adrian on this one. Your class and id names should NOT be used to describe the manner in which they're laid out! Without wishing to diminish all the hard work that has plainly gone into it, this IS a step back for the semantic web we should be striving for.

To explain to the uninitiated: Ideally we might wish for our website to display on a pc screen, as well as a mobile phone, or even via an audible screen reader to a blind or visually impaired user. We'd rather not rewrite the markup three times for the three different devices, it's best to use the one XH?TML Template and style it with CSS for the three devices.

A simple example: <div id="left_column"></div> might not be in the left column for a mobile phone due to restricted screen space - and, for a screen reader, "left" anything is irrelevant!

Be semantic about it. Give meaning to your elements. <div id="navigation"> is much better!

Good work on the Blueprint stuff, but for all our sakes, revisit this issue. Please.

Just wrote som simple php to calculate the grid....hopefully it's useful for someone...

<?php

$totalwidth = 940;
$columns = 10;
$i = 1;

for ($i = 1; $i <= $columns; $i++) {

$width = ($i * ($totalwidth/$columns)) - 20;
echo ".span-".$i."\t\t{ width: ".round($width, 10)."px; }\n";


}
echo "\n\n";

for ($i = 1; $i <= $columns; $i++) {
//.append-1   { padding-right: 70px; }  
$width = ($i * ($totalwidth/$columns));
echo ".append-".$i."\t\t{ padding-right: ".round($width, 10)."px; }\n";


}

echo "\n\n";

for ($i = 1; $i <= $columns; $i++) {
//.append-1   { padding-right: 70px; }  
$width = ($i * ($totalwidth/$columns));
echo ".prepend-".$i."\t\t{ padding-left: ".round($width, 10)."px; }\n";


}

?>

Who's to say you can't be both precise with your layout and semantic all at the same time? If I can enter <div class="column span-3 first">, why could I not add a bit of semantic goodness to it and revise to <div class="column span-3 first" id="navigation">. Either way you are talking about having separate CSS files for each target screen. Just because the extra class names are there when displaying for a mobile phone, does not mean that they have to be utilized. Simply don't call these stylesheets for screens in which they are not relevent. You can then fall back on your semantic-only tags. Perhaps the future holds base configurations for multiple target screens so that this same language will be relevant across all. The idea is reusability and best practices. I love it.

This defeats the whole idea of CSS; separation of document structure and presentation. Everything in in the XHTML is supposed to be semantic, even the class names. Using classes such as 'left' or 'right' for example is not a good idea, the point is that the content should be redesignable or adaptable to different ways of presentation (e.g. different CSS for different media). Class names should instead be given like 'maincontent', 'news' or 'navi' so that they'll never have to be changed due to redesign and so that they can be presented in different layouts and still make sense. CSS and XHTML isn't all that hard, grab a good book like Bulletproof web design (by Dan Cederholm) or if you want to go deeper into the subject Designing with web standards (by Jeffery Zeldman), to learn how to do it properly. It's rather simple when learning from good books.

You had a statement that said

By default, the grid is 950px wide, with 24 columns spanning 30px, and a 10px margin between columns.

Would this support widths that adjust to the screen itself?

You had a statement that said

By default, the grid is 950px wide, with 24 columns spanning 30px, and a 10px margin between columns.

Would this support widths that adjust to the screen itself?

You had a statement that said

By default, the grid is 950px wide, with 24 columns spanning 30px, and a 10px margin between columns.

Would this support widths that adjust to the screen itself?

Shouldn't the total width formula be Total width = (columns * 40) - 10

I think the one provided above is wrong.

Folks who are commenting that this framework creates markup which is un-semantic and is "giant step backwards" are missing the point.

The idea of this framework is to allow you to bang out a layout very quickly, without have to rewrite a lot of custom CSS with every single project. It's not necessarily intended to be a final solution.

In order to have nice clean semantic markup do the following:

Once you have your layout finished, create class names or IDs which reflect the semantic meaning of the markup they represent, then simply create a new stylesheet and copy all the framework style rules used in the layout into your new stylesheet. Adjust as needed. Then just clean up your markup by removing framework class names and replacing with your own. Easy. As. Pie.

This is a great framework, keep up the good work.

Google desktop gives a malware warning on the link to http://www.sontakey.net/archives/61

<quote>

Comment by sameer.sontakey, Aug 26, 2007

I've created a simple tutorial here for people that are new to blueprint. Hope it helps! http://www.sontakey.net/archives/61 </qoute>

Google desktop gives a malware warning on the link to http://www.sontakey.net/archives/61

be alert

Comment by sameer.sontakey, Aug 26, 2007

I've created a simple tutorial here for people that are new to blueprint. Hope it helps! http://www.sontakey.net/archives/61

In a ideal world structure and content can be separated, but I think that most that is complaining forgets that there is many layers of structure. Content is not involved here at all, this is just structure, separated from the content.

Anyone that has problems with having a class that is called 'left' or 'half' or whatever can freely put id's on their tags and that fits into their ideas of 'clean', and then use them for future overrides. But do not forget that CSS and HTML, altough pretty neat, is not perfect. Therefore our implementations will also be less than perfect.

This is actually a really, really bad idea. The commenters above stating that it doesn't matter if we use "left" and "right" in the code obviously haven't designed multi language sites, with both left-to-right and right-to-left scripting systems, not to mention down-and-left. Semantic code means just that: semantic code, free from layout statements. Have a look at Mike Stenhouse's system instead, at least that makes sense. It isn't complete, but if you understand it, you'll whip out any layout you desire in minutes.

Go have a look, read and make sure you understand: http://www.contentwithstyle.co.uk/Articles/17/a-css-framework/

Then you'll know why this is such a bad idea.

Max, this is not a "really, really" bad idea.

Most people do not have to design multi-language sites. Granted, sticking in positional names can get confused when layouts change, as you mention. But the argument that you make (the css framework you cite) suffers from a similar issue... the names of the divs are all English names... is that not inaccessible? Don't terms such as header and footer imply layout just as much left and right?

I'm getting pretty tired of people encouraging (supposedly) universal considerations. There are none. Any programmer or designer worth a damn knows that's true.

In practice, someone developing internationalized sites with a css framework would undoubtedly employ a css layout translation layer just as they would an i18n content layer. Those who don't need this... won't. Leave it alone, and get off the high horse.

The issue Max was talking about was with languages that flow text in directions other than "right to left". The fact that the names of the items are in English isn't an issue. No one ever complained that <quote> was english only. We would complain if <quote> was only allowed to contain English text.

There aren't any "universal considerations", but there are ones that can be particularly nasty and limiting in the long run.

Might want to remove the ".first" class used in the above example illustrating nesting columns, this confused me at first till I read the Changelog file :-)

"If only you have a hammer, you tend to see every problem as a nail". There are many paradigms that suit specific purposes, I think this one of them, that can co-exist with the others.

I think blueprint would work really well with Switch CSS - http://sourceforge.net/projects/switchcss/

This is a tool that pre-processes your CSS allowing you to inherit styles from one style to another and have style aliases. This would allow you to eliminate all of the non-semantic information on the page, since you could make your stylesheet (well, the one you edit yourself) just specify for each semantic piece, what the blueprint CSS for that should be.

I have had problems using a label + input(text), where my input text is much bigger then my label. They simply don't align. Is that expected behavior?

Anyone else think the H2 needs to have a line-height? With the default styles, there's a disproportionate amount of space between multiple lines of H2s. Take a look at the example in tests/elements.html, especially at larger/smaller font zoom sizes than the default.

Ideally, headings should be short and avoid this problem, but I have some very non-ideal content to work with. :-)

I've overridden the default H2 with this, and it works fairly well:

h2 { font-size: 1.8em; line-height: .83em; margin-bottom: .83em;}

The only problem is that in certain circumstances, without some other visual difference to distinguish them, an H2 and an H3 could be confused with each other. So I also bumped down the H3 slightly:

h3 { font-size: 1.4em; line-height: 1.07; margin-bottom: 1.07em; }

Would a site admin like to remove all the multiple posts? It's hard enough wading through the morass to find the worthwhile ones as it is. :)

Oh, terrific job by the way. Please feel free to ignore all comments which suggest a non-semantic approach to your method.

This is all about site DEVELOPMENT, people. It is implicit that you would, of course, build your own semantic selectors on top of this framework.

Hi,

In retrive to the great time savings I'm getting from blueprintcss here is my small contribution to the project. I've designed a simple Help Sheet. Please download it and help me to improve it with your comments.

http://www.digitart.net/blueprintcss/bluebrintcss.pdfhttp://www.digitart.net/blueprintcss/bluebrintcss.pdf

Hope it helps. AV

Ups.. I meant to say, in payment for the grat time savings ... etc. See what I mean? I need help with english! I presume the Help Sheet will need several fixes before Olav agrees to publish it as a useful tool. Anyway, let's see what happen.

http://www.digitart.net/blueprintcss/bluebrintcss.pdf

Tutorial in italiano: http://css.html.it/articoli/stampa/2423/layout-a-griglia-con-blueprint/

What about 100% grids? Fixed design isn't suitable for all websites.

How to vertically align a label with a span, or some piece of text element? Something like <li><label>Some name</label><span>The real thing</span></li> Always look bad here.

Just tested blueprint for the first time. Works great except for one thing. Firefox shows all url:s in parenthesis after the hyperlink. Had to remove the code below from print.css to make it work.

a:link:after,a:visited:after { content:" (" attr(href) ") "; font-size:90%;

What am I doing wrong? }

Can anyone give me tips to get this working with thickbox - http://jquery.com/demo/thickbox/

Hey don't worry - Blueprint works with http://www.dolem.com/lytebox/

http://bjorkoy.com/blueprint/sample.html

all links are broken and not working. Can you please look in to it.

one of the examples above uses the "first" class, but I can't find .first anywhere in the blueprint CSS. Am I missing something? It seems as though the "first" class would make a column appear leftmost, regardless of its source order, right? That would be useful for left sidebars, for example.

There's an error (it would seem) in the documentation... which will REALLY confuse those learning. First of all... (pun intended) "first" has been deprecated.

Second, there is no blueprint/lib/compressed.css

It is now in screen.css under the blueprint/compressed/screen.css

So... this tutorial should be fixed.

FYI, for anyone trying this out. When you go live, you just need to change from css/blueprint/screen.css to: css/blueprint/compressed/screen.css

hth

Can you guys give an example of when to use append/prepend? I can't fathom why you'd need that... just change the span...?

I've translated this tutorial into Japanese. You can find it here. http://d.hatena.ne.jp/minorio/20080117/1200562510

Japanese follows: このチュートリアルを日本語に翻訳してみました。よろしければご参照ください。 http://d.hatena.ne.jp/minorio/20080117/1200562510

The complainers here seem to be missing some important points:

1. There is never perfect separation of structure and content. The fact that you have to ever use class names and ids is one small example of this. If you had perfect separation then you could apply any stylesheet to any (purely semantic) web page. That's a nice ideal, but it makes a bitch of a sacred cow. If you want to achieve real world goals and not go crazy, you'll sacrifice the cow and make some yummy burgers out of it.

2. The separation of content from everything else provided by CSS and XHTML is somewhat overlapping the separation provided by building a database-backed web site. By keeping your content in a database, you can achieve a clean separation of content from just about everything else. (Of course you can't entirely separate your data from your data model--there is never any complete separation of anything.)

How can a column extend down as far as the longest column? Ie, I have 3 columns, the left nav has a background image repeat-y but since the left nav column is only 600 pixels high the background stops there.

The critique of BP regarding mixing content and structure is absolutely legitimate. If one were to use BP as a FRAMEWORK they would eventually have hell to pay. Several of the counter arguments are about replacing structural tags with semantically meaningful tags after nailing things down. If you did this early enough it would make lots of sense - in fact is really the only way to get the most out of XHTML/CSS with BluePrint?. I think it may be a bit much to call BluePrint? a "framework" if the final stroke is to replace tags and prune the CSS. I think it would be fair to rename it a scaffold. That implies its final replacement with developed code (like and RoR scaffold) as opposed to the idea of continual support for the environment (like Active Record).

@timrohde: You're completely right.

Blueprint probably should not be called a framework, it's more like a "toolbox" or "neat set of CSS classes". :)

The semantics of BP are highly questionable, and this will probably never change very much. It's a painful tradeoff. However, we are making prograss on this.

The new compressor in 0.7 lets you automatically set up semantically correct classes. You can for instance specify an ID called #main-col, which should get the CSS from any BP class, like .span-10 and .append-1. The only think you'll have to do manually (for now), is to add these IDs to your HTML, replacing old BP classes.

So in conclusion, your concerns are our concerns as well, and we're working on it. :)

That sounds cool. I think BP is great and appreciate the work! I think the idea of scaffolding - with the implications of a standard starting point and with some encouragement to keep with convention - is profoundly useful. BP as a project can encouraged samantic tagging and provide a rich sample set of core tags. That could go a long way toward making pages more machine readable as well as making them easier to develop in a robust way.

<?php

$totalwidth = 950; $columns = 24; $i = 1;

for ($i = 1; $i <= $columns; $i++) {

$width = ($i ($totalwidth/$columns)) - 10; if ($i == $columns) {

echo ".span-".$i."\t\t{ width: ".$totalwidth."px; margin:0; }\n";

} else {

echo ".span-".$i."\t\t{ width: ".ceil($width)."px; }\n";

for ($i = 1; $i <= $columns; $i++) { //.append-1 { padding-right: 70px; } $width = ($i ($totalwidth/$columns)); echo ".append-".$i."\t\t{ padding-right: ".ceil($width)."px; }\n"; }

echo "\n\n";

for ($i = 1; $i <= $columns; $i++) { //.append-1 { padding-right: 70px; } $width = ($i ($totalwidth/$columns)); echo ".prepend-".$i."\t\t{ padding-left: ".ceil($width)."px; }\n"; }

?>

I dont know why work with ruby... its out of the project

If i want to custom my grid in BluePrint? 0.7, can i always use this tool : Blueprint Grid CSS Generator (http://kematzy.com/blueprint-generator/) ?

@pixenjoy: I actually tried using the CSS Generator but noticed that the generated code is based off of version 0.6. Because I want to use 0.7 on a new project, I simply used the generator to get a good idea of what my column widths should be and manually fixed the grid.css file. Maybe that's not a good way of doing it but it seemed a lot easier.

@chris.crook: Take a look at faux column solutions for the type of problem you are having.

http://www.alistapart.com/articles/fauxcolumns/

http://www.communitymx.com/content/article.cfm?cid=afc58

I hope these were helpful.

Can anyone tell me why are the ahref's showing in my navigation links here? http://bluetoolz.com/test/index.html Man I'm going nuts......Thanks for any help or you can contact me direct at mspomer at? cox dot net.

I don't know about you people, but I've just downloaded css and made a test page with code from above:

<div class="container">

<div class="span-24">

Header

</div> <div class="span-4">

Left sidebar

</div>

<div class="span-16">

<div class="span-8">

Box1

</div> <div class="span-4">

Box2

</div> <div class="span-4 last">

Box3

</div> <div class="span-16 last">

Main content

</div>

</div>

<div class="span-4 last">

Right sidebar

</div> <div class="span-24">

Footer

</div>

this doesn't work - right sidebar is not "right"

what about fixed divs, im trying to develop a theme with a fixed left nav div that won't show the bgimage and won't fix the div in IE but the bg image shows

Not a tutorial, but can be useful for somebody - building of blueprint design layout for web tool (http://alexpolski.com/2008/03/23/design-layout-for-mass-pagerank-checker/)

That worked out perfectly, thank you very much for your help with extending a repeat-y image down the full length of the page! Cheers

@nenad I also suspect that there are something wrong with the example/css for nested divs. Might 0.71 have broken something?

How should I lay out pop ups.. or dialog windows with this lib if all containers have the same size? Seems a bit limited. But theres prolly a solution to that too.

how can you work out liquid layouts?

is anyone else having major problems with the latest version in IE? IE-fix files do nothing. Works fine in firefox for me. About to start using the Yahoo yui equivalent of blueprintcss.