Symphony.

Fluid 960 Grid System 1.0.3

First step to get the templates into Symphony: Validate XHTML. See changes on GitHub.

@iibsum and @Fazal, There's also someone busy on GitHub forking the templates to jQuery.

@fazal: Thanks that does look a lot cleaner than mine, will work that into my code base. The accordion wasn't working on the section menu in the left column, but I just updated my templates to fix that. I haven't had any reports of problems for the center column accordion.

@bauhouse: I'm a bit new to Git myself as well, but I'll see what I can do. I'd like to keep the mootools and jquery templates separate to some degree as people will want both. I've also thought about porting the template to WP as a starter theme.

Commited more changes to GitHub for slightly better, but certainly not perfect IE support. It's pretty hit and miss trying to figure out what width to assign to margins for IE for the fluid layouts. The fixed width layout appears to be fine.

Thanks for this Stephen, it's a great learning tool. I'm already incorporating the 960gs fixed layout onto my Symphony site. It's still in early development but it'll never get as complex as the one you designed.

I made a fork of my own in Github, sorry about the personal email Stephen, I panicked! I've pushed all the jquery into one file and added checks to see if they exist in the page before firing the script. I have further amendments I would like to incorporate as well as cleaning up some of the markup. You can see my initial efforts here

I am a newbird for Symphony, thanks. I like 960gs.

You got linked on http://alistapart.com/articles/fluidgrids congrats! Great work by the way.

First off, wonderful package. Everything is nice and responsive right out of the box.

Perhaps I'm doing something wrong, but I downloaded the package, and everything worked. I'm playing around, experimenting, but for the life of me, I cannot modify it and maintain full functionality. I'm using the fluid 12 grid layout, and any time I remove any single element, such as the Articles section (everything from "div class='box articles'" to the associated /div), I lose functionality of the expandable menus.

It seems that no matter what I try to remove, something else gets broken until I put it back in. Do you have some sort of documentation that I might be able to read so I can get a better handle on how to make this work?

Thanks!

Here is a general function to add the Slide effect to all boxes with a header (in Mootools 1.2), so there is no need to apply the effect manually on each box:

window.addEvent('domready', function() {
    $$('.box h2 a').each(function(item) {
        item.setStyle('cursor', 'pointer');
        var elToHide = item.getParent('h2').getNext('div');
        var mySlide = new Fx.Slide(elToHide);
        item.store('fx', mySlide);

        item.addEvent('click', function(e) {
            e.stop();
            var fx = this.retrieve('fx');
            fx.toggle();

            if (item.hasClass('hidden')){
                item.removeClass('hidden').addClass('visible');
            }
            else {
                item.removeClass('visible').addClass('hidden');
            }
        });
    });
});

Sorry for the lack of response. I've been nose to the grindstone on a large project that's monopolized my time. Now, I'm starting to convince some of my coworkers that Symphony is worth a look. The Fluid 960 Grid System is going to be put to work as a rapid interactive prototyping system, and I'm going to see how quickly I can implement it with Symphony.

@huyaroo, @rabbler, I'll be looking forward to see what you come up with.

@theshortcut, thanks. I've been pretty amazed to see this project getting mentioned by the ones who have inspired me. Alistapart is where I started my education years ago with Dave Shea's CSS Sprites. It's gratifying to get the mention.

@fazal, thanks for your work on the jQuery version. I'll be looking to incorporate your efforts as a jQuery branch, if you don't mind.

@superwad, the JavaScript needs to be added and removed for each of the elements to ensure that the effects will continue to work. Take a look at Jack Dempsey's contributions to the github repos for some clues on how to avoid problems with disabling the JavaScript. (I'm a JavaScript neophyte, so I'm learning as I go.)

@jeromegamez, thanks for the tip. That should make things a lot easier.

By the way, with version 2.0.2, the checkbox issue appears to have been fixed. Thanks, nickdunn, for fixing a problem that has forced me to make some ugly workarounds in my ensembles. I'll be looking forward to making use of this as I experiment with the Fluid 960 Grid System as the front end for my ensemble experiments. Now, it should be possible to demonstrate Symphony's flexibility in managing customized data structures and developing front end user interfaces without this limitation.

