960 How to use the Grid layout framework (front-end CSS framework)

960 Total Frame width 960px

CSS frameworks have been around for a long time, and the usefulness of these frameworks has been discussed many times. Some people say that the CSS framework is not advanced enough, others say that these frameworks greatly save their development time. Here, we will not discuss this issue.

A while ago, I learned about CSS frameworks. After experimenting with Malo, blueprint and 960, I came to the conclusion that I like the 960CSS frame best.

This tutorial will explain the fundamentals of this framework so that you can quickly enter development with 960来.

Basic principle

You have to know some basic principles to " Learn how this framework works ". You can learn it by experimenting (or using firebug), but I'll introduce it here. Let's get started.

Do not edit 960.css files

The first is a small tip: Do not edit 960.css files, otherwise you will not be able to update this framework in the future. Because even though we need to lay out our HTML, we will create a standalone CSS file.

Load grid

Because we can use the CSS code of an external file, we have to load them in our HTML Web site, and we can do this with the following code:

<link rel= "stylesheet" type= "Text/css" media= "All" href= "Path/to/960/reset.css"/>

<link rel= "stylesheet" type= "Text/css" media= "All" href= "Path/to/960/960.css"/>

<link rel= "stylesheet" type= "Text/css" media= "All" href= "Path/to/960/text.css"/>

After these are done, we have to add our own CSS files. For example, you can call this file a style.css or site.css or any other name. Use the following code to refer to this file:

<link rel= "stylesheet" type= "Text/css" media= "All" href= "Path/to/style.css"/>

Container

In the 960 framework, you can select two container classes named . Container_12 and . Container_16 . They are all 960px wide (which is why they are called 960), and they differ in the number of columns. . Container_12 is divided into 12 columns,. Container_16 is divided into 16 columns. These 960px-wide containers are horizontally centered.

Grid/Column

There are a lot of column widths to choose from, and in these two containers, these widths are not the same. You can view these widths by opening a 960.css file. But this is not necessary to design a website. There is a little trick to make this framework easier to use.

For example, you want to build two columns (called sidebar/content) in your container. You can do this:

<div class= "container_12″>

<div class= "grid_4″>sidebar</div>

<div class= "Grid_8″>main content</div>

</div>

As you can see, the number of your first column (Grid_4) plus the second column (Grid_8) is exactly the number. That is, you do not have to know the width of each column, and you can choose the column widths through some simple mathematical calculations.

If we were to build a 4-column layout, the code would be this:

<div class= "container_12″>
<div class= "grid_2″>sidebar</div>
<div class= "Grid_6″>main content</div>
<div class= "Grid_2″>photo ' s</div>
<div class= "grid_2″>advertisement</div>
</div>

As you can see, the system is still perfect. But if you want to use nested columns, you'll find it problematic. For example, if the following three columns belong to the content column:

<div class= "container_12″>
<div class= "grid_2″>sidebar</div>
<div class= "grid_10″>
<div class= "Grid_6″>main content</div>
<div class= "Grid_2″>photo ' s</div>
<div class= "grid_2″>advertisement</div>
</div>
</div>

You'll find this misplaced, but don't worry, that's what we're going to say next sectionto.

Spacing

By default, there is a gap between each column. Each grid_ (here represents a number) has a spacing of 10 pixels around the class. That is, there is a total of 20px spacing between the two columns.

20px spacing is great for creating a layout that has a wide enough gap to make everything look natural. This is one of the reasons I like to use 960.

In the example above, we had a problem and now we're going to fix it.

The problem is that each column has left and right margins. In the three columns that are nested, the first and last columns do not need margins, the workaround is:

<div class= "container_12″>
<div class= "grid_2″>sidebar</div>
<div class= "grid_10″>
<div class= "Grid_6 Alpha" >main content</div>
<div class= "Grid_2″>photo ' s</div>
<div class= "Grid_2 Omega" >advertisement</div>
</div>
</div>

We can simply add the "Alpha" style to remove the left margin and add the "Omega" style to remove the right spacing. So the example we just created is perfect in any browser (including IE6, of course).

Style

Well, you're now fully aware of the rationale for creating a grid layout with the 960 framework. Of course, we can also add some styles to our layout.

<div class= "container_12″>
<div id= "sidebar" class= "grid_2″>sidebar</div>
<div id= "Content" class= "grid_10″>
<div id= "main_content" class= "Grid_6 Alpha" >main content</div>
<div id= "Photo" class= "Grid_2″>photo" s</div>
<div id= "Advertise" class= "Grid_2 Omega" >advertisement</div>
</div>
</div>

Because CSS uses attributes to determine which style declaration has precedence over other styles. "ID" is more important than class .

In this way, we can rewrite the rules (such as width, padding, borders, etc.) that are set by class in our own files.

I also added some styles, which took me 5 minutes to tidy up the whole example. View the source code and style declarations for the sample:

Get

That's it. You've learned to use the 960 framework to build cross-browser compatibility and neat layouts. Once you have mastered the 960 framework, you will greatly reduce the time it takes to write CSS.