Making CSS layouts with blueprint it’s as easy as it gets. To begin you most download blueprint from blueprintcss
after you’ve downloaded the framework extracted it’s contents and put the folder called "blueprint" inside the folder where
your wepage will be. You do not have to know how blueprint works to use these layouts but I recommend that you watch our video
"Blueprint: CSS Layouts Made Easy".
First am going to give you the basic set up for making layouts. In the video we only included the screen.css file, that’s because
this file has form.css, reset.css and grid.css, but form.css might interfere with your current css code so this time we are only
including the files needed to make layouts not to style.
This is going to be our set up for every layout we make. The files included are "reset.css", this ensures that your CSS looks the same
in all browsers by resetting margins and padding to 0px. The grid.css file is what we use to make the layouts, and the ie.css is there
to make sure that your layouts work on Internet Explorer. Blueprint also comes with typography.css, this file styles elements like the header, tables and blockquotes but not form elements, we like to use it so we are going to include it.
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>CSS Layouts</title> <link rel="stylesheet" href="blueprint/src/reset.css" type="text/css" media="screen" /> <link rel="stylesheet" href="blueprint/src/grid.css" type="text/css" media="screen" /> <link rel="stylesheet" href="blueprint/src/typography.css" type="text/css" media="screen" /> <!--[if IE]> <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen" /> <![endif]--> </head> <body> <div class="container"> <!-- This is where you will add the css code for the layout you like --> </div> </body> </html>
3 column layout
<div class="span-24"><!--banner begins --> banner </div><!-- banner ends --> <div class="span-4"><!-- left column begins--> left </div><!-- left column ends--> <div class="span-16"><!-- content column begins--> middle </div><!-- content column ends--> <div class="span-4 last"><!-- right column begins--> right </div><!--right column ends --> <div class="span-24"> footer </div>
Here is the result.
2 Column Layout(left)
<div class="span-24"><!--banner begins --> banner </div><!-- banner ends --> <div class="span-6"><!-- left column begins--> left </div><!-- left column ends--> <div class="span-18 last"><!-- content column begins--> Right </div><!-- content column ends--> <div class="span-24"> footer </div>
Here is the result.
I knew you wanted a layout with a column on the right as well, so here is the code.
2 column layout (right)
<div class="span-24"><!--banner begins --> banner <div><!-- banner ends --> <div class="span-18"><!-- content column begins--> Right </div><!-- content column ends--> <div class="span-6 last"><!-- right column begins--> left </div><!-- left column ends--> <div class="span-24"> footer </div>
Here is the result.
