osCommerce and 960 grid system

By | November 19, 2010

So the new osCommerce 2.3 and 2.3.1 have Nathan Smiths 960 grid system as part of the core code.

I’ve looked about the web and come to the conclusion that some users will really like it – it allows a person to layout the page in rows and columns very easily. You want 3 boxes side by side? Just use the correct .css call and there you have it. Done.

Basically, my thought is that the grid system acts very like a tables based layout, though I am obviously aware that it is not tables 😉 And having .css act like this is not how .css should be.

Anyway, in order to get a better handle on the 960/osCommerce I decided to make a real life client project using 2.3.1 as downloaded. The first thing I did was sketch out the design on a piece of paper;

As you can plainly see, it suits the gridded layout. Next up was to install 2.3.1 and start playing with the code and css. I ended up with a completed site that looks like this;

Please note that I blurred a few bits out. Once the client has signed off, I’ll divulge the site URL…

Which, as you can see is very close to my original sketch.

The only significant change is the extra box that contains the “welcome guest” message and the summary of the cart contents. In order to achieve this I stuck as much as I could to the ethos of the 960 system for the layout, but added extra code to make the site look prettier.

Here’s that area of the site in full size;

and here’s some of the code to show you the layout of that area – pay particular attention to the outside div’s (960) and the inside div’s (my own);

My conclusion

960, as i have said all along, is not for me – I don’t like the feeling of being forced to do something “because I have to” just to get something to line up. Alpha, Omega, Push, Pull, Grid, Container – these things mean NOTHING to a designer and not much at all to a Developer.

However, I can see it being very useful for those people who are coming from a “tables based” background (as most people using osCommerce are) – 960 can be considered a halfway house between tables and pure css layout – which isn’t a bad thing, but doesn’t cut the mustard for me personally.

Who the heck made the decision to add 960 to osCommerce, and why? Perhaps one of the osCommerce Team Members reading this could explain the rationale behind it. I am wondering if HPDL saw this being used in the ‘osc2css’ contribution and thought “that’s near enough”…

