Geek Answers Handbook

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

I am returning to the web interface after a break and want to create a modern one-page javascript application using backbone.js (or batman.js if it ever desublimates), node.js, communication through it. js etc. but my question is how can I put this aside? CSS is not optimal for this case, plus I believe that fixed css positioning does not work on the iPad (and the css layout destroys my soul). Ideally, the library will work both on the desktop and on the mobile layout, but this is not strictly a requirement, since it seems that the libraries that process the layout of the mobile phone are just fine.

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

It seems that many people use jQuery (JQuery UI Plugin?) Or similar "traditional" libraries, but with the explosion of modern js libraries. I am surprised that there is nothing special that goes well with the likes of Backbone.js. I saw jLayout (http://www.bramstein.com/projects/jlayout/), but it lacks the features that I need (drag / drop panels in the border layout, etc.).

So should I just go with a traditional framework like a jQuery + UI plugin or Mootools MochaUI? ExtJS is missing due to licensing, the UKI looked promising, but seemed insanely underrated. Does anyone have a good experience with these or is there another option? Or should I reexamine the painful CSS layout feature?

UPDATE:

Thanks guys. If I don’t miss something, all the template solutions are just solution templates, not layouts that can do what I want (border layouts with fixed regions, etc.). Does it seem, in consensus, that I should stick with CSS, perhaps using something like Compass + Sass? My understanding and experience was that it’s hard to make border layouts in a fixed region that work in a cross browser and are not blasted on mobile devices, but I could leave. I'm also not sure I understand the role of templates here to automatically display regions and models?

+7
source share
5 answers

I would not use them, but there are some tools that perform mock abstraction.

As the commentator said, I would bite a bullet if I were you. backbone.js is pretty damn close to metal, and a solid understanding of modern css / html combos is pretty arbitrary.

I would use templates and possibly sass as a language to make css a bit more acceptable.

Patterning:

CSS Meta Languages:

Josh

+2
source

Your question doesn’t sound like you are looking for a javascript framework and are more like looking for something that will help in the page layout. I use Highway a lot and just started practicing with Batman. I see no reason not to use these libraries / frameworks. I prefer to use lightweight tools and avoid monolithic frameworks.

In my opinion, a solid knowledge of CSS is important if you are creating single page web pages. I completely agree that you should bite a bullet and study it. Using Less, Stylus, or SASS to simplify your CSS is acceptable, but you should still understand the basic CSS that these tools generate. I currently use Stylus personally.

If you want to start your project and learn CSS as you go, there are several projects that you might want to see. This will help you 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 do not use all reset and configure it only for what I need. There is really no reason not to use HTML5 at this point. Even if you are not using HTML5Boilerplate, still look at using Modernizr and YepNope to discover functions and load polyfill resources.

Twitter bootstrap

This project includes all kinds of CSS templates to get many common layout functions that work consistently and attractively. Please note that this will make your application feel “generous”, but of course you can customize it to look different. It uses LESS for easier CSS management. I could develop and convert this into a stylus at some point.

Semantic.gs

The semantic grid system provides a grid without populating the markup with .grid_x classes. I have not used it yet, but I plan to play with it soon. You might find it helpful to create layouts. He also uses LESS. Again, I can develop and convert to a stylus.

jQuery UI Layout

This is a powerful plugin that I use in my application, although it is quite heavy, and I recently considered removing it and using custom CSS / javascript. I created a tabbed interface layout and user theme, and contributed to the Kevin project in the user interface layout project. You may find this helpful. Here is a list of other jquery-based layout solutions .

Preliminary set of templates

There are many pattern templates, including underline pattern, jquery patterns, mustache, jade, coffee, etc. I am currently using Jade and have created a tmpl-precompile project with node.js to compile, combine and compress / extinguish jade templates into javascript executable functions that can be passed to the client. the pre -compiled templates are not much larger than the original HTML templates, and they do not need to be compiled on the client. Using these templates with Backbone is as simple as calling a function in the render method.

+4
source

Perhaps microjs might be useful to you. You can look at templating libraries and css animation libraries, and even maybe even single-page applications .

+2
source

Best js layout plugin around:

http://masonry.desandro.com

+2
source

Very interesting and ultra-light Tempo JS . A very good json rendering engine and you will find articles on pace + spine.

0
source

More articles:


All Articles