Symphony.

This weekend I stumbled across Stephens’ excellent Fluid 960 Grid System.

This is life-changing, comparable to the introduction of mobile phones some decades ago; we survived millennia without them, but now we can’t picture a world without them.

The system works really well, but I needed something more flexible. Specifically I wanted multiple ‘section-menu’ items.

That wasn’t quite possible, due to the fact that elements were referred to by ‘id’ in the javascript functions.

I changed this to a ‘class’ based selector mechanism, allowing multiple of any type to be present.

Not much has changed, so it should be easy to adapt your HTML. Just remember to copy the new javascript files and layout.css

Let me explain how it works now: For example, to have many section-menu’s, you would declare them like this:

<div class="box menu">
  <h2>
    <a href="#" id="toggle-my_menu_1">Section Menu 1</a>
  </h2>
  <div class="block section-menu" id="my_menu_1">
    <ul class="section menu">
      <li>
      <a class="menuitem">Menu 1</a>
    <ul class="submenu">
      <li>
            <a>Submenu 1</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="box menu">
  <h2>
    <a href="#" id="toggle-my_menu_two">Section Menu 2</a>
  </h2>
  <div class="block section-menu" id="my_menu_two">
    <ul class="section menu">
      <li>
      <a class="menuitem">Menu 2</a>
    <ul class="submenu">
      <li>
            <a>Submenu 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

The javascript function would search for all ‘section-menu’ classed elements. It would then use the ‘id’ of each element to match against a ‘toggle-[id]’ element.

Please note: This version is NOT backwards compatible with the 1.0.x versions, because of the new selector mechanism.

Thanks Stephen, I hope this addition is helpful to others.

Attachments:

bauhouse-fluid960gs_1.1.0.zip

@superkruger: I’m always open to contributions. So, thank you for this. It might be a bit premature to call this version 2.0, but maybe I can get to work on version 3.0 soon - the IE compatible release. ;)

I’m looking forward to loading this up to see what you’ve added.

There were a couple of copy-paste bugs I had to fix, so I renamed it to version 1.1.0 ;)

Good work on that though, can’t believe I’ve worked without such a system for so long…

I know you mentioned in the other thread that it’s difficult, but this would be brilliant if it were possible to nest grids, or at least somehow easily manage the location of div’s inside blocks. Is there any possible way to do this? I’d like to use it for prototyping a project, and the lack of nesting seems to be a bit of a limitation :(.

Cheers