Symphony.

@superkruger For instance with the articles the text would ‘disappear’ once I toggled it. Were you able to use the accordian and articles with your 1.1 version?

I haven’t seen that happening… However with mootools there is the side-effect that with multiple elements, like accordion, opening one sub-element will close all others in different elements. This doesn’t happen with jquery though.

With articles keep in mind that version 1.1 has changed css classes slightly:

<div class="box articles-box">
   <h2>
      <a href="#" id="toggle-latest-news">Articles</a>
   </h2>
   <div class="block articles" id="latest-news">
      <div class="first article">
         <h3>
            <a href="#">Article Heading</a>
         </h3>

Hi

I’m working on a site using this system, and everything works great except mootools accordion in IE8 :(. The site is at: www.czarnagora.com.pl (accordion boxes in the bottom) - does anyone know a solution for this?

@miska, apparently there’s still IE issues in the lib, but I don’t know where exactly. Personally I prefer JQuery, it just seems to be more cross-platform…

@superkruger, thanks for help, will try to rewrite it for JQuery

Thanks for the help superkruger. I got everything to work properly.

I have a follow question, I have been looking through the mootools code and was wondering how can change it so the articles are collapsed(closed) when initially loaded?

Thanks for all your help

Has the new “FluidGrids” excelled “Fluid 960 Grid System”?

Both don’t work properly with IE (especially version 6), so I want to try to fix it… should I concentrate my research on “FluidGrids” or “Fluid 960 Grid System”?

Thank you.

This seems nice too, FluidGrid (without the “s” at the end).

I have been working with variations of grids based on Nicole Sullivan’s Object-Oriented CSS as this grid system appears to be much more flexible. FluidGrids is essential the same as OOCSS, but I wasn’t fond of the names of the classes:

• line
• unit
• sizeXofY

All I have done is replace these class names with others that might be more easily understood. I don’t know that it is better or worse.

• row
• column
• colXofY

Then, I added a section class to group rows:

• section
• row
• column
• colXofY

Then I was wondering, what if you wanted a 6-column layout, or 7-column, etc? So I tried to work out how these might be calculated. So, FluidGrids includes the ability to develop layouts for the following column widths: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16. OOCSS stops at 5 columns. However, I’m not sure how useful these additional column widths are in practice. I haven’t yet found a case where I would use them, at least in a fluid width layout.

What I liked about the FluidGrids is the ability to use the content class to define a gutter with a fixed pixel width. With the 960 Grid System (both fluid and fixed), the gutter width is always going to be 20 pixels (as in the fixed-width 960gs) or 2% (as in the fluid960gs). If you wanted anything different, you would have to recalculate everything.

I realized that with OOCSS grids, I could define the borders around the columns of the grid and vary the width of the gutters by adjusting the padding width on the mod class. In the FluidGrids layout, I replaced the mod class (module) with a content class.

I was going to take the content modules I had created for the Fluid 960 Grid System and add them to FluidGrids, but I haven’t had time to do this yet. Then, I was going to see what debugging was still required for compatibility with IE.

@ekerazha, if you are willing to take a look at IE compatibility, that would be great!

Also, thanks for pointing out FluidGrid. That looks very interesting as well. I also came across another site: fluid.gs

I think “sizeXofY” is better because using “colXofY” people could think they can directly use that column (ex. col4of5 is the 4th column on 5) while they can only reserve its size.

Take a look at the new w3.org site, they use a “sizeXonY” grid (“oN” not “oF”).

Also, I tried to create an IE6-compatible fluid grid but it’s a pain and I had no results, however you can find some tips here http://www.pmob.co.uk/pob/three-columns-fluid.htm if you can try.

If you have a Windows system you can use IETester ( http://www.my-debugbar.com/wiki/IETester/HomePage ) to test your work on IE 5.5 (I don’t care about it), IE6, IE7 and IE8.

Hey,

Just wondering, is it possible to use grids within articles themselves?

If yes, an example would be great. I have been wrestling with my code for the past day and can’t seem to be able to sort it out.

Thanks

Example of my code which does not layout properly. The article does not expand enough to see anything below the sub sub title.

<div class="grid_16">
<div class="box articles-box">
<h2>
    <a id="toggle-articles-1">TUTORIAL ONE</a>
</h2>
<div class="block articles" id="articles-1">
<div class="first article"> 
    <h3>
        Title 1
    </h3>
    <h4>
        sub title
    </h4>
    <p class="meta">sub sub title</p>
    <div class="grid_6">
         <h4>WATCH TUTORIAL</h4>
             </div>
             <div class="grid_10">
            <h5>Synopsis</h5>
             </div>

@ekerazha, I hadn’t noticed that the new W3C site was using classes like that. Interesting. And thanks for the link to the IE-6 compatible fluid grid. That looks like it could be useful.

@gbd, if you’re asking whether you can nest grids with the Fluid 960 Grid System, I’d be inclined to say, “No.” I can’t say I’ve really tested this out, though. The widths will be applied to each grid column, but you’ll probably need some sort of wrapper div around the columns for them to display correctly. OOCSS grids are much more flexible for nesting grids.

Hi Bauhouse,

I like your modified version a lot and am playing around with it. However, I do notice one thing in your css code, grid.css, line 387-390:

.container_16 .suffix_2 { padding-right: 16.5%; }

Shouldn’t that percentage be 12.5% rather than 16.5%? Is that a bug or did I miss anything?

Thanks!

Will there be a 24-column version? I see that at 960gs, there’s now a 24-column version.

When sending a Fluid 960 page via email to Outlook, the text is displayed as a serif font (looks like Times) and the background color is white. In contrast, the CSS font attributes are preserved when sending Nathan’s 960 home page. It would be great to have the default Fluid 960 template retain its font styles in Outlook email.

Serif font is not an Outlook default, so I assume this is being set.

Having the HTML body background change to white in email is a good feature. Retain that. The white background allows added text to be visible when forwarding an email. Thanks!

@lolajl, I haven’t planned on supporting a 24-column version. I suppose in theory that it would be possible, but it seems more practical for the fixed-width version than it would for the fluid version. If there were some demand for it, I might consider it.

@Loren, email is a use case I had not considered, especially since I created the grid system more as a prototyping system rather than a design for production sites. There are known issues regarding cross-browser support which first need to be addressed before the Fluid 960 grid system should be used for a production site.

In regard to both issues, as always, modify the system to meet your requirements and feel free to contribute.

I would not recommend to develop email templates using a grid system. Especially Outlook 2007 and Outlook 2010 (beta) are really, really bad when it comes to CSS – they have thrown us back to the beginning of the web. If you really want to deliver styled content to these shitty (and some other, let’s say “problematic”) email clients, you will have to:

• use table-based layout
• use inline CSS exclusively
• simply forget margin, padding and some other CSS properties

I have spent a long time on this topic, and, well, I know what I am talking about. Email clients are much worse than browsers. (If you are doing tests, don’t forget those funny webmailers…)

hello

i am trying to revamp the UI of a web application for a client and i am using to 960 grid to have a rapidly protype something.

But i have a problem in IE6, the client’s default/standard Internet Browser.

The homepage of the application has a box containing the login form that is centered in the midle of the page.

I used suffix and preifx of equal value to center that box, i get the desired effect of a grid_4 box centered by prefix_4 and suffix_4. But in IE6 although the box is centered, it looks wider than the desired effect i was looking for.

I am using the 960 fluid version and my doctype is xml 1.0 strict with no xml declaration in the html tag.

Thanks in advance for your help

@bauhouse I’m watching Andy Clarks’ Designing with CSS for a Beautiful Web and he shows Fluid 960 as an example of a CSS framework (with the old Overture site). Woot!

He’s cautious of CSS frameworks for production work, but thinks they’re great for prototyping.

Hey, very cool. The idea for building the Fluid 960 Grid System was based on Andy Clarke’s earlier work, Transcending CSS.

I would caution the use of CSS frameworks for production work as well. But they’re great for building prototypes quickly. That’s pretty much all that I’m doing at work now. Although, to be honest, I’m using content markup from Fluid 960, but not the grid system. I’m using a hybrid (fluidgrids.com based on OOCSS, since the grid system allows nesting of grids.

The markup is getting pretty ugly for some projects (divitis can happen pretty quickly). The danger is that I usually don’t have the time to come back around and make sure the markup is reworked to be more semantic. And IE6 compatibility is a total pain.