Blueprint CSS is a framework designed to make web page layout easy–even for CSS newbies. Its strength is providing tools to build CSS columns that make the much frowned-upon practice of layouts with HTML tables unnecessary.
Create a basic layout
Before you start creating your first basic page layout with Blueprint, bear this fact in mind: Blueprint’s default number of columns per page is 24. All your column definitions should add to that number.
The layout we’ll use has a header and footer that spans the width of your page, but that you can configure to fit your needs.
Here’s the layout for our example:
Enter this markup in that document:
<html>
<head>
<link rel="stylesheet" href="../../blueprint/screen.css"
type="text/css" media="screen, projection" />
</head>
<body>
<div class="container">
<h1>put header here</h1>
<hr />
<div class="span-6">
Column1
<p>ENTER SEVERAL SAMPLE PARAGRAPHS HERE.</P>
</div>
<div class="span-12">
Column 2
<p>ENTER SEVERAL SAMPLE PARAGRAPHS HERE.</P>
</div>
<div class="span-6 last">
Column3
<p>ENTER SEVERAL SAMPLE PARAGRAPHS HERE.</P>
</div>
<hr />
<div>
Footer
</div>
</div><!-- main container class -->
</body>
</html>
Walk through the code
We link to the Blueprint CSS files in the page’s
. The key parts of the body start with the first div, which uses the “container” class. That div encloses the remaining divs in the page. We layout all our columns in the form of div elements inside that main div.The markup between that first div and the second is where your page header goes. Place the first column of the body in the second div element. This element is where you start defining column widths by using classnames in this form: “span-[n]“, where n is the number of Blueprint-defined columns you want the column to span.
Do the Span Math
Our layout diagram tells us that the first column is 6 Blueprint-columns wide, so our div’s class name will be “span-6″. Our second column is 12 Blueprint-columns wide, so the div for that column uses the class “span-12.”
Blueprint needs to know which column is our last. We give it that info by indicating, in our layout’s last column, the “last” classname as follows:
If you haven’t displayed your page in a browser yet, do so now and see how you like Blueprint’s style.
Example two: reconfiguring the columns
<body onload="inish();"> <div class="container"> <h1>put header here</h1> <hr /> <div class="span-6"> Column1 <p>ENTER A FEW <P> PARAGRAPHS OF SAMPLE TEXT HERE.</P> </div> <div class="span-6"> Column 2 </div> <div class="span-6"> Column 2 </div> <div class="span-6 last"> Column3 </div> <hr /> <div> Footer </div> </div><!-- main container class --> </body> </html>
Nested Columns
The div for the header is a no-brainer:
Column two needs to take up the remainder of the 24 columns, so its class is 24 minus 10: “span-14,” and tack on the “last” class because column two is last in its row. Columns 2.1 and 2.2 fit inside column two, so their column widths need to span only to column two’s width: 14. Their classes both contain “span-7,” with col2.2′s having the “last” added to it. The footer, which is the last div, spans 24 columns, so its class attribute is “span-24 last.” Our source also contains a JavaScript function, makeDummyText(), that creates some sample text for us. Using this utility not only saves you from entering filler text yourself, but also keeps your CSS markup nice and clear, so you can see your column structure clearly. The makeDummyText() function, as written, places all existing HTML markup first and adds the filler text after. If you want to place the filler text before the existing HTML, just switch this line: And replace it with the following: j.innerHTML = sSampleText + j.innerHTML; Boks: Visual Grid Editor for BlueprintThe markup, with a JavaScript tool to fill text
<html>
<head>
<link rel="stylesheet" href="../../blueprint/screen.css"
type="text/css" media="screen, projection" />
<script type="text/javascript">
//<![CDATA[
function makeDummyText (){
//put dummy paragraphs in each div of the document
var divs = document.getElementsByTagName("div");
var s = "";
var j;
var sSampleText = "<P>If you are just learning to
pick out melodies and play them on a musical ";
sSampleText += "instrument, and *if those melodies are
confined just to C major,* you will begin";
sSampleText += "playing melodies on the piano so
quickly it will make your head spin. Do you know why? </P>";
sSampleText += sSampleText + sSampleText;
for (var i=0; i< divs.length; i++) {
//s += divs[i].innerHTML ;
j = divs[i];
j.innerHTML = j.innerHTML + sSampleText;
}
}//makedummytext
function inish() {
makeDummyText();
}//inish
//]]>
</script>
</head>
<body onload="inish();">
<div class="container">
<div class="span-24 last">
<p>Header</p>
</div>
<div class="span-10 showgrid">
<p>Col 1</p>
</div>
<div class="span-14 last showgrid">
<p>Col 2</p><!-- nested columns here -->
<div class="span-7 showgrid">
<p>Col 2.1</p>
</div>
<div class="span-7 last showgrid">
<p>Col 2.2</p>
</div>
<p>Auto-filled text will come here</p>
</div>
<div class="span-24 last">
<p>Footer</p>
</div>
</div>
</body>
</html>
References
Resources
Just recently I watched a presentation covering various CSS frameworks including grid systems. I honestly have no idea why I would want to use one.
To ease width and margin calculations I made myself a grid with various sizes and units and printed it on a sheet of paper. Kinda like a cheat-sheet.
It takes me less than 5 minutes to set up almost any kind of grid according to that sheet.
So why would I want to use a premade grid system that comes with a bunch of unneeded bulk? Were those systems created for CSS beginners? Or is there a higher purpose I’m failing to see?
P.s. I’m not intending on trolling the authors or users of such systems. Obviously I haven’t really taken the time to thoroughly review them so I’m hoping for a quick answer.
@Andrej C: I understand what you’re saying, however I look at it in a bit of a different way. CSS frameworks are still in their early stages, however the concept behind them makes sense. The purpose of any framework (including JS and PHP frameworks) is to make development easier and faster, and this is exactly what CSS frameworks are trying to do. Just as with any other language, I would not recommend using a framework without a solid understanding of how the language itself works, but I think that the basic principles are good. For example, I consider myself to have a good understanding of Javascript, but I’ve fallen in love with using the jQuery library and am willing to sacrifice the extra bulk code for the convenience that it offers. That is not saying, however, that it needs to be used for everything, but it’s a great foundation to work from.
its quiet interesting!!
Help! I’m learning the Blueprint CSS and when I copied and pasted your exact code into dreamweaver 8, no matter where I preview it, the site is not centered. I checked, I didn’t change your code– div class=”container” is set, and I went into the src grid CSS stylesheet to look at the container code there, as well in the compressed screen.css
It’s all correct. But the site doesn’t center itself on the screen, it pushes to the left edge.
Freaking wierd. Blueprint doesn’t work with Dreamweaver CS4.
It puts the last column under the first row.
I’m looking all over google but nobody seems to use this much I guess.
And in Microsoft Expression Web it’s not centered and to the left!
Me thinks something is wrong with blueprint…
Note: When doing a span-24, you actually dont need to include “last”. If you take a look @ the source code for blueprint u see:
.span-24 {width: 950px; margin-right:0;}
.last { margin-right: 0; }
So basically adding last does nothing — but maybe there’s benefit for general “good practice” or something?