Search code examples
javascriptjquerylayoutbackbone.js

Is there a modern / lightweight layout library for javascript for use with backbone.js or the like?

I'm coming back to web UI after a hiatus and looking to create a modern single-page javascript application using backbone.js (or batman.js if it ever desublimates), node.js, communication via now.js etc - but my question is how do I lay the thing out? CSS is not optimal for this case plus I believe css fixed positioning doesn't work on the iPad (and css layout ruins my soul). Ideally the library would work for both desktop and mobile layout, but this is not strictly a requirement as there seem to be libraries that handle mobile layout just fine.

I only care about supporting modern browsers (webkit and FF), and want to use css3 animations and rendering for everything, not legacy animations and rounded corner tricks. I also don't care if people with old browsers or js disabled can't view the site.

It seems like a lot of people are using JQuery (JQuery UI Plugin?) or similar "traditional" libraries, but with the explosion of modern js libraries I'm surprised there is not something standalone that pairs well with the likes of backbone.js. I saw jLayout (http://www.bramstein.com/projects/jlayout/) but it lacks features I need (draggable/collapsable panes in a border layout, etc).

So should I just go with a traditional framework such as JQuery + UI plugin or Mootools MochaUI? ExtJS is out due to licensing, UKI looked promising but seemed insanely under-documented. Does anyone have good experience with these or is there another option? Or should I be reconsidering the painful possibility of CSS layouts?

UPDATE:

Thanks guys. Unless I'm missing something, all the templating solutions are just that - templating solutions, not layout frameworks that can do what I want (border layouts with fixed regions etc). Does the consensus seem to be then I should stick to CSS, possibly using something like Compass + Sass? My understanding and experience was that it is difficult to do fixed-region border layouts that work cross-browser and don't fail on mobile devices, but I could be way off. I'm also not sure I understand the role of templating here, it's to render regions and models automatically right?

Solution

  • I wouldn't use them, but there are some toolkits that do layout abstraction.

    As a commenter suggested, I would bite the bullet if I were you. backbone.js is pretty damn close to the metal, and a solid understanding of modern css/html combo is pretty mandatory imo.

    I'd use templates and potentially a sass like language to make css a little more palatable.

    Templating:

    CSS meta languages:

    Josh