ISIMSStudentManual PDF

 Code 
Categories Learning Guides
H TML & C S S
Mastering the 960 Grid System
by Roydee 18 Aug 2010  111 Comments
 11  1  1 
We're already familiar with the 12 and 16column variants of 960.gs, but did you
know that a 24column alternative exists too? In this article, you'll master the 960
grid system by dissecting the 24column version demo. If you've only used 960gs
before for Photoshop mockups, consider this your lucky day. By the end of this
article, you'll be able to convert your designs to HTML and CSS in no time at all.
Introduction
A 960 Grid System Master—that's what you'll be after you've gone through this
article. And, although we're going to use the 24column variant of 960gs, you'll
completely understand how the two older types (i.e., 12 and 16columns) work too,
by applying the same principles you'll learn here. But first, take a good look at the
24column demo in the 960gs site, as it's all we'll need in our leap towards mastery
of this popular CSS framework.
A Look at the 24Column Demo
We first need to check the HTML code of the demo, so view its source—if you're
using Chrome, Firefox, or Opera, just press ctrl+U; if you're using Internet Explorer,
change your browser! :) (on the Mac, use cmd+U for Firefox and opt+cmd+U for
Safari and Opera; Chrome only does the rightclick option). Keep the HTML source
code window on your desktop, as we're going to refer to it from time to time.
Next, you'll need to download the 960.gs files (if you haven't done so yet), and open
the uncompressed CSS file 960_24_col.css. We must do this because the demo's
CSS is compressed, and will be difficult to inspect. (If you're the masochistic type,
feel free to use the demo's CSS instead.
That's pretty much all we need to prepare, aside from a semifunctioning brain. Now
you'll find that the demo page holds the key to completely understanding the grid
system, and we'll start by examining its three sections.
Inspecting the Framework: The Demo's Three
Sections
The three sections consist of the following:
1: Top Section
First, we have a top area that shows two columns for each row, where the left
column grows wider as the right column gets narrower, until they are equal in size.
2: Middle Section
Next, we have a middle section that shows a 30px square progressively moving from
left to right, while whitespace before and after it extends the row to take up the whole
960px width.
3: Bottom Section
Finally, there's a bottom section that shows two rows of rectangles with different
sizes, which split the 960px width in two halves.
Believe it or not, understanding completely what the assigned classes behind these
columns do is all you'll ever need to get a firm grasp of 960 grid system. Isn't that
great? Let's examine each section further.
Top section: grid_1 to grid_24 classes
Peeking at the source code of this section shows us that, first, before any of the
grid_xx classes were assigned, the class container_24 was given to the overall
wrapping div:
1 <div class="container_24">
2 <h2>
3 24 Column Grid
4 </h2>
5 ...
6 </div>
7 <!‐‐ end .container_24 ‐‐>
The importance of this class cannot be overemphasized—it partly dictates the width
of the columns where a grid_xx class is assigned. And as you might have guessed, it
also “divides” the 960px width into 24 columns.
(Similarly, putting container_12 or container_16 at the top will “divide” the width into
12 and 16 columns, respectively. The word divide is in quotes because it doesn't
actually do that; you'll see later how this process is achieved.)
Moving on, you'll notice that the topmost row has a single div with a class of
grid_24. The remaining rows in the top section have two divs each: the left divs
range from class grid_1 up to grid_12, and the right divs range from grid_23 down to
grid_12; the sum of the two classes in each row is 24.
01 <div class="grid_24">
02 <p>
03 950
04 </p>
05 </div>
06 <!‐‐ end .grid_24 ‐‐>
07
08 <div class="clear"></div>
09
11 <p>
12 30
13 </p>
14 </div>
15 <!‐‐ end .grid_1 ‐‐>
16
18 <p>
19 910
20 </p>
21 </div>
22 <!‐‐ end .grid_23 ‐‐>
23
25
27 <p>
28 70
29 </p>
30 </div>
31 <!‐‐ end .grid_2 ‐‐>
32
33 <!‐‐ ... ‐‐>
34
36 <p>
37 430
38 </p>
39 </div>
40 <!‐‐ end .grid_11 ‐‐>
41
43 <p>
44 510
45 </p>
46 </div>
47 <!‐‐ end .grid_13 ‐‐>
48
50
52 <p>
53 470
54 </p>
55 </div>
56 <!‐‐ end .grid_12 ‐‐>
57
59 <p>
60 470
61 </p>
62 </div>
63 <!‐‐ end .grid_12 ‐‐>
64
This is how the assigned grid_xx classes would look like if we tried to visualize each
div's class name:
You might have noticed in the code that after the last div in a row, we have an empty
div with a class of clear. Ignore it for now, we'll deal with it later.
Next, let's take a look at what happens behind the scenes, i.e., in the CSS, when we
assign the container_24 class:
1 .container_24 {
2 margin‐left: auto;
3 margin‐right: auto;
4 width: 960px;
5 }
As you can see, this class, which was assigned to the overall wrapping div of the
document, centers our work area and gives it a 960px width. Easy enough.
Next, here are the grid_xx classes, which were placed on the main divs of the top
section:
01 .grid_1,
02 .grid_2,
03 .grid_3,
04 ...
05 .grid_23,
06 .grid_24 {
07 display: inline;
08 float: left;
09 margin‐left: 5px;
10 margin‐right: 5px;
11 }
We see that the grid_xx classes give the columns left and right margins of 5px each,
which forms a 10px gutter when you place the columns sidebyside. This in turn is
achieved by floating them all to the left.
Also, they are given a display of inline, to prevent the Double Margin Float Bug from
being triggered in our dearlybeloved browser. (Apparently, it is triggered when you
float an element that has margins assigned to it.)
Lastly, we have the descendant selectors formed by a combination of container_24
and grid_xx classes:
01 .container_24 .grid_1 {
02 width: 30px;
03 }
05 width: 70px;
06 }
07 ...
08 ...
10 width: 910px;
11 }
13 width: 950px;
14 }
As you can see, these CSS declarations are the ones that actually determine the
width of the columns where a grid_xx class is assigned. This is how assigning
container_24 at the top “divides” the width into 24 columns— the preset width sizes
are assigned according to which container_xx class a grid_xx class is combined
with.
For comparison purposes, here is how its counterpart CSS declarations in the 16
column variant looks like:
02 width: 40px;
03
04 }
05
07 width: 100px;
08 }
09
11 width: 160px;
}
If you compare the HTML source code of the demo for the 12 and 16columns with
the 24column demo, you'll notice that there is no difference in how the grid_xx
classes were assigned. And now you know why this is so—it's not the grid_xx class
that determines the width of the columns, but its combination with a container_xx
class, as shown in the CSS above.
Another thing worth noting here is the actual size of each container when you assign
a grid_xx class. Although it's labeled 30, 70, 110, and so on in the demo, it's actually
10px more because of the left and right margins on either side of the container.
As you can see,
grid_1 has a width of 30px + 10px horizontal margins (total width: 40px)
grid_2 has a width of grid_1 (40px) + 30px width + 10px margins (total width:
80px)
grid_24 has a width of grid_23 (920px) + 30px width + 10px margins (total
width: 960px)
Seeing it this way satisfies the math we have for the width: that 24 40pxwide
columns is equal to 960px (i.e., 40px * 24 = 960px).
This view more accurately shows what the CSS actually does to the markup.
Although the container's size is really just 30px, 70px, 110px, and so on (as it is
labeled in the demo), it helps to know that the horizontal margins are the reason why
the sum of the widths for each row do not equal to 960px. (It only amounts to 940px,
except for the first row, assigned a grid_24, which spans 950px. The "lost" 20px for
all the other divs is accounted for by the leftmost and rightmost 5px margins, and the
10px gutter between the 2 columns for each row.)
But here's the more practical thing to remember: As long as you use the 24
column psd template when you create your designs (or the 12 or 16column psd
templates, for that matter), you can just count the number of columns you want for a
particular design element, use that number for your grid_xx class, and the column is
set. For example, if your logo takes up four columns, then give its containing div a
grid_4 class.
Here's an example of how to use it:
Although the 960.gs site (shown above) actually uses the 12column variant, we
could just as well overlay the 24column pattern on it and it will still fit the layout
perfectly (because the 24column version is, of course, just the 12column version
with columns divided by two).
As you can see, knowing that we have a 960px width divided into 24 columns makes
life easier, as we only need to line up our design elements along the edges of the
columns, count the number of columns they occupy, set that as our grid_xx class's
number, and we're done.
But what if you want a lot of empty spaces in your design? Or what if you want to
center a small design element, and just have white spaces around it?
Enter the prefix_xx and suffix_xx classes.
Middle Section: prefix_xx and suffix_xx classes
If you check the markup for the middle section, what you'll see are variations of this
code:
1 <div class="grid_1 prefix_xx suffix_xx">
2 <p>
3 30
4 </p>
5 </div>
...where prefix_xx + suffix_xx = 23. (That is, 0 + 23, 1 + 22, 2 + 21, 3 + 20, and so
on..)
What's happening here?
First, you'll notice that each row class assignments amount to 24 columns (grid_1 +
combined values of prefix_xx and suffix_xx classes, which is 23).
Next, you'll see that the prefix_xx classes are in ascending order (from 1 to 23) while
the suffix_xx classes are descending (from 23 to 1). Also, when prefix_xx or
suffix_xx has a value of 23, it doesn't have a counterpart suffix_xx or prefix_xx class,
because it no longer needs it (value is already 23).
Lastly, each of these units is 30pxwide, and as we've seen in the grid_xx classes
above, they also have 10px horizontal margins.
We already know that assigning an element a grid_1 class gives it a 30px width and
5px paddings on either side. But what does the prefix_xx and suffix_xx classes do?
As you may have already guessed, they give additional left (prefix_xx) and right
(suffix_xx) padding, increasing the size of a grid_xx class unit. Thus, prefix_1,
prefix_2, and prefix_3 will give your element left paddings of 40px, 80px, and 120px,
respectively; while the same amount of paddings are given to its suffix_xx
counterparts, but in the opposite side.
01 .container_24 .prefix_1 {
02 padding‐left: 40px;
03 }
04 .container_24 .prefix_2 {
05 padding‐left: 80px;
06 }
07
08 ...
09
10 .container_24 .suffix_1 {
11 padding‐right: 40px;
12 }
13
14 .container_24 .suffix_2 {
15 padding‐right: 80px;
16 }
For whitespace in your designs, just add the prefix_xx and suffix_xx classes. They
lock up your content to a certain width (determined by the grid_xx class you assign),
while the space on either side in filled up with padding.
For a simple example, let's pretend again that the 960.gs homepage is using the 24
column variant, and that the twitterbird graphic is the logo of the site.
We can see that it occupies three columns, so we give it a grid_3 class. Let's also
assume that there are no other elements along its row. We would therefore also give
it a suffix_21 class (3 + 21 = 24), since the additional padding needs to span the
whole width.
Obviously, if there are other elements on that row, we need to adjust the suffix_xx
class to create some space for another element that spans a few grid_xx classes
(e.g. a search form). Also, depending on where your design elements are located
relative to the left edge of the row, you might also need to add a prefix_xx class.
Always remember: the numbers used in the classes for each row (whether grid,
prefix, or suffix) should be equal to 24.
Next, we'll perform a bit of ‘magic,’ as the next set of classes allow your content to
appear differently than what the markup predicts it would.
Bottom Section: pull_xx and push_xx Classes
For this section, if you're not using Firefox at the moment, I'd like to ask you to
switch to it temporarily, as you'll understand the next concepts better with Chris
Pederick's Web Developer Toolbar (WDT) extension for Firefox. (If you haven't
installed it yet, now's the time to download and install it. I understand there's already
a Google Chrome version of the WDT, but in my opinion, it's nowhere near its Firefox
counterpart.)
Once you're running Firefox with the WDT already installed, go back to the 24
column demo page, and scroll down to the very bottom. You'll see the two groups of
boxes I showed you a while ago—differentsized, yet fitting together to form this last
section of the demo.
Now check out the HTML code for this section:
01 <div class="grid_12 push_12">
02 <div class="grid_6 alpha">
03 <p>
04 230
05 </p>
06 </div>
07 <!‐‐ end .grid_6 .alpha ‐‐>
08
09 <div class="grid_6 omega">
10 <p>
11 230
12 </p>
13 </div>
14 <!‐‐ end .grid_6 .omega ‐‐>
15
17
19 <p>
20 30
21 </p>
22 </div>
24
26 <p>
27 430
28 </p>
29 </div>
30 <!‐‐ end .grid_11 .omega ‐‐>
31
33
34 </div>
35 <!‐‐ end .grid_12 .push_12 ‐‐>
36
37 <div class="grid_12 pull_12">
39 <p>
40 30
41 </p>
42 </div>
44
46 <p>
47 430
48 </p>
49 </div>
50 <!‐‐ end .grid_11 .omega ‐‐>
51
53
55 <p>
56 230
57 </p>
58 </div>
60
62 <p>
63 230
64 </p>
65 </div>
66 <!‐‐ end .grid_6 .omega ‐‐>
67
69
70 </div>
71 <!‐‐ end .grid_12 .pull_12 ‐‐>
72
Compare it again to what you see on the demo page.
What's happening here? Shouldn't the first group of boxes (23023030430) be
shown before the last group (30430230230), as in the markup?
Well, that's the power of the push_xx and pull_xx classes. But before we go into
them, go to the WDT, click the Information button, and choose Display Div Order,
just to make sure that you're correctly seeing how the CSS affects the markup.
Here's a screenshot of what you should see:
I needed to show this to demonstrate that the two groups are divided into left and
right sides, and not top and bottom. That perception error is easy to make (as I did)
because: (1) we're used to seeing div groups that stretch the whole 960px width; and
(2) the two groups have similarsized boxes that are easy to confuse with each
other.
(Nathan Smith, the 960gs creator, could have probably used boxes with different
sizes—e.g. 70390190270 and 23023030430—to achieve the same effect and
would have avoided the potential confusion, but he didn't....)
But now that you've seen how the first group (as it appears in the markup) was
“pushed” and how the second group was “pulled” by these classes, check out the
CSS to see how they're doing it:
01 .push_1, .pull_1,
02 .push_2, .pull_2,
03 ...
04 .push_22, .pull_22,
05 .push_23, .pull_23 {
06 position: relative;
07 }
08
09 ...
10
11 .container_24 .push_1 {
12 left: 40px;
13 }
14
15
17 left: 80px;
18 }
19
20 ...
21
23 left: 880px;
24 }
25
27 left: 920px;
28 }
29
30 ...
31
32 .container_24 .pull_1 {
33 left: ‐40px;
34 }
35
37 left: ‐80px;
38 }
39
40 ...
41
43 left: ‐880px;
44 }
45
47 left: ‐920px;
}
First, giving these two classes to HTML elements positions those elements relatively,
so that we could move the divs to the left, right, top, or bottom relative to where it
would normally occur in the document. (More on CSS positioning here.)
Next, in combination with the container_24 class, the pull_xx classes give the div a
negative left padding, which makes it possible to “pull” the div's content to the left.
On the other hand, the push_xx classes, as expected, does the opposite and gives
the div a (positive) left padding to “push” its content to the right (by giving way to the
left padding).
“But why the hassle?” you might ask. “Why not just put them in the correct order in
the markup in the first place, so you won't have to use these unnecessary classes?”
Good questions. The answer lies in the pursuit of having semantic and accessible
markup—our designs should not force the markup to a structure that doesn't make
sense or isn't up to standards when the stylings are turned off. And CSS has been
proven to handle such situations elegantly—it lets us achieve the look of our designs
regardless of how the markup was written (well, largely).
In the 960gs site, Nathan Smith shows the header as a good example of how he
used these classes:
On the surface, we might think the markup will show the Twitter logo first, then the
Download link, and finally the 960 logo. But that wouldn't be semantic—the title of
the site (i.e. 960 logo) should come in first. And as you probably know, this
arrangement also has SEO benefits. So, the markup for the header actually goes
something like:
01 <body>
02 <div class="container_12">
03 <h1 class="grid_4 push_4">
04 960 Grid System
05 </h1>
06 <!‐‐ end .grid_4.push_4 ‐‐>
07 <p id="description" class="grid_4 pull_4">
08 <a href="#">Download</a> ‐ Templates: Acorn Fireworks, Flash, ...
09 </p>
10 <!‐‐ end #description.grid_4.pull_4 ‐‐>
As you can see, the logo does come in first, and after it, the download link. (The
markup for the Twitter logo is found after the footer, was given an id of twitter, and is
absolutelypositioned. It wasn't given a 960.gs class, so we won't concern ourselves
with it.)
You also saw in the markup (as predicted) that the logo was pushed and the
download link section pulled. To visualize it more clearly:
And that's how you use the push or pull classes—know that they either give your
divs a negative or positive left padding, then “pull” or “push” your content according
to the number of columns you need your content to be pulled or pushed.
There's one last set of classes that are integral to 960.gs—and they let you create
complex layouts. A column that spans several rows, for example. Let's tackle them
next.
alpha and omega Classes
If you've read tutorials or articles on 960.gs before, you probably already know by
now that the alpha and omega classes cancel the horizontal paddings set by grid_xx
classes. And most likely you also know that their primary use lies when you have
grid_xx classes inside nested divs.
For the benefit of those who don't know yet, let's go to our CSS and see what these
classes do to the elements they are assigned to:
1 .alpha {
2 margin‐left: 0;
3 }
4
5 .omega {
6 margin‐right: 0;
7 }
Pretty straightforward—they simply zero out the left (alpha) and right (omega)
margins. And as we've seen a while ago, when we assign an element a grid_xx
class, we automatically give it horizontal margins of 5px on both sides. With nested
divs, we don't want to double these margins, so we give an alpha or an omega class,
or both, accordingly.
A nested div that's touching the left edge of its parent div would be given the alpha
class. Similarly, the omega class is assigned to the nested div that's placed on the
parent div's right edge. But what if we have a nested div that touches both edges of
its parent div? That's right, we assign both classes to it.
Let's move on to an example so that you can see how it's done.
Though not shown in the 960.gs demo, here's an instance of how a complex layout
is achieved with the aid of the alpha and omega classes (and nested divs with
grid_xx classes):
Here we have columns that span several rows on both sides, with rows and boxes in
the middle. You can also visualize it as a typical 3column layout; but for our
example, we're just using 15 columns. Of course, you can easily expand it to 24
columns.
The key to creating layouts like these in 960.gs is to:
1. Remember that 960.gs makes the layout possible by floating divs to the left.
2. Create your nested divs from those initial floated divs—. This means you'll
have floated divs within floated divs.
Here's one way of approaching our layout: group them into three columns first, and
assign them the appropriate grid_xx classes:
Next, assign the additional grid_xx classes for the nested divs (note that we don't
have any nested div for the right column):
Since we have at least two levels of grid_xx classes inside nested divs, we also
need to add the alpha and omega classes appropriately:
The nested divs inside the left column touches both edges of its parent div, so we
need to add both alpha and omega. The same holds true for the divs with grid_8
classes in the middle section. But each grid_4 div on top only has to have alpha or
omega, since it only touches either the left or the right edge of its parent div.
As you may have concluded from this simple example, you can nest divs with
grid_xx classes as deep as you want (if your design demands it), as long you
correctly mark them up, and give them the right 960.gs classes, so that they are
floated correctly and any excess margins are canceled.
And speaking of floats, the last group of 960.gs classes, though not unique to
960.gs, make it all possible—they clear the floats that are automatically created
when you assign a grid_xx class.
Advertisement
Leveling the Field: The clear Classes
Earlier, we noticed this in the markup—every div that was given a grid_xx class, that
was also the last div for its row, was followed by an empty div with a class of clear.
02 <p>
03 190
04 </p>
05 </div>
06 <!‐‐ end .grid_5 ‐‐>
07
09 <p>
10 750
11 </p>
12 </div>
13 <!‐‐ end .grid_19 ‐‐>
14
16
18 <p>
19 230
20 </p>
21 </div>
22 <!‐‐ end .grid_6 ‐‐>
23
25 <p>
26 710
27 </p>
28 </div>
29 <!‐‐ end .grid_18 ‐‐>
30
The nobrainer reason for this is that we need to clear floated divs, because once we
float them, they no longer take up space, causing the elements below it to be “pulled
up,” which ultimately leads to a broken layout.
As we've seen in the demo, a solution for this potential problem is to place an extra
nonsemantic div with a class of clear, which does the following:
1 .clear {
2 clear: both;
3 display: block;
4 overflow: hidden;
5 visibility: hidden;
6
7 width: 0;
8 height: 0;
}
The code above is basically Nathan Smith's own solution to the problem, as
discussed in his blog. A lot of web designers don't have any issues with it, except
probably for standardistas who might cringe at the thought of using extra non
semantic divs in the markup for a styling problem.
Thankfully, Nathan Smith also included the clearfix solution in the 960.gs CSS, first
discussed on PositionIsEverything.net. It does away with the extra div, as you can
place it alongside the grid_xx classes and achieve the same effect:
02 <p>
03 190
04 </p>
05 </div>
06 <!‐‐ end .grid_5 ‐‐>
07
08 <div class="grid_19 clearfix">
09 <p>
10 750
11 </p>
12 </div>
13 <!‐‐ end .grid_19 ‐‐>
14
16 <p>
17 230
18 </p>
19 </div>
20 <!‐‐ end .grid_6 ‐‐>
21
22 <div class="grid_18 clearfix">
23 <p>
24 710
25 </p>
26 </div>
27 <!‐‐ end .grid_18 ‐‐>
That's the same example markup above with the extra divs removed, and the
clearfix class added. It will do the same thing, so you can choose this method of
clearing if you find it to your liking. Here's the CSS for it:
01 .clearfix:after {
02 clear: both;
03 content: '';
04 display: block;
05 font‐size: 0;
06 line‐height: 0;
07 visibility: hidden;
08 width: 0;
09 height: 0;
10 }
11 /*
12 The following zoom:1 rule is specifically for IE6 + IE7.
13 Move to separate stylesheet if invalid CSS is a problem.
14 */
15
16
17 * html .clearfix,
18 *:first‐child+html .clearfix {
19 zoom: 1;
}
The code might be a bit different from what you're used to. This is because Nathan
Smith based it on a blog entry by Jeff Star, which supposedly updates the original
clearfix hack, to do away with code intended for a browser that's now extinct (i.e. IE
for macs), and tweaks it for newer ones (i.e. IE6 and IE7).
Conclusion
Using just the 24column demo of 960.gs (and in some instances, the 960.gs site
itself), I've shown you how each of its classes work and how you could use them in
converting your 960based designs into HTML and CSS.
Every section in the demo imparts lessons to be learned, and once you see what the
classes do to your markup by examining the CSS, the mystery of 960.gs vanishes,
and you gain a better understanding of what happens behind the scenes. You might
even find new ways of using the classes, since you now know what they do.
Applying your newfound knowledge becomes easy, because once you've set your
columns using 960.gs, you'll just have to assign id's to the divs (as the situation
warrants) as hooks to further adjust the divs' paddings or the sizes of its text inside.
Advertisement
Difficulty:
Beginner
Length:
Medium
Categories:
HTML & CSS Web Development CSS 960 Grid System
Translations Available:
Tuts+ tutorials are translated by our community members. If you'd like to translate this post into another language, let
us know!
About Roydee
"Hi! I'm Roydee, a selftaught web designer and developer. I love creating minimal, progressivelyenhanced
designs, with a focus on user interaction. Eventually I'll also be writing tutorials on my personal site, so
watch out for it. :)"
Advertisement
Suggested Tuts+ Course
Chrome Developer Tools $15
Related Tutorials
How to Make Responsive, Scrollable Panels with Flexbox
Web Design
Bootstrap 3 Succinctly: Migrating From Version 2 to Version 3
Web Design
How to Create a Slideshow Presentation From Markdown Notes
Computer Skills
Jobs
FrontEnd developer
at Dyad Communications in Philadelphia, PA, USA
Junior FrontEnd Engineer
at Animoto in New York, NY, USA
Envato Market Item
111 Comments Nettuts+  Login
Sort by Best Share ⤤ Favorite ★
Join the discussion…
HelgeKristoffer Wang • 3 years ago
I really like 960.gs, but I find myself actually hating the class names. I got a need to have
describing class names, so I found myself rewriting the 960.gs with my own classes that
(which I feel) has a much stronger logical sense.
I guess my point here is; 960.gs is a GREAT tool, but I believe the class names could've been
better as for beginners who might loose their confidence when they see all those "weird" class
names.
Just my two cents. :)
7 △ ▽ • Reply • Share ›
Dinesh • 2 years ago
Thanks man...very clear tutorial for beginners.:)
Omar • 2 years ago
There we go...
works great if you need a gallery :)
Raul • 3 years ago
great stuff ... tyvm
BrianW • 2 months ago
I must first apologise for not having time to read through each of the over 100 comments. This
is definitely a great system.
However, what occurs to me is that push and prefix are actually very similar in some ways.
Only that prefix hogs the space assigned to it and won't allow it to be used for anything else;
while with push the name actually invites another grid_xx to be pulled into the vacant space.
while with push the name actually invites another grid_xx to be pulled into the vacant space.
Hope this helps some of those who are battling with the nomeclature!
△ ▽ • Reply • Share ›
Jeejo Monsy • 2 months ago
Thank You!
Pedram • a year ago
Great Tutorial ! Thank you so Much From IRAN ! :)
unclejj • 2 years ago
would it be so bad, if you made a video explaining this ?
websmailme • 2 years ago
Hi,
How to make compatible with mobile..i am using 960 grid system..but the css is not applying
when i test with my mobile..please help..thanks
Mohamed Ashraf • 2 years ago
Thanks man that was amazing
Wilmar81 • 2 years ago
Nice tutorial. Was helpful to me ;)
Chamin Nalinda • 2 years ago
thanks a great deal :)
Mario rocchi • 2 years ago
THks!!
Jeremy • 3 years ago
Thanks guys from nettuts. It just discovered this site recently, and I'm already amazed by how
much I've learned in the last couple of weeks about how to use CSS properly! Better than most
tut's on the internet ;)
Sathesh • 3 years ago
Thanks for the great tut. I'm a master now... :)
mark • 3 years ago
Nice tutorial thanks for sharing this.
I implement this to my next web project thanks again...
yogs • 3 years ago
I've tried 960.gs, but the concept is clear now just push pull is bit difficult rest is good article.
thanks
Lerxstrulz • 3 years ago
Great framework and tut, but instead of a div dedicated to clearing floats, you can use this
code and just append the class name like:
BTW not my code, so no credit taken (attribution below)...
/* Force Element To SelfClear its Children (Updated Clearfix, Option 2): http://css
tricks.com/snippets... */
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:firstchild+html .clearfix { zoom: 1; } /* IE7 */
Lerxstrulz > Lerxstrulz • 3 years ago
Sorry, example did not come through on first post. Should have been:
<div class="grid_2 clearfix">
ogotai • 3 years ago
Absolutely love 960gs. One question though why does the validator spit out error? Looks like
it does not want to validate and therefore I'm not able to create strict code since my boss
doesn't allow me to overwrite 960's classes (which is obvious) so I can't fix the problem myself
using the default version :/
Sadi • 3 years ago
only "push pull" part is a bit tricky at the first place though a very simple concept along with
anything framework offers.. nice framework .. nice article.
João • 3 years ago
Thanks a lot for the tutorial, i thought i knew 960.gs but was completely wrong. Cheers!
andy • 3 years ago
how can I adjust a height?
hayatbiralem • 4 years ago
Thanks!! This is very usefull. :)
Ralph Verdult • 4 years ago
Hi,
I am relatively new to webdesign, and the 960gs has been a really nice way to start designing.
I have one little issue though, and haven't found an answer on any forum, so maybe you guys
I have one little issue though, and haven't found an answer on any forum, so maybe you guys
could help me:
When I have a div with a certain grid_x class, and I put some more content in it, whether it be a
header, paragraph, embeded object or whatever, the whole page moves a couple of pixels to
the left. When I remove the added content, it moves back to its original space again. Not just
the div moves, but the whole page. Anybody has this as well, or knows how to fix it?
Ralph
Elvin • 4 years ago
Hello
Thanks a lot for putting up such a detailed tutorial! It was worth the time going through it. I am
clear now on what ALL the 960grid classes mean !!!
Elvin Xhimitiku
drupal in Albania
John • 4 years ago
960 grid system is getting old now. I got the very nice tutorial about development wordpress
theme with 978 grid system. Check following URL
http://wordpressapi.com/2011/0...
Adam Murphy > John • 3 years ago
I love the 978gs, I use a hacked up version of it in my projects :]
Celina Baginski • 4 years ago
Thank you so much for taking the time to write this article! I was able to get up to speed on the
960 grid system in very little time.
Celina
Michael • 4 years ago
Man I really liked this tutorial. I now have a very good understanding of the 960 grid system.
Thanks,
Mike
Christoph • 4 years ago
Thank you so much! =) Seems like an very easy technique to reduce time when building
templates and avoid browser problems!
juKneb • 4 years ago
Hi, very interesting tool, I'm really considering using it on my projects. Thx!
I noticed the .clear class you mentionned in your article has a display:block property BUT in
FF it makes it become visible in the page. So if you use this method to clear the float you'll just
have to remove this display:block, and every thing will go perfectly well. I just tested it in ie7,
ie8, FF 3.6 and Chrome.
Cheers!
Julien
△ ▽ Reply Share ›
Catherine Cole • 4 years ago
Just digging into the 960. I like what I'm learning so far. Thanks.
Abhijit Chaore • 4 years ago
960 sounded critical initially. But this is a good article explaining it in simple steps. Thanks.
James • 4 years ago
I like this new grid system. http://thesquaregrid.com Check it out!
Alex • 4 years ago
Thanks for the article. Waiting tutorials about other cssframeforms
Dan • 4 years ago
The images do not appear on this tutorial. They are replaced by empty gray boxes. I am sure it
is a nice article, but would be helped if the images would appear.
Chris Raymond • 4 years ago
For those of us, like me, who develop websites that will be put into a CMS and have many
hands in the pot, so to speak, it is just plain and simple faster and easier to use the 960gs grid
class names in the markup (IN ADDITION TO OTHER CLASS NAMES!!! that are
semantically meaningful to the site's content). In my two years of experience working on such
sites, I have found it far easier to change class names in the markup to change a layout than to
completely rewrite css selectors because the client decided they wanted a complex page
layout to have 3 columns instead of 4, etc.
I wonder how Google would somehow divine what is a "Semantic" selector, @Jim?
I am reminded of a remark made at the Boston An Event Apart by Jared Spool: the definition of
dogma is people who believe in standards so much they they remove all tables from their
house.
If you don't want to use a grid system then don't. Overall, though, I think the web would benefit
from more use of grids rather than less.
feri • 4 years ago
thanks,
love this framework
Jim • 4 years ago
I found the debate between Nathathan and Mathew very helpful as I'm trying to decide whether
or not to use a framework or to attempt to recode our sites in HTML5.
As an Internet Marketer, I do care about the code and how that effects loadtimes and SEO. I
wouldn't be surprised if google decided to reward pages with semantic selectors as it would
help them identify relevant user content, which I think is google's primary mission.
My thanks to both.
Gervet • 4 years ago
Very interesting tutorial, had long wanted to see one of 960grid and this is quite
comprehensive.
Angela • 4 years ago
Great tut!, very comprehensive.. didn't know about the alpha omega. I used to use my one
clases for the same purpose.
Andi • 4 years ago
Cool tutorial. Thank you :)
Justin • 4 years ago
I loved the tutorial, and I see some merit in both sides of the argument. However in the long run
as long as the site is accessible, maintainable and can be done quickly to meet a customer's
budget the client will be happy. And interestingly enough clients pay me and not W3C. I am not
saying throw all the standards out the window in favor of speed, but I don't think the grid
system is quite as detrimental as Matthew is portraying it to be.
I have always written my style sheets from scratch and just used the 960 templates to help
control my design layouts. I have also been losing a lot of skinning work lately to overseas
developers who can underbid me due to the time it takes to do this. Actually using the grid
system for skinning might allow me to speed up development and be able to keep more clients
by paring the price down accordingly with my time savings.
You both have absolutely valid points. I think it would be interesting to see a site that Matthew
had marked up and styled and how it breaks down when the css is disabled (since we have
seen several examples of how the 960gs code looks and how it breaks down). I don't know if
any of Matthew's clients would like hundreds of developers tearing through source code and
commenting on it, but I think it would be interesting to see.
Anyway thanks to Roydee for the tut! And thanks to Nathan and Matthew for the lively and
interesting debate!
John Sullivan • 4 years ago
I love the 12 and 16 grid, but the 24 is my new favorite.
I know theres a fluid 12 16 grid. Is there a fluid 24 grid?
Thanks for the great tutorial.
w1sh • 4 years ago
Grids r cool!
rg • 4 years ago
Very helpful tutorial tutorial, especially the section about using the alpha and omega classes,
which opened my eyes, thanks.
One thing I that confused me when reading the article was the usage of the word padding, as it
was also used for margin and position offsets.
Advertisement
Teaching skills to millions worldwide.
19,120 Tutorials 480 Video Courses
Follow Us
   
Help and Support
FAQ
Terms of Use
Contact Support
About Tuts+
Advertise
Teach at Tuts+
Email Newsletters
Get Tuts+ updates, news, surveys &
offers.
Email Address
Subscribe
Privacy Policy
Custom digital services like logo design, WordPress installation, video production
and more.
Check out Envato Studio
Build anything from social networks to file upload systems. Build faster with pre
coded PHP scripts.
Browse PHP on CodeCanyon
© 2015 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.

ISIMSStudentManual PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

ISIMSStudentManual PDF

Încărcat de

Drepturi de autor:

Formate disponibile

 Code 

Top section: grid_1 to grid_24 classes

Bottom Section: pull_xx and push_xx Classes

alpha and omega Classes

Leveling the Field: The clear Classes

HTML & CSS Web Development CSS 960 Grid System

111 Comments Nettuts+  Login

Sort by Best Share ⤤ Favorite ★

19,120 Tutorials 480 Video Courses

S-ar putea să vă placă și