Blueprint CSS Framework

As a freelance developer, I am always looking for more work. The other day I was reading the skills required for a particular job and it mentioned that the candidate should have knowledge of the Blueprint CSS Framework. I had never heard of the framework before and was curious as to why one would need a framework for CSS. I consider myself to be an expert CSS designer, but I decided to check out this Blueprint thingy.

The website says that by using the Blueprint CSS Framework, I can cut down my development time and it eliminates the discrepancies across browsers. Sounds intriguing. After a bit more research, I found that Eric Meyer’s Reset CSS is incorporated into the framework. I have learned a great deal about CSS from Eric Meyer over the years:

Since I was beginning a redesign for a client, I decided to use the Blueprint framework as the basis for the effort.

After downloading the framework, I opened the screen.css file. I noticed a bunch of generically named CSS classes. Looked rather confusing. The file also contained quite a few span classes with width attributes only.

...
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}
.span-8 {width:310px;}
.span-9 {width:350px;}
.span-10 {width:390px;}
.span-11 {width:430px;}
.span-12 {width:470px;}
.span-13 {width:510px;}
.span-14 {width:550px;}
.span-15 {width:590px;}
.span-16 {width:630px;}
.span-17 {width:670px;}
.span-18 {width:710px;}
.span-19 {width:750px;}
.span-20 {width:790px;}
.span-21 {width:830px;}
.span-22 {width:870px;}
.span-23 {width:910px;}
.span-24 {width:950px;margin-right:0;}
...

I didn’t understand the concept until I opened the grid.html file (tests/parts/grid.html). I saw how the page was designed using these spans.

Note: The Blueprint CSS Framework was designed with a 1024 screen width in mind, so the maximum container width is set to 950px.

So I started of by creating the home page for the site. I added the necessary CSS files to the top of the page:

<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 lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="style.css" type="text/css" media="screen">

You should not modify the framework files – create your custom styles in a separate CSS file. The style.css file is my custom CSS file. This file will be used to augment the stylings of the Blueprint Framework.

The Container Class

First, I will use the framework’s container class. This will hold all of the content on the page.

<div class="container">
 
</div>

You will notice in the screen.css file that the width for the container class is set at 950px.

.container {
        width:950px;
        margin:0 auto;
}

The framework automatically centers the container class on the page. I want to create additional styles for the container class. I do this in my style.css file.

.container {
	background-color:#1E4366;
}

I can optionally add a minimum height to the container.

.container {
	background-color:#1E4366;
        min-height: 800px;
}

CSS Span Classes

I designed the site with a menu at the top of the page. I will create a menu container using one of the framework’s span classes.

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

The span-24 class will create the container with a width of 950px. The span classes are automatically floated. I created the iet_main_menu class in my style.css file.

.iet_main_menu {
	background:url(images/menu_top.jpg) no-repeat;
	height:40px;
}

Now I create the banner using the same span class.

<div class="container">
	<div class="iet_main_menu span-24">
 
        </div>
        <div class="banner span-24">
 
        </div>
</div>

And in my style.css file:

.banner {
	background:url(images/banner.jpg) no-repeat;
	height:128px;
}

Now I want to create left and right column containers. These will be contained within a main-content div.

<div class="container">
	<div class="iet_main_menu span-24">
 
        </div>
        <div class="banner span-24">
 
        </div>
        <div id="main-content" class="span-24">
		<div id="left-col" class="span-13"></div>
		<div id="right-col" class="span-11"></div>
	</div>
</div>

I created the left-col and right-col id’s because I am creating a web application and I know that I may have to reference these id’s in the app. If your website is just html (and no programming will be required), then you can probably just use the span classes. These id’s are not part of the framework.

I want to set a minimum height for my left-col and main-content divs. Obviously this is optional.

#main-content {
	min-height:450px;
}
#left-col {
	min-height:300px;
}

CSS Drop-Down Menu Framework

The Blueprint CSS Framework does not have any specific styles to create a menuing system, so I decided to use the CSS Drop-Down Menu Framework. While I wish that the Blueprint Framework came with a menu plugin, this menu framework comes with a lot of options.

After deciding on the type of menu that I wanted to display, I loaded the necessary CSS files.

<link href="css-dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />

Depending on the type of menu that you want to use, you can optionally load a small JQuery plugin that will be used for IE 7 compatibility.

<!--[if lte IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

So next I added the menus to the menu container:

<div class="iet_main_menu span-24">
        <ul id="nav" class="dropdown dropdown-horizontal">
	        <li>Home</li>
	        <li>About</li>
	        <li>Services
	                <ul>
		                <li>Services 1</li>
		                <li>Services 2</li>
		                <li>Services 3</li>
	               </ul>
	        </li>
	        <li>Contact Us</li>
        </ul>
</div>

I then copied some of the styles from one of the theme files (dropdown/themes/_template/default.css) into my style.css file and modified them to match the look and feel of my site.

ul.dropdown {
        font-weight: normal;
        float:right;
        margin-top:8px;
}
 
ul.dropdown li {
 	padding: 7px 20px;
 	border-style: solid;
 	color: #1AB7EA;
}
 
ul.dropdown li.hover, ul.dropdown li:hover {
	color: #1AB7EA;
}
 
ul.dropdown a:link,
ul.dropdown a:visited	{ color: #1AB7EA; text-decoration: none; }
ul.dropdown a:hover		{ color: #fff; }
ul.dropdown a:active	{ color: #fff; }
 
ul.dropdown ul {
        width: 150px;
        margin-top: 1px;
}
 
ul.dropdown ul li {
	font-weight: normal;
	background-color:#1E4366;
}

That’s it. Now I can add as many menu items as I want and won’t have to worry about browser compatibility.

I still need to explore the Blueprint CSS Framework a bit more. I can see that over time, using the framework (along with the CSS Drop-Down Menu Framework) will enable me to design a site much faster than starting from scratch.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks