Basic layouts with the Blueprint CSS framework
Ever wanted an easy way to make a website look good from the start without taking your focus away from programming? With Blueprint CSS you can set up a basic wireframe, with nice typography in just minutes!
Blueprint CSS is a CSS framework made up of pre-defined classes. Styles are controlled not by editing CSS, but by the way classes are assigned to page elements. Blueprint CSS works by creating a 24 column grid that you can size and position elements on by assigning certain classes.
In just 15 minutes, including designing the banner in Photoshop and writing this blog post, I was able to build a nearly-complete web page. With a few lines of our own CSS we’ll be able to have a great looking page.
To get to this point, you’ll need to download and install Blueprint CSS. To install, just drag the “blueprint” folder into your site root. Then all you need to do is create your html file with the appropriate classes defined, which you can find below. Remember to link the CSS files in the head of your page or it won’t work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Blueprint Test</title>
<link media="screen, projection" type="text/css" href="blueprint/screen.css" rel="stylesheet">
<link media="print" type="text/css" href="blueprint/print.css" rel="stylesheet">
<!--[if IE]>
<link media=”print” type=”text/css” href=”blueprint/ie.css” rel=”stylesheet”>
<![endif]–>
</head>
<body>
<div class=”container”>
<div class=”span-24″ id=”header”>
<img src=”images/header.jpg” alt=”Blueprint CSS - Example”/>
</div>
<div id=”navContain” class=”span-24″>
<ul id=”nav”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>
<div id=”news” class=”span-6″>
<h2>News</h2>
12.23.08 - Tested Blueprint CSS
</div>
<div id=”content” class=”span-18 last”>
<h2>Blueprint CSS</h2>
<p>
This div is set to span 18 of the 24 grid columns and show up as the last column in the row.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra massa et erat auctor porttitor. Nunc in turpis. Suspendisse pulvinar cursus sem. Ut luctus dui vel nulla. Nulla
rutrum adipiscing ante. Proin sed felis id ante ultrices semper. Etiam aliquet sollicitudin arcu. Integer vehicula ultrices eros. Aliquam sed neque eget ligula aliquet blandit. Sed
rutrum scelerisque ipsum. Donec et arcu. Praesent luctus. Curabitur ullamcorper auctor arcu.
</p>
</div>
<div id=”footer” class=”span-24″>
© 2008 mysite.com
</div>
</div>
</body>
</html>
Now we’ll create a new CSS file for our site, and link it to our page. I like to call mine styles.css, and since Blueprint doesn’t use that name, we will go ahead and use it. In that file, we will spruce up the navigation, and footer.
#navContain ul{
background-color:#7090C9;
left:-18px;
position:relative;
width:950px;
}
#navContain ul li{
display:inline;
list-style-type:none;
padding:10px;
}
#navContain ul li a{
text-decoration: none;
color: #FFFFFF;
}
#footer{
color: #ffffff;
text-align: center;
background-color:#7090C9;
}
There you have it! A simple, great looking page in no time.