Css framework 960 grid system (accept)

ArticleDirectory

• Containers (container)
• Grids (GRID)/columns (column)
• Margins
• Styling (add style)

Css framework: 960 grid system official website:Http://960.gs/

What is a framework? A framework is a conceptual structure that you can use in your web project. The css framework is generally a set of CSS files, including basic style font layout, form style, and table layout. For example:

* Typography.css font layout rules
* Grid.css table layout
* Layout.css Layout
* Form.css form
* General settings of general.css

Below are some good CSS frameworks, which are recommended.

Blueprint CSS

Blueprint is a css framework designed to reduce your CSS development time. It provides you with a powerful CSS Foundation to create your projects, including easy-to-use grid, effective font layout, and printable stylesheet.

960 Grid System

 I. Mysteries of 960

Starting from mathematics: 960 can be divided into 6 power of 2 multiplied by 3 and 5, which allows 960 to be divided into integer times of the following width:

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96,120,160,192,240,320,480
 

A total of 26 types (26 = 7*2*2-2, minus 2 is to remove 1 and 960 itself), we mark:

 
N (960) = N (2 ^ 6*3*5) = 26
 

According toAlgorithm, You can get:

 
N (360) = N (2 ^ 3*3 ^ 2*5) = 22n (480) = N (2 ^ 5*3*5) = 22n (720) = N (2 ^ 4*3 ^ 2*5) = 28n (750) = N (2*3*5 ^ 3) = 14n (800) = N (2 ^ 5*5 ^ 2) = 16n (960) = N (2 ^ 6*3*5) = 26n (1000) = N (2 ^ 3*5 ^ 3) = 14n (1024) = N (2 ^ 10) = 9n (1440) = N (2 ^ 6*3 ^ 2*5) = 34n (1920) = N (2 ^ 7*3*5) = 30
 

From the above algorithms, we can draw the following conclusions:

To maximize N (width), the value of width has two series: Series :..., 320,720,144 0 ,... Series B :..., 480,960,192 0 ,... The larger the N value, the more width values can be combined.

At present, most displays support 1024x768 and above resolutions, while 960 is exactly the most flexible and suitable size for 1024x768 resolution, these conditions make 960 the most perfect size in the current design. (PS: This part is mostly taken from: 960 Grid System Study)

II. Introduction to 960 Grid System

Nature:

960 grid system is a set of CSS frameworks with a width of 960px. It provides general dimension settings for webpage layout and provides two different dimensional la S: 12 columns and 16 columns, they can be used independently or together.

Size:

The layout of the 12 columns divides the total width into 12 parts. The width of each column is 60px, and the layout of the 16 columns is divided into 16 parts. The width of each column is 40px, and the left and right margins of each part are 10px, each column generates a gap of 20 PX.

Purpose:

The system starts with rapid prototype development, but can also be well integrated into the production environment. It also provides print layout, design layout, and a CSS file with the same size.

960 grid system is a very good layout-assisted design system. It uses 960px as the reference width and provides two layout modes: 12 columns and 16 columns (PS: currently, the 24-Column Layout mode is officially provided. I believe the author will provide more layout modes in the future ).

1: Alpha and Omega

The layout width of 960 grid system is 960px, but the left and right sides of each column are from the 10px margin (external patch), so the content width is actually 940px.

 
/* ALPHA: used to clear the marginomega of 10px on the left: used to clear the margin of 10px on the right */
 

PS: Get the alpha and omega names from the author. You can imagine that the author may love Greek culture. Alpha (α) inGreek lettersIn the table, it is the first letter, read as "Alpha" (Alafa), representing the beginning; omega (gamma) inGreek lettersIn the table, it is the last letter and is read as "Europe and America" (Russia), representing the end.

2: prefix_xx and suffix_xx

 
/* Add blank columns (columns) before or after each cell grid )*//* Usage: <Div class = "prefix_15 grid_1"> it CUPE </div> */
 

3: clear and HR

 
/* Used to clear the floating layer *//* Usage: <Div class = "clear"> </div> *//* If you have viewedSource codeYou will find that the author uses <HR/> *//* Usage: refer to the source on the home page of the official website.Code<HR/> */
 

