Feeds:
Posts
Comments

Archive for the ‘Blueprint CSS’ Category

Greetings!

To create a web layout for our project, Trainer’s Union ( http://tu.slashprog.com/), our mentor told us about two (960.gs, Blueprint) Open Source CSS Frameworks.

I just started to play with Blueprint.

I would like to share my little knowledge of blueprint here.

What is Blueprint ?

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Source : http://www.blueprintcss.org/

Installing Blueprint :

To install it, download the zip or tar file from http://www.blueprintcss.org/

Extract the contents and you may find it contains many folders

Keep the important folder named blueprint and delete the rest.

Blueprint folder contains the necessary CSS files.

Uploading Blueprint to HTML code:

To make use of blueprint css files, we need to upload it into our <head> section of HTML file.

 

    <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]-->
    

Things must know about Blueprint

  • Blueprint is a grid based framework
  • The grid is 950px wide, with 24 columns spanning 30px, and a 10px margin between columns
  • First step in designing the layout is to surround your grid with a container
  • Use div’s with one of the .span-x classes to set the number of columns the elements should span
  • The “last” class, which every last element inside a container or another column needs
  • Nesting of columns is possible.
  • Placing “showgrid” class shows a layout of your page inside a grid

Now we can create blueprint CSS framework for a simple layout design as follows

A Simple Layout:

We can write a skeleton code for the above layout

Creating a Skeleton Code:

<html>
<head>
 <title>Sample</title>
 <link rel="stylesheet" href="blueprint/screen.css" type="text/css" />
 <link rel="stylesheet" href="blueprint/reset.css" type="text/css" />
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
<!--Container Div-->
<div class="container showgrid">

<!-- Header Div-->
<div class="span-24">
<p>Header</p>
</div>
<!--End Header Div-->

 <!-- Left Div-->
 <div class = "span-7">
 <p>Parent Col 1</p>
 <div class="span-3">
 <p>Child Col 1</p>
 </div>
 <div class="span-4 last">
 <p>Child Col 2</p>
 </div>
 </div>
 <!-- End Left Div-->

 <!-- Mid Div-->
 <div class ="span-10">
 <p>Parent Col 2</p>
 <div class="span-10 last">
 <p>Child Col 1</p>
 </div>
 </div>
 <!-- End Mid Div -->

 <!-- Right Div-->
 <div class="span-7 last">
 <p>Parent Col 3</p>
 <div class="span-2">
 <p>Child Col 1</p>
 </div>
 <div class="span-2">
 <p>Child Col 2</p>
 </div>
 <div class="span-3 last">
 <p>Child Col 3</p>
 </div>
 </div>
 <!-- End Right Div-->

 <!-- Footer Div-->
 <div class="span-24">
 <p>Footer</p>
 </div>
 <!-- End Footer Div-->

 </div>
<!-- End Container Div-->

</body>
</html>

The web page looks as,

After adding some contents into it, the web page looks as below

Read Full Post »