First things first, buckle your seatbelts, this is going to be a long one. It concludes the three part tutorial (Part 1, Part 2). We’re going to write the code to make the design happen, this includes putting in some dummy text, and at the end, we will have a working design, that could be converted into a WordPress theme. (future tutorial?).
Anyway, first we are going to fill out the index.html file with some standard HTML and the code needed to call blueprint into action, (there will be a download later on in the post if you can’t be bothered to fill out the file yourself):
<html> <head> <title>Our Design</title> <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print"> <!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> <!-- this needs to be after the framework --> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div class="container"> </div> </body> </html>
I’m going to describe the important lines to you:
- On the 4th line we have a link to our custom stylesheet, it’s currently empty, so it will have no effect on the page yet.
- On the 6th, 7th and 8th lines we have the standard blueprint call, and one line that fixes the framework for IE.
- On the 12th and 14th lines we have the main div class that holds all of the blueprint columns etc. This can be changed to <div class=”container showgrid”> to make it show the grid in the background, which is very useful for laying out custom web layouts.
- All of the rest is standard HTML and should make some sense.
We are now going to put in the columns to blueprint, so within the <div class=”container”> and the </div> tags we add:
<div id="header" class="prepend-2 span-22"> </div> <div id="bg" class="span-24"> <div id="content" class="prepend-2 span-14 append-1"> </div> <div id="sidebar" class="span-5 append-2 last"> </div> </div> <div id="footer" class="span-24"> </div>
All of these <div> tags have an id and a class value, this allows us to separate the styles out, all of the classes we use are part of blueprint and all of the id tags will refer to custom code we will write in the end. The key thing to remember is that there are always 24 columns.
The class=”span-24″ or similar shows how wide the column should be, and there is also an example that columns can be nested within others to keep them together. Spacing can be added easily with the prepend or append values in the class variable (?).
We add some dummy content to this:
<div id="header" class="prepend-2 span-22"> <h1>Our Website</h1> <p>And this is what we do</p> </div> <div id="bg" class="span-24"> <div id="content" class="prepend-2 span-14 append-1"> <h2>Content</h2> <p>this is a paragraph. Not a very long one but still, it's here...</p> <h3>Sub-content</h3> <p>This is a paragraph belonging to the sub content, no stealing.</p> </div> <div id="sidebar" class="span-5 append-2 last"> <h3>links</h3> <p>hello</p> </div> </div> <div id="footer" class="span-24"> </div>
Now when we load our index in a web browser it should show some text roughly laid out as we want, but there are no heights added to anything so it will look squashed and may not show well until we write in out own code. It should look like this:
Notice how Blueprint has automatically set some sensible text defaults, i’m not going to change them, but it’s easy to do in your custom css file.
Now we can start to put something into out custom stylesheet, style.css. Put in the following code:
body{
background-color:#ccc;
}
#header {
background:#fff url(img/header.png) 0 0 no-repeat;
height:150px;
min-height:150px;
}
#bg {
background:#fff url(img/content.png) 0 0 repeat-y;
}
#footer {
background:#0f1b1c url(img/footer.png) 0 0 no-repeat;
height:30px;
min-height:30px;
}
#copyright{
text-align:center;
}
Now if we reload the page we have:
Next we’re going to make all the text appear where we want it and change some colours and finer points, also we’re going to add the code to make the copyright notice show…
So we have added:
#title {
padding-top:30px;
}
#title h1, #title p {
color:#fff;
}
To the CSS file and:
<div id="copyright" class="span-24"> © All of us </div>
To the main index.html file, inside the div id=”bg” tags and after the sidebar.
The css at the top positions the title and makes the h1 and p aspects of the title white. The HTML adds another column containing our copyright notice (we have already aligned this to the center).
There we have it (sorry about my cursor being in the screenshot):
This was very useful. I’ve been looking for a “best practices” with BluePrint, and this really helped.
Thanks a lot for this. One thing – I didn’t see any mention of marking up the header content with so the stylesheet would change it to white. Maybe I’m missed something. Anyway, I added that inside the “header” div and all is well.
Very good point, I have made a mistake, the “#title h1, #title p {color:#fff;}” part assigns the colour, but i forgot to wrap the title in the #title div. On top of this you also made me realise that I had forgotten to close the div tag in the the downloads.
Thanks, you’ve pointed out some crucial errors in my tutorial. I’ll fix them now
Great tutorial but it breaks in ie6
. unfortunately the usual response is not available. we can’t upgrade 30K government employees running win2000. yeah I know, but what can I do about it?
The reason why I am looking at blueprint is to try and sidestep the issues I have with developing decent web applications for such a retarded browser.
Anyway once I insert the first part of the code into the style.css file the header is too narrow by exactly 1 column (I have showgrid on).
DC
I am too puzzled (but not surprised) by ie6’s rough treatment. It looks like there is a bug in bp version 0.9.1 (which I use): whenever .prepend/.append is used, for some reason the equivalent amount of space is missing in the width of the column being prepend’ed.
To visualize this better, uncomment the image backgrounds and use .showgrid. Hence the #sidebar floats further to the left as a result of the missing width of the #content, and most obvious, the header background is too short as well.
So to make a point I added the following code to style.css and that fixed the problem – well, visually anyway. I don’t know enough about CSS or BP to know whether that is a crude fix that creates more issues:
* html .prepend-2.span-22 { width: 950px} /* 880 + twice 40 of padding value */
* html .prepend-2.span-14.append-1 { width: 670px} /* 550 + thrice 40 of padding value */
Sorry….a small correction to my previous post the comment for the CSS fix, 1st line should read “870 + twice….” instead of “880…”.