4: push_xx and pull_xx

 /* This is the new class updated in, used to re-customize the layout Order */  /* Usage: reference the source code of the home page on the official website */ <H1Class =" Grid_4 push_4 "> 960 Grid System  Class =" Grid_4 pull_4 "> <A href =" Files/960_download.zip "> Download </a> & Larr; templates For <A href =" Http://www.adobe.com/products/fireworks/ "> Fireworks </a>, <a href =" Http://www.adobe.com/products/indesign/ "> Indesign </a>, <a href =" Http://www.inkscape.org/ "> Inkscape </a>, <a href =" Http://www.adobe.com/products/illustrator/ "> Illustrator </a>, <a href ="Http://www.omnigroup.com/applications/omnigraffle/ "> Omnigraffle </a>, <a href =" Http://www.adobe.com/products/photoshop/ "> Photoshop </a>, <a href =" Http://office.microsoft.com/en-us/visio/default.aspx "> Visio </a>, <a href =" Http://www.microsoft.com/expression/products/Design_Overview.aspx "> Expression design </a>. Sketch pdf. CSS code. The 960.css file is 5.4 kb. View <a href =" Http://bitbucket.org/nathansmith/960-grid-system/ "> Repository </a>. </P> <! -- End # description. grid_4.pull_4 --> <HR/> <Div Class =" Grid_6 "> <P> <a href =" Http://www.spry-soft.com/grids/ "> IMG/tool_css.gif "Alt =" Custom CSS Generator "Width =" 460 "Height =" 60 "/> </A> </P> </div> <! -- End. grid_6 --> <Div Class =" Grid_6 "> <P> <a href =" Http://gridder.andreehansson.se/ ">  IMG/tool_bookmark.gif "Alt =" Grid overlay bookmark "Width =" 460 "Height =" 60 "/> </A> </P> </div> <! -- End. grid_6 -->

5: container_xx and grid_xx

/* This is the most basic and important usage of the system. XX indicates the number of columns *//* Usage :*/<DivClass="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 ="Photos"Class="Grid_2"> Photo's </div> <Div id ="Advertisements"Class="Grid_2 Omega"> Advertisement </div> <DivClass="Clear"> </Div> <DivClass="Clear"> </Div>
 

The above is reproduced from it beigua

Link address:Http://imleeo.com/special-series/960-grid-system-introduction.html

First, you need to learn about "How to make the framework work ". You can learn through your own attempts, but I will continue to explain it here, so let's get started.

Do not edit 960.css

Note: Do not edit the 960.css file. If you modify it, you will not be able to update the Framework in the future.

Read Grid

Before using CSS code in an external file, you must call them in our HTML file. Call as follows:

<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 we call them, we need to call our own CSS files. For example, you may also name your CSS file style.cssor site.css or something else. Call it like this:

<LINK rel = "stylesheet" type = "text/CSS" Media = "all" href = "path/to/style.css"/>

Containers (container)

In the 960 framework, you can select two types of containers named. container_12 and. container_16. Both containers are 960px in width (that is why 960 grid is called), but the difference is that they contain different numbers of columns. As the name suggests, the. container_12 container is divided into 12 columns, and. container_16 is divided into 16 columns. The containers with 960px width are horizontally centered.

Grids (GRID)/columns (column)

You can choose many different combinations of column widths, but they are different in the two containers. You can open 960.css to understand these widths, but this is not necessary for designing a website. Here, storm Binbin provides a useful technique to make it easier for you to use the framework.

For example, if you want to use only two columns (primary content area/sidebar) 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>

You may have understood the above code, but I still want to talk about it. That is to say, in container _12This container uses grid _4And grid _8Two columns, 4 + 8 equals 12! Do you understand? One of the advantages of using a grid system is that you do not need to calculate the width of a column, saving a lot of computing.

Let's take a look at how to write a four-column layout:

<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, this system works well. If you try to read from your browser, you will find something wrong. But it doesn't matter. That's what we will discuss next.

Margins

By default, there will be some margin between each column. Each grid _ (insert value here) class has a left margin and right margin of 10px. That is to say, the margin value between the two columns is 20px.

The 20px margin can keep the layout white and look smoother, which is one of the reasons I like 960 grid system.

In the above example, we encountered some problems when reading it using a browser. Now let's fix it.

The problem is that each column contains the left and right margin, but the leftmost column should not have the left margin, and the rightmost column should not have the right margin. (Loose !) The solution is as follows:

<Div class = "container_12">
<Div class = "grid_2 Alpha"> sidebar </div>
<Div class = "grid_6"> main content </div>
<Div class = "grid_2"> photo's </div>
<Div class = "grid_2 Omega"> advertisement </div>
</Div>

You only need to addAlphaClass to remove the left margin, addOmegaClass to remove the right margin. Now our layout can be perfectly aligned in the browser. (Yes, including IE6)

Styling (add style)

In fact, you have mastered how to create a basic grid layout using the 960 framework. However, you may want to add some styles for your layout.

<Div class = "container_12">
<Div id = "sidebar" class = "grid_2 Alpha"> sidebar </div>
<Div id = "content" class = "grid_6"> main content </div>
<Div id = "Photos" class = "grid_2"> photo's </div>
<Div id = "advertisements" class = "grid_2 Omega"> advertisement </div>
</Div>

Because CSS uses the priority form to think about how to interpret the style, the ID is higher than the class priority. In this way, we can create a personalized style with the ID selector in our independent CSS file. If some style attributes are the same as those of 960 but their values are different, the browser will give priority to the style in your CSS file. Of course, if you are interested, you can also see the actual effect of adding a style to the instance above.

960 css framework-learn the basics

This Framework Code applies to all browsers rated as A-grade by Yahoo, as shown in Yahoo's evaluation of the browser.