asked on

960 grid started

Hi,

I am getting started on learning 960 grid and I need some tutorials on this like 'what do you do in html/css with include files etc.

I can use html/css and media queries already.

I am realy struggling to find basic examples and I have found a tutorial which jumps over to photoshop for design of 960 and seems to stay in photoshop.
The help slides are just that 'help slides', where is the code or complete example?

http://960.gs/
https://speakerdeck.com/nathansmith/960-grid-system
http://www.youtube.com/watch?v=1Ydcfx75mxo

ASKER CERTIFIED SOLUTION

tailoreddigital

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jagguy

ASKER

ok thanks, I couldnt find tutorials without video.

Scott Fell

They point to this one http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/

All grids work the same. Notice the container is a 12. To make one column, you will have a div class="grid_12". To make 2 equal columns, <div class="grid_6>left</div><div class="grid_6">right</div>. Just make the divs equal 12. It is that easy.

<div class="container_12">  
    <div class="grid_12"></div>  
    <div class="clear"></div>  
  
      
    <div class="grid_12"></div>  
    <div class="clear"> </div>  
      
    <div class="grid_7"></div>  
    <div class="grid_5"></div>  
  
    <div class="clear"></div>  
      
    <div class="grid_12"></div>  
    <div class="clear"></div>  
      
    <div class="grid_3"></div>  
  
    <div class="grid_3"></div>  
    <div class="grid_3"></div>  
    <div class="grid_3"></div>  
    <div class="clear"></div>  
  
      
    <div class="grid_12"></div>  
    <div class="clear"></div>  
      
    <div class="grid_4"></div>  
    <div class="grid_4"></div>  
  
    <div class="grid_4"></div>  
</div>

Open in new window