16 thoughts on “osCommerce and 960 grid system

  1. Berkedam

    The most annoying thing for me is, during playing with 2.3.1 that there is no html and no body (although FireBug says there is a body but changing something there is not working) and that the boxes seem to randomly float around because of 960(?) on what i like to call the canvas (in your project it’s the green area).

    You seem to have come to grips with it, can you explain how to get a border around all the now visible content so that it will be possible to have an image around the existing content?

    Strange thing is that i looked at other 960 examples which all do have a when i look with Firebug.

  2. Berkedam

    …which all do have a body … ( the brackets caused the word body to disappear).

  3. Gary Post author

    John – you should be able to do things with the body, but remember that css is “cascading”…

    The body tag is in the /includes/template_top.php and is referenced only in the usual stylesheet.css…here’s how the body bits of mine look;

    body {
    color: #000;
    margin: 0;
    padding: 0;
    font-size: 11px;
    font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;
    background: url(‘images/tpl/topbg.gif’) top left repeat-x #036E38;

    #bodyWrapper {

    #bodyContent {

    Note that bodyWrapper and bodyContent could be over-riding whatever you set for body. Any help?

  4. Berkedam

    Hi Gary, thanks for your answer.

    What i wanted (a canvas image not visible “inside” the osC content) i finaly managed to do like so:

    #bodyWrapper {
    after that i added an image:
    body {
    background: #fff;
    color: #000;
    margin: 0px;
    font-size: 11px;
    font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif;

    And to prevent that the image shows “inside” the osC-content, i changed this:
    .container_24{background-color: #FFFF00;margin-left:auto;margin-right:auto;width:960px}

    “overflow:hidden;” does exactly what i need in FF 3, Chrome 7, Opera 10, IE 8.
    The overflow area also extends down automagically in case of longer content 🙂

    Note_1: overflow will probably not work in some earlier browser versions, because using it (looking at the specs), as i do does not seem to be the right (intended?) way to use it.
    So why it actually works for me i cannot explain.

    Note_2: osC 2.3, the CSS used as a standard and the 960 grid seem definitively not to be my favorite cup of tea.

  5. George

    Thinking of the 960grid system, or for that matter, other more powerful grid systems such as yahoo’s YUI system, as an easier way to line up columns, is just scratching the surface of what these tools can do.

    Take your example above, you have used 960 grid components to layout the page and then filled them with your own divs. This is pretty much what has been done with OSC 2.3. This approach is fine, but is not taking full advantage of the system.

    These systems do for CSS what Jquery does for Javascript. To say grid systems are something other than ‘pure CSS’ is like saying Jquery is something other than pure javascript. Jquery simplifies javascript. The 960 simplifies a layout. For example, grid_2 within container_24 is going to do one consistent thing across all browsers. It does not limit anything you want to do with CSS, it just makes it easier.

    The push and pull classes? If that class name doesn’t mean anything to a developer, just rename the class something like, ‘a_sure_fire_way_to_position_or_overlap_or_lineupdeadeven_consistently_in_any_browser_anything you like_by_doing_more_nothing_more_than_applying_one_or_two_predefined_classes_to_a_div.

  6. Gary Post author

    George – remarks such as the last sentence in your post add little to the conversation.

    It is obvious that you like 960 as it is what you used in osc2css. In that contribution, and in posts across the osCommerce forum, you display a lack of css/xhtml ability, so it is really no surprise that 960 does float your boat.

    Anyone with a bit better understanding will soon realise that 960 is in fact, a straight-jacket.

  7. Pete

    It might be more fair to say that 960 grid system is a basic leg up into an established system that fulfils the fairly low standards of oscommerce interface design.

    I don’t mind this, as long as there it is easy to transplant another system in, such as yahoo’s YUI system..

    Anyone done anything on this and got stuck, …or got it working?

  8. yung23

    “Next up was to install 2.3.1 and start playing with the code and css. I ended up with a completed site that looks like this;”

    okay, so how did you get rid of the “new products” area ?

    where is your categories area ?

    and how did you move them anywhere ?

    did you tag the “$new_prods_content” div with a grid class ?

    how do I edit this damn template ?

    I know CSS and am familiar with what it does..

    but I just don’t see how the rest works..

    PLEASE.. anyone, lets get some tutorials online !

    I have edited my install to include room for a banner and such..

    I can edit colours and background images…

    but how do I MOVE items around and resize them ?

    how did you go from the initial template layout to the one above ?

  9. Gary Post author

    “great video of you extracting shit to your desktop”

    “Any FOOL can edit a few lines of CSS.”

    So, you know all about templating and osCommerce already, Yung23 aka Chris.

    When I receive an apology for your bullshit comments in this blog, the osCommerce forum and elsehwere, I might help you out a bit.

  10. yung23

    I am NOT this “Chris” dude you think I am.

    I alwasy go by the name yung23, on any forum.. I have never insulted you, I recognize your avatar from the other forum.

    all I want is to understand how this stuff works, PLEASE.

    and yes, I may have have said the fool line.. but I was not calling YOU a fool, go re-read post.

    I was talking in general, not of you dude.. chill out.

    any FOOL can edit a few lines of CSS, but it takes someone much smarter to edit this oscommerce code.

    (and by that, I am talking about YOU, as YOU seem to be the only person out there with a clue about it)

  11. yung23

    “When I receive an apology for your bullshit comments in this blog, the osCommerce forum and elsehwere, I might help you out a bit.”

    the post above was my FIRST post in this blog, so i have no fn idea what your bitching about.

  12. yung23

    SHOW me where I may have offended you and you will get an apology.

    all I’ve been trying to do is understand this stuff, I wouldn’t be biting the hand which can feed me..

    and my name IS Chris.. but I would not be the Chris who is offending you, and if I did, I am sorry, but you are misreading my posts.

  13. Gary Post author

    I’m not Dunweb.

    That’s a nice positive comment, made by you, is it not?

  14. yung23

    okay, so that was me too. but the video was only of you extracting stuff to your desktop was it not ?
    man, why are you so offended ?

    but dude, you gotta realize the frustrations of trying to edit oscommerce templates. there is NOTHING out there to help. any anger isn’t being directed at you.

  15. rm

    960 grid is a killer when I installed clean oscommerce and all my hard work of previous versions for 8 years has become useless. Ironically, no way to disable 960 grid. I am not sure whoever planned this, I am looking for alternatives to go for some other open source rather quickly to end this torture. Nothing could be done on the site as every UI is controlled by 960. Very bad for Oscommerce. Nothing works now for me. Frustrated

  16. Gary Post author

    960 was introduced 5 YEARS ago…you’ve had the last 5 years to get to grips with it lol

Leave a Reply

Your email address will not be published.