News for hackers. Stuff that matters.
Re:960 Grid on jQuery-Mobile - merge 960.gs flexibility with... by pilif on Monday February 07, 2011 @09:53AM (#2189068)
I see the temptation with using a grid like css system as it gives you really great control over the layout. On the other hand I really despise the classitis that's being enforced on a user of any grid system.

Not only that - the classes are as non-semantic as it gets.

Is this really where we should be going? Now that we got rid of non-sematic markup and heaps of tables and spacer images? Now we are going back to

    <div class="grid_2">
How is

    <fieldset class="container_12">
	<div class="grid_2"><button type="submit">Button 1</button></div>
	<div class="grid_8"><button type="submit">Button 2</button></div>	   
	<div class="grid_2"><button type="submit">Button 3</button></div>	   
    </fieldset>
better than

    <table width="120"><tr>
        <td width="20%"><button /></td>
        <td width="60%"><button /></td>
        <td width="20%"><button /></td>
    </tr></table>
(of course, playing devil's advocate a bit. fieldset > div > button is more semantic than table > tr > td > button, but it's far away from perfect)

Now if we had something like SASS where we could say that #sidebar is to be rendered as .grid_2, yeah - better, but as long as SASS is just something we bolt on as a compiler on deployment time, the code we are throwing at the browser is just as ugly as the code we threw at the browser in the dark ages.

This is why I'm not touching grid systems for my work, so if there is a class-attribute, then it usually has (aside of IE hacks due to .not.supporting.multiple.classes.selectors) semantic meaning.

Re:960 Grid on jQuery-Mobile - merge 960.gs flexibility with... by jerome_etienne on Monday February 07, 2011 @10:19AM (#2189172)
html uses class/id attributes to regroup elements which behave the same way. This is part of html.
Re:960 Grid on jQuery-Mobile - merge 960.gs flexibility with... by pilif on Monday February 07, 2011 @10:55AM (#2189351)
yes. But you are supposed to be semantic when handing out classes and ids. So don't use <h1 class="grid_2"> but just <h1>. Don't use <td class="rightalign">, but <td class="number">. And so on.

Also, you shouldn't add divs at will because correct styling requires it. You are supposed to be able to style whatever the structure of a given page looks like with just CSS (this still isn't possible due to IE's crappy selector engine).

If you are willing to compromise on class names (grid_2), why are you not also willing to compromise on tag names (<table><tr><td>, even <font>)?

Again, playing devils advocate. It's not my intention to be trolling, but to discuss the issue and to illustrate my general dislike for these grid systems. I'm NOT advocating going back to soups of tables if it's only for better reusability of site components (which, again, is hampered by this grid_<number> nonsense)

Re:960 Grid on jQuery-Mobile - merge 960.gs flexibility with... by jamesbritt on Monday February 07, 2011 @03:31PM (#2190560)
"But you are supposed to be semantic when handing out classes and ids."

Yes, in order to achieve certain goals, not because there is some absolute Platonic ideal correctness about it.

A question, then is does the pragmatic use of grids to more easily obtain certain layout goals end up making things worse in the long run.

Adherence to semantic purity may be a case of premature optimisation.