good tutorials for the 960 grid layout? [closed]
Asked Answered
H

5

15

I want to use the 960 grid system to generate the layout for my website. I downloaded a 24 columns fluid version from the custom generator from their site.

Now I want to know every little thing I can do with it. I looked at the css file and found some class names like .suffix_x .prefix_x .push_x .pull_x .clear .clear_fix etc

Where can I find a tutorial explaining all these? How to make leftbar, main div and so on.

Weird that it doesn't teach you how to actually use the grid system on their webpage. And I couldn't find a GOOD tutorial explaining everything on google.

It would be great if someone could recommend such tutorials.

If some of you have used 960 fluid grid system it would be great with links to good tutorials too.

Hierolatry answered 19/1, 2010 at 6:0 Comment(0)
A
9

At the very bottom of their site they have a few links to tutorials.

I think you will find this Nettuts+ one of value in playing with 960.

Ashley answered 19/1, 2010 at 6:3 Comment(0)
E
2

Take a look at:

http://www.myinkblog.com/2009/02/24/design-a-fresh-blog-theme-on-the-960-grid/

That gives a good overview of using the 960 grid system and applying it step by step.

Erdman answered 19/1, 2010 at 6:3 Comment(1)
but where do they explain all the selectors you can use: .suffix_x .prefix_x .push_x .pull_x .clear .clear_fixHierolatry
H
2

I just watched this one today and it was super helpful. It's in video form:

http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/

He even teaches contingencies in the event you'd like to add padding.

Hightower answered 27/7, 2010 at 21:40 Comment(0)
M
0

I think the best one I found was this:
http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid-system/

It shows you every one of the features of 960 in detail.

Measured answered 24/5, 2012 at 17:23 Comment(0)
S
0

The net tut article is very good, but I have some more to share. Learning Grid960 was very painful for me. Most of this is reiterating the net tuts article. This gives intuition for newbies, since it was such a headache:

Synopsis

Newspapers and magazines use grid systems with gutters in between, and it makes the page look much more pleasing to the eye when you use the design techniques. The grid will guide you perfectly. Before we begin you must understand CSS/HTML nesting.

<div class="a">
I include all the items A.
<div class="b">
    I include all the items of B with all of A.
</div>
<div class="c">
    I include all the items of C with all of A. B is not here, but it is on the same level.
    <div class="d">
        I include all the items of A with C and D
    </div>
</div>

Look at the example file to see how you can break your design into a grid.

Use the inspector by pressing F12 in Chrome + IE + Firefox(Thanks Larry!). Highlight the boxes to see how the css is edited. I find it very difficult to dive straight into Grid960's css files. You'll see how each grid is created

Declare a 12 size grid as a parent div. The children divs must add up to 12 and you can break up the page any way you want it. Example: 3 grid + 3 grid + 6 grid = 12 grid. 3 grid + 4 grid + 4 grid + 1 grid = 12 grid. You can see this if you use F12 in Chrome. Highlight the grid in the example file. Don't forget to add the div clear when you are done with a row and want to begin a new one.

<div class="container_12">
<div class="grid_12"><a href="images/header.png" alt=""></a></div>
<div class="clear"></div>


<div class="grid_12" id="navbar">A</div>
<div class="clear"> </div>

<div class="grid_7">B</div>

<div class="grid_5">C</div>
<div class="clear"></div>

<div class="grid_12 spacer">D</div>
<div class="clear"></div>


<div class="grid_3">E</div>
<div class="grid_3">F</div>
<div class="grid_3">G</div>
<div class="grid_3">H</div>

<div class="clear"></div>

<div class="grid_12 spacer">I</div>
<div class="clear"></div>

<div class="grid_4">J</div>

<div class="grid_4">K</div>
<div class="grid_4">L</div>

</div>

Suffix and Prefix:

Say you want your grid to start in the middle. It does not suffice to declare a grid 3 by itself. You need to give it an extra piece of info stating that I want it to "float." This is where suffix and prefix come in. Prefix means to skip x amount of divs and suffix means to skip x amount of divs after it.

From net tuts

Alpha and Omega:

If I want to apply a style and have it reach over several grids including the gutter space. Alpha is the first and omega is the last div it is applied to.

From the net tuts

Push and Pull

This is for Larry! Push and pull is for developers wanting to rearrange there pages for SEO.

http://www.clubosc.com/960-grid-tutorial-understanding-push-and-pull-classes.html

Notice how the pink and yellow classes are reversed, however the divs are arranged in the opposite fashion?

Sillabub answered 20/5, 2015 at 17:41 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.