CSS framework BluePrint and cssblueprint

CSS framework BluePrint and cssblueprint

If we are used to background programs, are we interested in front-end programming? Through the CSS framework, we can easily develop pages based on Div + CSS layout, let's take a look at the famous blueprint CSS framework today!

 

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

 

First, you should declare CSS, which is very simple. Add the following reference to the header area of the page:

 

 

Html code

1. <Link rel = "stylesheet" href = "css/blueprint/screen.css" type = "text/css" media = "screen, projection">
2. <Link rel = "stylesheet" href = "css/blueprint/print.css" type = "text/css" media = "print">
3. <! -- [If lt IE 8]> <link rel = "stylesheet" href = "css/blueprint/ie.css" type = "text/css" media = "screen, projection "> <! [Endif] -->

 

Blueprint provides a variety of css files, such as grid, form, print, reset, and typography. We will focus on the layout.

 

By default, the width is 950px. For example, we can use the following code to indicate the center Div of 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 columns in the container. For example, you need to implement a common top-level layout with three columns in the main area. You can use the following code:

 

 

Html code

1. <Div class = "container" style = "border: 1px solid #000;">
2. <Div class = "span-24 last">
3. Top
4. </Div>
5. <Div class = "span-4">
6. Left sidebar
7. </Div>
8. <Div class = "span-16">
9. Subject
10. </Div>
11. <Div class = "span-4 last">
12. Right sidebar
13. </Div>
14. </Div>

The naming rule of span-xdefines the width. Each span-xis increased by 40 pxcompared to the previous one, and the start value is 30px. the following definitions can be found in the grid.css file:

 

 

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 columns in the container may be nested. For example, in the following code, we have set a top, middle, and top layout. The center is divided into the left, middle, and right layout, the middle side includes the up and down layout. The Code is as follows:

 

 

Html code

1. <Div class = "container">
2. <Div class = "span-24 last">
3. Header
4. </Div>
5. <Div class = "span-4">
6. Left sidebar
7. </Div>
9. <Div class = "span-16">
10. <Div class = "span-8">
11. Box1
12. </Div>
13. <Div class = "span-4">
14. Box2
15. </Div>
16. <Div class = "span-4 last">
17. Box3
18. </Div>
19. <Div class = "span-16 last">
20. Main content
21. </Div>
22. </Div>
24. <Div class = "span-4 last">
25. Right sidebar
26. </Div>
27. <Div class = "span-24 last">
28. Footer
29. </Div>
30. </Div>

 

In all la S, note that the last column of the definition in a container must be added with last. Make sure that the total number of span-x defined values in a row exceeds 24, to learn more, you can directly download the blueprint framework package in the attachment, which contains a complete and comprehensive example.

 

It seems like a good CSS framework for beginners.

 

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