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

Question

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?

Answer 1

Your question sounds less like you are looking for a javascript framework and more like you are looking for something to help with page layout. I use Backbone heavily and just started dabbling with Batman as well. I see no reason to not use these libraries/frameworks. I prefer using lightweight tools and avoid monolithic frameworks.

In my opinion, a solid knowledge of CSS is essential if you are building single page webapps. I totally agree that you should bite the bullet and learn it. Using Less, Stylus, or SASS to simplify your CSS is perfectly acceptable, but you should still understand the underlying CSS that these tools generate. I personally use Stylus at this time.

If you want to jump-start your project and learn CSS as you go, there are a few projects that you might want to look at. These will help you to get up and running quickly and reduce the amount of CSS you need to create from scratch.

HTML5Boilerplate

This is a good starting point for your HTML and includes a solid CSS reset. I personally don't use the entire reset and customize it to just what I need. There really is no reason to not use HTML5 at this point. Even if you don't use HTML5Boilerplate, still look into using Modernizr and YepNope for feature detection and polyfill resource loading.

Twitter Bootstrap

This project includes all sorts of CSS boilerplate to get many common layout features working consistently and attractively. Note that this will make your application have a "twitterish" feel to it, but of course you can tweak it to look different. It uses LESS to more easily manage the CSS. I might fork and convert this to stylus at some point.

Semantic.gs

The Semantic Grid System provides a grid system without filling markup with .grid_x classes. I haven't used it yet, but I plan to play with it soon. You might find it helpful for creating layouts. It also uses LESS. Again, I might fork and convert to stylus.

jQuery UI Layout

This is a powerful layout plugin that I'm using in my application, although it is quite heavy and I've recently been considering removing it and using custom CSS/javascript. I created a tabbed interface layout and custom theme and contributed it to Kevin of the UI Layout project. Perhaps you would find it useful. Here's a list of other layout solutions based on jquery.

Template Precompiler

There are tons of templating soutions, including underscore template, jquery templates, mustache, jade, coffeekup, and so forth. I'm currently using Jade and created the tmpl-precompile project with node.js to compile, combine, and compress/uglify jade templates into executable javascript functions that can be served to the client. The uglified precompiled templates aren't much bigger than raw HTML templates would be, and they don't need to be compiled on the client. Using these templates with Backbone is as simple as calling a function in the render method.

Answer 2

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

• http://code.google.com/webtoolkit/
• http://cappuccino.org/
• http://ui.ajax.org/#home

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:

• Mustache: http://mustache.github.com/
• bunch of language specific ones like jade, haml, and the such

CSS meta languages:

• sass: http://sass-lang.com/
• less: http://lesscss.org/
• language specific ones like stylus: http://learnboost.github.com/stylus/

Josh

Answer 3

Perhaps microjs could be useful to you. You could look at templating libraries and css animation libraries, and even maybe even single page app libraries.