Tuesday, October 9th, 2007

Simple Layout Manager with Prototype

Category: CSS, JavaScript, Library

Sébastien Gruhier (Mr. Proto) has created a JavaScript layout framework using Prototype 1.6. The Simple Layout Manager lets you create simple layouts using simple CSS and also let you dynamically add to the manager:

javascript

  1. layoutManager.add('your_element_id');

You can see some simple demos.

We have see a slew of CSS frameworks coming out there, and now we are starting to see people go past the pure CSS frameworks, and using JavaScript to take things to the next level.

Download the Simple Layout Manager code.

Posted by Dion Almaer at 7:56 am
10 Comments

++---
2.8 rating from 26 votes

10 Comments »

Comments feed TrackBack URI

The problem of use layout with javascript is the users with no javascript enabled, I think the point of css is for that and javascript is for another totally different thing. If we start to mix the layers we finally have a mess that is counterproducent and counterproductive

Comment by Er Neidid — October 9, 2007

what he said.

Comment by Ian — October 9, 2007

is this 1999?
curious my random spam qestion was: What three letter acronym is what we use to style web pages? :)

Comment by sergi — October 9, 2007

@menno

A layout manager _is_ needed, because CSS will only work if you can constantly specify heights. This will become very tedious as soon as you have some margins or padding or if some columns need to contain a variable amount of boxes. (Should the each get equal amounts of room, can you give one 50% and two others each 25%?) \
If you add resizing by the user (which is very much appreciated if your left column contains a tree for instance) then your looking at some fancy javascript.
Given the fact that a cross browser script to find out current styles requires a fair amount of work and understanding of each browser, I think this is just the job for a javascript framework. Have a look at some Ext 2.0 demos to see what it adds in terms of layout, very powerful, and not something that can be achieved with just CSS, believe me, I tried very hard.

Comment by Mike — October 9, 2007

Why is it ok when Ext does something like this, but when some other poor fool implements a lightweight version everybody lambastes him for his efforts? I use a similar script on various intranet applications, and no, not everything can be done with CSS, or is worth the effort of doing with CSS.

Comment by Marc — October 9, 2007

This is really useful for a javascript application.

Where the defining factor is that your app is only available via javascript anyways. At this point there is really no reason not to use javascript for laying things out programaticaly. Marc is right ext-ui uses a similar approach. Again, use this for an app based site, or for laying out complex widgets. For normal html and pages that are just enhanced with some non essential javascript, certainly use css.

Comment by Adam Sanderson — October 9, 2007

A smart css framework can accomplish everything that you need. If it *needs* to get more complicated than something like YUI offers, it DOESNT. I’ve come up with some pretty unique and dynamic layouts, painstakingly laid them out with CSS, and then broke them down a couple revs later to take a simpler approach that was more intuitive for the majority of our users.

When everyone on the web is used to the header/body[col1,col2,col3]/footer metaphor, why not exploit that for usabilities sake?

Comment by Eric Fields — October 9, 2007

“A smart css framework can accomplish everything that you need. If it *needs* to get more complicated than something like YUI offers, it DOESNT.”

So what you’re saying is that CSS can do what CSS can do and not what it can’t do?

Comment by Mike — October 10, 2007

Post advertisement at http://fivq.com/ . There you can offer your services, find gigs (short term jobs) or long term jobs. It is good place who would like to work remotely. Also there you can promote your website, your services. Between its absolutely free to post.

Comment by Vytas — October 12, 2007

This will become very tedious as soon as you have some margins or padding or if some columns need to contain a variable amount of boxes

Comment by AJHEELS — October 28, 2009

Leave a comment

You must be logged in to post a comment.