Html – Tool / plugin for laying out web page with minimal efforts applied on raw CSS

csshtmljquery-layoutwysiwyg

First things first. I have been struggling while dealing with raw CSS to generate complex page layouts. It gets further complicated with browser vendors looking in different directions. Well, now that can't be changed.

So after a lot of efforts I started looking for:

  1. A WYSIWYG editor that would take in content and allow me to define the desired layout and magically generate CSS that would honor most of the latest browsers, while also taking into account the liquid & fluid attributes of the layout
  2. jQuery plugin that would take care of content arrangement complexity while just taking in inputs for the desired layout.

I haven't been able to find anything for the first quest. I'd like to know if there is any such WYSIWYG editor out there. There are many CSS editors but they don't abstract the raw CSS. One needs to know CSS thoroughly and that IMHO beats the need of such an editor. Notepad or a regular IDE is good enough.

For the second point, I came across this thread on stackoverflow. Now this put me in a problem of abundance (not a bad thing BTW). This post has links to several jQuery plugins that do the trick. Some of them are:

I am looking for comments and recommendations from people who may have used 1 or more of these. Plugin's simplicity is important and equally important is the flexibility (plugin shouldn't be restrictive.

Frankly, I'd like to offload much of the CSS job to a tool.

Best Answer

Most layouts shouldn't be that hard to get working - it's probably worth checking you understand the different ways of positioning: float, relative and absolute properly, and that you are aware of how to clear floats.

You could try looking at blueprint or 960.gs for ways to get complex grid based layouts without much hassle.