960 Grid on jQuery-Mobile - merge 960.gs flexibility with jquery-mobile ease | Hacker News Reader

960 Grid on jQuery-Mobile - merge 960.gs flexibility with jquery-mobile ease

jeromeetienne.github.com

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.

html uses class/id attributes to regroup elements which behave the same way. This is part of html.

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)

"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.

So, how does this compare to Less Framework? http://lessframework.com/

I just decided to use Less Framework, and now I see this...

jquery-mobile-960 are not just the grid. this is a grid inside jquery-mobile. If you just need a css grid. less framework is a viable choise

Given that I have to include jQuery for using Less Framework anyway, isn't it always better do just use jquery-mobile-960 instead?

well jquery mobile is a lot more than jquery. in very short, jquery mobile is like jquery+jquery UI but on mobile. For more details http://jquerymobile.com/

I get a blank screen on my blackberry bold 9700 running all the latest updates and with javascript enabled. Sadly, blackberry neglect is common for these "mobile" frameworks.

This is great, I can't wait to try it out. I love 960 Grid more than any other CSS framework, and now that there's a mobile release, I'm even more thrilled.

This is neat, but kind of ugly on Opera 11. Mouseover yields a grey block that doesn't conform to the rounded block's boundaries.

Reply on news.ycombinator.com