Blueprint, A CSS Framework: Layouts Tutorial

Blueprint is a CSS framework that produces cross browser CSS, is easy to use and easy to learn. In this video I will show you how to make a simple layout with this framework. You can get blueprint from blueprint and you can get the code for the layout in this video down below.

No experience with CSS is required to follow this video, but it is recommend that you have some to make your own layouts. Enjoy!

Here is the code used in the video. 

<html>
<head>
<title></title>

<!--blueprint files being -->
<link rel="stylesheet" href="blueprint/screen.css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" media="print" />
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" media="screen,projection" />
<![endif]-->
<!-- blueprint files end-->


</head>
<body>
	<div class="container showgrid"><!--container begins (remove showgrid)-->
	
		<div class="span-24">
		<!--Banner -->
		</div>
		
		<div class="span-5">
		<!--Left column -->
		</div>
		
		<div class="span-11">
			<p>
				<!--middle column (upper) -->
			</p>
			
			<div class="span-6">
				<!--middle column (left) -->
			</div>
			
			<div class="span-5 last">
				<!--middle column (right) -->
			</div>
			
		</div>
		
		<div class="span-4">
		 <!--first right column  -->
		</div>
		
		<div class="span-4 last">
		<!--second right column -->
		</div>
		
		<div class="span-24">
		<!--footer content goes here -->
		</div>
		
	</div><!--container ends-->
</body>
</html>

Tagged as: blueprint, framework