I have committed the first version of the Symphony Fluid 960 Grid System Ensemble. It is now possible to switch between JavaScript libraries: MooTools 1.2.1 and jQuery 1.3.1.

The MooTools JavaScript has been revised to allow the addition and removal of boxes without breaking of the toggle Fx.Slide effects. IE conditional comments have been added to include stylesheets for IE6 and IE7+. The CSS has yet to be thoroughly tested and debugged for IE. My efforts so far haven't been largely guesswork and I'd like to see whether John Resig's article on Sub-Pixel Problems in CSS may shed some light on the issue, as noted on Alistapart's article on Fluid Grids.

I haven't created any sections, so the only thing being pulled from the database is information about the index page template, using a/b/c as URL parameters. Everything else is generated by xsl:call-template instructions. I thought that this would allow for faster prototyping without the need to think about data structures until information architecture is more developed.

Only the 16-column grid has been developed so far. The others are still to come.

Fluid 960 Grid System 1.0.4

The changes committed removed the duplicate directory structures in favour of several example HTML files pointing to the same CSS, JavaScript, images and ajax-response.html file. This better demonstrates the ability of the framework to adapt to different JavaScript libraries: the latest versions of MooTools and jQuery have been included.

See my site for the updated demo: www.designinfluences.com/fluid960gs/

Note: the ajax-response.html url is now an absolute reference in the JavaScript files, and will need to be updated depending on the location of the install.

Hey Bauhouse,

I'm very much enjoying fluid960gs, this has been GREAT. I have one simple question, that may or may not have already been answered. Do you have any ideas on how I might be able to push the site_information element (footer) down to the bottom of the page if I do not have much content on the page.

This wouldn't be a cross-browser solution, because IE6 doesn't support it, but you might want to try a CSS min-height rule. For example, notice here that the site info sits at the bottom of the page.

Or if you're looking to fix the #site_information element to the bottom of the view port, you could try absolutely positioning the element.

Or you could try a fixed position element, similar to what MacHeist is doing.

@hoopplaya4: You could also look into using the CSS Stick Footer.

@jeromegamez & @bauhouse: Thanks for fixing the MooTools to make adding or removing collapsible content easier. You've made my day :)

Though I am having a minor issue. I'm trying to make some content collapsed by default by adding class="hidden" to the <a>. It's setting the +/- icon properly, but the content itself isn't hidden.

Any thoughts?

Also, do you have any documentation on your system? There are some things that I'm trying to do and I just can't figure out, like how to set a section in an accordion as active when it's not the first item.

@superwad, I had already figured this out for a development copy, but only for MooTools so far. I committed the change to Github. I added this:

if (item.hasClass('hidden')){
    mySlide.hide();
}

So this will auto select and auto hide the elements:

window.addEvent('domready', function() {

    // Fluid 16-column Grid
    // Auto-Select Toggle Elements

    // Select all boxes with h2 anchor elements and toggle the next div
    // The toggle-ajax anchor is excluded or the AJAX content box won't work
    $$('.box h2 a[id!=toggle-ajax]').each(function(item) {
        item.setStyle('cursor', 'pointer');
        var elToHide = item.getParent('h2').getNext('div');
        if (elToHide) {
            var mySlide = new Fx.Slide(elToHide);
            item.store('fx', mySlide);

            if (item.hasClass('hidden')){
                mySlide.hide();
            }

            item.addEvent('click', function(e) {
                e.stop();
                var fx = this.retrieve('fx');
                fx.toggle();

                if (item.hasClass('hidden')){
                    item.removeClass('hidden').addClass('visible');
                }
                else {
                    item.removeClass('visible').addClass('hidden');
                }
            });
        }
    });
});

Yup, that worked for me! I was looking in there, but I don't know enough about MooTools to have made that change myself.

I was trying to replicate what you did there to allow for a class to be added to a menuitem (say class="on" or class="default") that would allow for something other than the first element to be chosen in the accordion list. I've figured out how to do it in the actual Accordion class; you simple set "display: <index>" and it takes care of it for you. But I can't seem to get the right Moo Magic to have it work like the hidden content.