24 replies to this topic

[burt]

One viewpoint; http://donatstudios.com/Grid_CSS_Versus_The_Web

Another; http://www.woothemes.com/2008/12/why-we-love-960gs/

From my research it seems that those people who;

1.  need to build a theme quickly
and/or
2.  don't have a developer skillset (in other words, need their hands held while integrating their design)
and/or
3.  need to build a simplistic theme

will like 960gs.

Anyone got any thoughts on it?

For me, this comment;

Quote

Are you guys serious? You are using a framework which puts all your websites back into a table structure, except this time he uses DIVS instead of rows and columns?  I’ve just had a discussion with a programmer friend of mine and we both agree that this system would help designers a lot because it would free them from the mental gymnastics that we deal with everyday, but for more complex layouts this system has the appeal of a table layout.
seriously, grid/table layouts, in 2009, only a designer would think such a system is fantastic.

Sums it up most clearly.  What osCommerce has now, is a proto-table-based-layout using div's.  Which is not the point of semantically coded html/css.

The usual BS comment ensued - someone trying to point out that grid isn't tables.  You don't say!  The point the commenter is trying to make is that the grid system is just as rigid as a page full of tables, not that the grid IS a table!.

Anyway.  I cannot wait until I see the first site in "feedback" made with 2.3 or 2.3.1 - I'm gonna rip it to shreds   You've been warned LOL

[burt]

By the way, in case anyone did not realise, the last sentence above is a joke, hence the smiley.  
I really want to see some lovely sites made by 960.

[toyicebear]

Since oscommerce is used to make webshops i guess a cross browser compatible base system like 960gs is not such a bad fit.

Most webshops have a simple layout with 1, 2 or 3 columns.

It is also kind of a "soft" start for those who previously were using tables/td's to start using div's.

And for those who want a more advanced layout/design, they would probably have some css skills and should easily be able to strip out or work around the 960gs part and create their own custom div layout/design.

[burt]

Just so I can have an argument   I am currently building a site using 960 classes where possible.

I've come across some annoying idiosyncracies with 960.

Worse though - the implementation of the new system for placing boxes right and left.  Grrrr.  What happens for example if I want a box in the footer?  Anyone tried it?? Annoying.  But possible with some workaround.

[Collines]

I took a look at the 360 grid system and am now busy stripping it out.

The straight jacket makes me think of tables renamed as divs.

I am sure that it is the perfect solution for newcomers though.

[burt]

I agree with you Mark, it is limiting, probably more so than tables (although nicer code than tables obviously).  

I've basically finished my 960 project, and came across some very annoying stuff.  I am sure that at some point that new site I built will be placed into the feedback area, then everyone can rip it apart.

[multimixer]

Collines, on 18 November 2010 - 06:50 PM, said:

The straight jacket makes me think of tables renamed as divs.

burt, on 18 November 2010 - 07:05 PM, said:

I agree with you Mark, it is limiting, probably more so than tables (although nicer code than tables obviously).  

I can not totally agree with this

Lets say I have

<div class="container_24">
	<div class="grid_4 ">ONE</div>
	<div class="grid_16 ">TWO</div>
	<div class="grid_4 ">THREE</div>
</div>

I get on the screen |ONE||                     TWO                          ||THREE|,  and yes, no big difference to tables. For each change of the layout I need to go again to the file to make any changes

But if I say

<div class="container_24">
	<div class="one ">ONE</div>
	<div class="two ">TWO</div>
	<div class="three">THREE</div>
</div>

and in my css

.one { (properties of .grid_4) }
.two { (properties of .grid_16) }
.three { (properties of .grid_4) }

I gain alot of flexibility, because I can move things around left and right without touching the html at all.

[burt]

Morning George, how's Greece today?  It is grey and raining in England.  

The point is that the 960 forces us to think in terms of rows and columns.  That's just not how .css should be.  Worse than that though is the new box system for placing boxes left and right.  Have a go at placing the information box in the footer of the site.

