Fixing CSS positioning and scaling

Question

I was contemplating writing a UI toolkit where setting the position and size of an element/widget was intuitive and powerful. Here are some examples of how it would be used (not currently implemented):

ui("Panel").size(". 40").pos("0 0").attach(element);
ui("Textarea").size(". %-10").pos("0 40").attach(element);
ui("Panel").size(". 10").pos("0 bottom+5");

Where . means auto, % means 100% and the possibility to add pixels to percentages.

Does anything like said exist (even as a jQuery plugin or something)? Somethings just aren't possible with pure CSS.

Answer 1

If you want to create it in Javascript you will have to make the script read the ui code then convert to css. This would cause too much overhead and wouldn't really be worth the hassle. It would be nice to have a quicker more intuitive way to create styles but unfortunately without paying in efficiency it wont work too well.

Answer 2

I would be very wary before lunching into this. This would give any devloper joining your project a major headache of needing to learn your new layout mechanisims.

I have yet to see what CSS can not do, so you may want to look into what it can do further before going ahead look at the various examples from http://www.csszengarden.com/ . I'm not saying CSS is easy but it is standard.

If you need more power look at CSS3 the majority of which can be achived using jQuery.

Sorry to say but I think you are heading down the wrong road by building your own. Use standard, tested, well knowen and documented way. Don't reinvent the wheel unless you are in the wheel making business.