Website Design with 960 Grid System

Website Design with 960 Grid System

Website Design with 960 Grid System

Hello friends! Today I am gonna discuss with you about the website design with 960 Grid System; 960GS. This is also a Grid Framework to simplify the web design with the help of grids.

Introduction

This grid system works with 960px with by default. Why? So according to them (no doubt I also agree):

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 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 and 480. This makes it a highly flexible base number to work with.

So to start with this let me have a brief intro to the class semantics of 960 Grid System. Then we will see the site design with 960GS.

By default the 960GS comes with 12 columns and 16 columns. Here divs are used with appropriate classes. So to decide how many columns config will you work with and move ahead with that. Suppose we are choosing 12 columns; so will have a container div with class container_12 and if it is 24 columns then the class will be container_24.

Now if you want to have a grid that covers 3 columns then the div’s class will be grid_3. So in general suppose you want to cover ## columns; the class will be grid_##

Now you wanna create a grid which is with margin of some columns on left; suppose 3 columns; the it will also have a class of prefix_3. So in general suppose you want the div to have ## columns’ width margin on left; the div will also have the prefix_## class.

Similarly if the right margin of 3 columns has to be added then the class will be suffix_3; and the generally it will be suffix_##.

For prefix and suffix ## will range from 1 to (columns-1). For grids; the ## will be from 1 to (columns).

Some of the helpers are:

  • To remove left margin use alpha
  • To remove right margin use omega
  • To pull a grid # columns on left side; use the class pull_#; # being the no. of columns till you wanna pull the grid; ranging from 1 to (columns – 1)
  • To pull a grid # columns on right side; use the class push_#; # being the no. of columns till you wanna pull the grid; ranging from 1 to (columns – 1)
  • To clear the floats use clear class

Site Design

Now we will start with the site design. For the site design we will use the same wire-frame that we have used for the site design with Bootstrap.

Site Layout

So with this layout; for top bar we will create a full width div with a container div of width 960px. And inside that we will put our social icons. For social icons; here also; we will use the Font-awesome. Following will be the HTML for that:

Now the site header. That’s also clear straight forward; we will create a header element. Under that we will create a child container div with class container_12 and then style it according to our needs to properly demonstrate the site header. Following is the HTML for the site title:

And the menu bar; for that we will create a nav element which will have the following HTML:

Now the jumbotron unit; alike Bootstrap; we will have to design the jumbotron by ourself. Any slider/carousal can also be added over here. Before that; now our whole page will go in 960px; so will create a div.conatiner_12 and all the rest of the page will nested under this. I am nesting the jumbotron in the following way:

Now the three column container. AS we have chosen the 12 column layout; our there columns can be created by four columns of the 960GS. So each of our div will have class grid_4. But to make it look better we will remove the left margin of first column by alpha and right margin of last column by omega. Here is the HTML for that:

And yes; the footer:

Last but not the least; the style used for above elements:

Extras

The 960GS also comes with the 24 columns config in which the each column has margin of 5px.

The 960GS is not just limited to 960px. You can also get the larger width Grid System and the 12/16 columns accordingly. And with adapt.js you can configure which css has to be loaded. More info and example on http://adapt.960.gs/.

File NameScreen Width
mobile.cssbelow 760px
720.css760px to 980px
960.css980px to 1280px
1200.css1280px to 1600px
1560.css1600 to 1940px
1920.css1940px to 2540px
2520.cssabove 2540px

Moreover the 960GS also provides a handy reset.css file. Include it you dont wanna code your own reset.

Summary

Finally this single page is ready. But as a defect this design is not responsive and If you don’t need the responsiveness for the site; go for it.

Demo  Download



2 thoughts on “Website Design with 960 Grid System

    Ernest says:

    I am гeally enjoying the theme/design of your blog. Do you ever ruun into any internet
    briwser compatibility issues? A handful of my blog audience havе complaiոеɗ about my site nnot operatiոg correctlу in Exρlorer but loօks great in Ѕafari.
    Do you have any ѕolutions tօ help fix this problem?

    Thanks! Yes we also face compatibility issues! And the solution differs from problem to problem.

Add Comment Register



Got Something To Say:

Your email address will not be published. Required fields are marked *


*