

960 Grid on jQuery-Mobile - merge 960.gs flexibility with jquery-mobile ease - jerome_etienne
http://jeromeetienne.github.com/jquery-mobile-960/

======
pilif
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.

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

~~~
pilif
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)

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

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

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

~~~
jerome_etienne
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

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

~~~
jerome_etienne
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/>

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

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

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