[multimixer]

Yellow and blue here in Greece, as always, hard to concentrate on the screen

I can not say I'm a 960 defender, I just pointed out the using the grids is not exactly the same a tables. But you are right, there are rows and columns, not freely flying floating div's

Regarding the infoboxes, yes, I agree with you. While before we had separate boxes that could be included anywhere, now there are 2 groups of boxes. Not only the placement is harder, but the selection too: What for example if I want to show the shopping cart box only on the checkout pages? And the bestsellers everywhere but the product info? Go to each box file and write conditions? Make new groups of boxes and make conditions in template bottom about what group to show?

However, this whole thing changes the way of thinking, at least mine  - I mean whenever I think

Edited by multimixer, 19 November 2010 - 12:28 PM.

[Collines]

I have to agree with Gary here.

I tend to think of CSS as being three dimensional in structure. As well as placing object alongside each other, CSS allows for objects to be placed on top of or under each other in a three dimensional matrix. Essentially, anything can be placed anywhere. The word grid in "360 grid system" immediately makes me think of a two dimensional grid, with everything being laid out on a flat plane, much like in a table.

I do think that the 360 grid system is useful and many beginner designers will like the rigidity that it imposes. I also think this is probably the best solution for the inexperienced designer.

I also think though, that if you want to break out of the box and offer something that will be original, it would be better not to use the grid system.

How many times do you look at an internet site and immediately think, "That was made with osCommerce"? The sites that hold my low attention span are those that on first impression, I immediately think, WOW how did they manage to achieve that. If you want to get customers online, you have to think outside the grid (pun intended).

[burt]

The project I completed yesterday, did turn out quite well.  I used 960 for the overall layout and then for the contents of each of the 960 "boxes" I inserted more "boxes" and set up a new stylesheet for all that stuff, here's the general idea;

][img]http://www.clubosc.com/test/20101119-1.jpg[/img]

[multimixer]

Is it necessary to use alpha and omega classes at the first grid level? I thought it's only for nested grids, not?

[burt]

Without the alpha and omega in that spot, the internal divs were shifted to the right by about 10 pixels.  Adding the A/O shifted them back to the correct position.

For anyone who works in the front end rather than in the code (like George and me), here's what that code made, obviously with some .css stuff as well (please note I blurred some stuff out and removed the image from the big "box";

[img]http://www.clubosc.com/test/20101119-2.jpg[/img]

Edited by burt, 19 November 2010 - 01:58 PM.

[npn2531]

If you think that the 960 grid system is 2 dimensional, then take a closer look at the push and pull classes. You can overlap, partially overlap and or stack div's as deep as you like. Although the 960 grid makes it  easy to create a crossbrowser compatible grid with precise, equal or consistent proportions, you are by no means limited to lining up div's like so many 'bricks' or cells and rows in tables.  

The grid system, as I sure you can see, is a system of floating div's. These grid systems were not created by folks to make CSS easier for novices, although it does do that.  They were created by designers to streamline repetitive tasks, and the layout parts of CSS, so they could focus on  more sophisticated aspects of CSS design. In the 960 grid system you aren't even limited to a website that's 960 px wide.

A grid system limits CSS in the same way Jquery 'limits' Javascript, or graph paper limits the shape of a  graph drawn on it.

