CSS Framework Blueprint

Accustomed to the background of our program, whether it is interested in the front-end programming, through the CSS framework, so that we can easily develop a page based on the DIV+CSS layout, today let us understand the next famous Blueprint CSS Framework bar!

Its official website: http://www.blueprintcss.org/

First you should declare a good CSS, which is very simple, by adding the following references in the head area of the page:

HTML code

2. <link rel="stylesheet" href="css/blueprint/screen.css" type= "Text/css" media= "screen, projection">
4. <link rel="stylesheet" href="css/blueprint/print.css" type= "Text/css" media= "Print">
6. <!--[if LT IE 8]><link rel= "stylesheet" href= "Css/blueprint/ie.css" type= "text/css" media= "screen, projection "><! [endif]-->

Blueprint provides us with a variety of CSS files such as grid,form,print,reset,typography, and we focus on the next layout.

By default, 950px is the width, for example we can use the following code to represent the center div of the 950px:

HTML code

1. <div class="container">
2. Lt;p>here ' s my site! </P>
3. </div>

You can use Span-x to define the column in the container, for example, we need to implement the common top, main area 3 column layout, which can take advantage of the following code:

HTML code

2. <div class="container" style= "border:1px solid #000;" >
4. <div class="span-24 last">
6. Top of
8. </div>
10. <div class="span-4">
12. Left sidebar
14. </div>
16. <div class="span-16">
18. Subject
20. </div>
22. <div class="span-4 last">
24. Right Sidebar
26. </div>
28. </div>

The Span-x naming convention is to specify the width, each span-x is 40px higher than the previous one and the starting value is 30px, which can be found in the Grid.css file as follows:

HTML code

1. /* Use these classes to set the width of a column. */
2. . span-1 {width:30px;}
3. . span-2 {width:70px;}
4. . span-3 {width:110px;}
5. ......
6. . span-23 {width:910px;}
7. . span-24, div.span-24 {width:950px; margin-right:0;}

The definition of the column in the container is perhaps nested, such as the following code we have fixed a top, middle, top layout, in which part of the left, middle and right layout, the middle side includes the upper and lower layout, the code is as follows:

HTML code

2. <div class="container">
4. <div class="span-24 last">
6. Header
8. </div>
10. <div class="span-4">
12. Left sidebar
14. </div>
18. <div class="span-16">
20. <div class="span-8">
22. Box1
24. </div>
26. <div class="span-4">
28. Box2
30. </div>
32. <div class="span-4 last">
34. Box3
36. </div>
38. <div class="span-16 last">
40. Main Content
42. </div>
44. </div>
48. <div class="span-4 last">
50. Right Sidebar
52. </div>
54. <div class="span-24 last">
56. Footer
58. </div>
60. </div>

In all layouts, note that the definition of the last column within a container is appended to the previous one, to ensure that the sum of the values of the span-x defined in a row is more than 24, and you want to know more, you can download the blueprint frame package directly in the attachment with a complete and comprehensive example.

It feels like a good CSS framework for beginners.

• Joshuaclayton-blueprint-css-v0.9.1-0-g9be6857.zip (3.9 MB)

CSS Framework Blueprint