In one of my previous articles, I mentioned about Blueprint CSS framework. Now I am going to show you how to use it for designing your web layouts. I am using Blueprint 0.6 for this tutorial.
Before we begin, I need to tell you about its grid. Blueprint's default width for all layout is set to 950px consisting of 24 columns (width units). These columns can be controlled directly by your HTML code (divs with class attributes). You will not be required to touch your CSS files for that.
Layout (three column)
In this tutorial, we will follow a three-column layout with a header and a footer.
Directory structure for your files
Create a new HTML document with this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>frinity.blogspot.com</title>
<link
rel="stylesheet"
href="blueprint/screen.css"
type="text/css"
media="screen, projection">
</head>
<body>
<div class="container">
<h1>Header</h1>
<hr />
<div>
First column here
</div>
<div>
Second column (main content)
</div>
<div>
Third column
</div>
<hr />
<div>Footer</div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>frinity.blogspot.com</title>
<link
rel="stylesheet"
href="blueprint/screen.css"
type="text/css"
media="screen, projection">
</head>
<body>
<div class="container">
<h1>Header</h1>
<hr />
<div>
First column here
</div>
<div>
Second column (main content)
</div>
<div>
Third column
</div>
<hr />
<div>Footer</div>
</div>
</body>
</html>
Now its time for adding some 'class' attributes to your HTML for creating the columns. Notice that I said the whole layout consists of 24 columns (or 24 width units). For example, you may want the first column to be 6 units wide, the middle column 12 units, and the third and last column to be 6 units. Therefore, the three columns equal to (6 + 12 + 6) = 24 units.
Notice the code highlighted in bold
<div class="column span-6">
First column here
</div>
<div class="column span-12">
Second column (main content)
</div>
<div class="column span-6 last">
Third column
</div>
First column here
</div>
<div class="column span-12">
Second column (main content)
</div>
<div class="column span-6 last">
Third column
</div>
Dont forget to add 'last' in the class attribute of your last column. This is important.
Final HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>frinity.blogspot.com</title>
<link
rel="stylesheet"
href="blueprint/screen.css"
type="text/css"
media="screen, projection">
</head>
<body>
<div class="container">
<h1>Header</h1>
<hr />
<div class="column span-6">
First column here
</div>
<div class="column span-12">
Second column (main content)
</div>
<div class="column span-6 last">
Third column
</div>
<hr />
<div>Footer</div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>frinity.blogspot.com</title>
<link
rel="stylesheet"
href="blueprint/screen.css"
type="text/css"
media="screen, projection">
</head>
<body>
<div class="container">
<h1>Header</h1>
<hr />
<div class="column span-6">
First column here
</div>
<div class="column span-12">
Second column (main content)
</div>
<div class="column span-6 last">
Third column
</div>
<hr />
<div>Footer</div>
</div>
</body>
</html>
Save your HTML file, and open it in a browser. Your layout is ready!
2 comments:
great tutorial! thanks
can you post another tutorial for placing text over images? i am looking for that for a while.
thanks again
@Frank:You'll have to do that on top of blueprint, link on your head tag to another css file, you can call it "custom" there, specify the rules to display an image as a background image. Let's say you want the div with class="image-behind" to have an image behind (duh! :P), put this on custom.css:
div.image-behind{
background-image:img/my_image.jpg
}
remember to set a minimum height in case the content of that div will be less taller than the image itself.
Post a Comment