(If you are having trouble moving  infoboxes around in 2.3, for example, then change the php or the html of the infobox. You guys know how to do that. It's not an issue with the grid system. )

[ZwenZwenzzon]

Thanks guys for giving me courage to strip out the 960 grid.

It was a while ago I coded osCommerce, so I was very confused finding the strange 960 grid there at first.

I stripped out the grid completely by first moving the needed data from the 960_24_col stylesheet to the main stylesheet, then removing grid classes from div tags, and then styling out anew from there.

The floating div based code is now awesome to work with, a dream of a web store.  Cheers to all developers for this nice edition!

One thing I do not agree on however; the 960 grid is nothing good for newbie coders either. It would be much easier for them to take a few hours of css classes, and no grids would be needed. The grid just helps newbies to be helpless.

Edited by ZwenZwenzzon, 22 November 2010 - 03:39 AM.

[npn2531]

When you take out the grid classes from the div's, the awesome 'floating div based code' would no longer float.

Edited by npn2531, 22 November 2010 - 05:06 AM.

[ZwenZwenzzon]

npn2531, on 22 November 2010 - 05:05 AM, said:

When you take out the grid classes from the div's, the awesome 'floating div based code' would no longer float.

Yep it floats!

Moved the classes from 960_24_col.css into the ID elements in the div tags, for instance;

#bodyWrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}

#bodyContent {
display:inline;
float:left;
margin-top:8px;
margin-left:5px;
margin-right:5px;
width:630px;
left:160px;
position:relative;
}

...and so on and then continue to style as usual.
If you do this right, nothing will happen!

It takes a couple of hours, but it is well worth it.

My log:

/* 960_24_col.css grid removed completely. Thereby the following files where modified.
catalog/includes/classes/osc_template.php
catalog/includes/template_top.php
catalog/includes/template_bottom.php
catalog/includes/header.php
catalog/includes/footer.php
catalog/stylesheet.css
*/

Edited by ZwenZwenzzon, 22 November 2010 - 06:01 AM.

[npn2531]

The notion of writing 2.3 in 'generically' classed or id'ed div's, and then controlling all aspects of design from the stylesheet. ala www.csszengarden, would be pretty neat. From that point of view, having div's all over catalog pages with fixed widths and in many cases fixed relative positions, is limiting.

There may be an ideal initial set up of the html, of the div and class and id, that all potential designs folks are going to want to create, will be possible from the stylesheets. If you don't have that ideal, then you are going to be adding classes, id's and manipulating div's in the catalog pages.

One way to compromise  is to put  the major elements, header, footer, content, columns on one or two template files, with a limited number of files. 2.3 does this. On those two files you have nearly unlimited design choices of these major elements by either 1) classing and id'ing div on your own if you don't like 960, or 2) by using the preset 960 grid units which will have consistent and predictable results. Either way you are most likely going to be in the html.  The people who are adept with the 960 will be able to argue there is little you can achieve with your own classes and id's that you can't also achieve with the very flexible grid units. And the 960 users, like myself,  will argue that to achieve the cross-browser proportion, balance and consistency that is quickly and easily achievable with grid systems, you are going to be constantly reinventing the wheel.

[bp123]

Hi.  I am novice with php and style sheets.   I feel sort of ignorant but I have been trying to work out why none of the tutorials for osc make any sense at all, and I have just realised that 2.3 is a totally new game from the older versions.

So..I realise the difference and have done my research on the 960 grid itelf.  Now i was wondering if any of you guys can give me some starting points/tips on how to get into osc and begin changing the look, etc. from this grid based system.   I realise that most of this is done in the stylesheets.php page (i think..correct me if I'm wrong) I understand CSS to a point.   Now what I would like to understand is how to actually move grids and change the look of my site through the code on these pages such as the osc_templates pages.   I don't see any DIVs or anything else like 'grid_XX' on these template pages to work with so I'm a little confused at this point.  I see a lot of php of course.. but nothing I can identify that works with the overall structure of the site.  It seems like the older versions of osc are a little more straight forward but I do like the idea of 2.3.   Can anyone here help me out with some starting tips and get me pointed toward the right direction please?

[npn2531]

Think in terms of applying 'styles' to grids instead of moving grids. By styles I mean altering the CSS and adding/removing/replacing background images, from the stylesheet. You can change the look of the site dramatically and in a great variety of ways without even touching template_top/template_bottom or moving a single div (grid)  in the catalog pages.

As a starter focus on what happens when you replace images or add images, (or background images) and  Spend an evening or two and work through the tutorial at http://www.w3schools.com/css/default.asp.