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

http://jeromeetienne.github.com/jquery-mobile-960/

by jerome_etienne • 15 years ago

25 11 15 years ago

jeromeetienne.github.com

atgm• 15 years ago

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.

leftnode• 15 years ago

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.

listic2• 15 years ago

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

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

jerome_etienne3• 15 years ago

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

listic2• 15 years ago

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

pilif2• 15 years ago

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_etienne3• 15 years ago

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

pilif2• 15 years ago

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)

radius• 15 years ago

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.

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

Related Stories