2

Short story: I frequently have to work on many different, rather small, web pages.
Most of them are layouted with pure CSS.

My Problem:
My job is to work on the code itself, on the functionality of the pages, not on the layout. However, due to the changes I make, I am often forced to make slight layout modifications and that soaks up my time like a black hole.
I end up spending as much as 10 times as long to do the slightest layout modifications as it takes me to add or rewrite routines.
We have a designer as well but it is just impossible to wait for him to redo layouts for every change I make (and often enough I have to change things multiple times).

So what I've searched for is a super basic and simple CSS WYSIWYG editor that isn't a complicated professional design tool. After trying a few tools I gave up, going back to editing by hand. In particular, the behavior of nested layout boxes just freaks me out every time.

Does anyone have some hints on this? I'd appreciate any help,

Thank you

Michael Durrant
  • 93,410
  • 97
  • 333
  • 497
user1015644
  • 25
  • 1

3 Answers3

2

twitter bootstrap

http://twitter.github.com/bootstrap/ looks really good from first impressions.

My rails expert keeps raving about it and I'm planning on trying it. Obviously free 'n all.

Basically we've felt your pain with this issue!

Bootstrap is good for real developers, a lot of it is basic layout via css tags and I think it'll make a lot of sense to you. Even if it doesn't meet all your needs, it might be a great place to start with, as a standard for a development team. As much as developers often dislike being templated ;)

The actual direct github site is: https://github.com/twbs/bootstrap

Is it used much? Currently?...

Github Stats:
Watcher: 8682
Forks: 1383
Last Update: 10/10/2011
This post: 10/26/2011

Looks good! :)

I'm also a big fan of HAML - Ruby + HTML without the angle brackets(and more)!

Jeromy French
  • 11,812
  • 19
  • 76
  • 129
Michael Durrant
  • 93,410
  • 97
  • 333
  • 497
2

Two thoughts:

1) Adopt more of an agile process

The visual design (layout) and logic design should be built in tandem rather than one after the other. As you've found out, modifying things after the fact can be a real pain.

2) Adopt a CSS framework/OOCSS methods/Component Library

The idea behind all 3 of those is to create reusable CSS that follows a predictable structure. This takes a lot more up-front work, but results in a code base that should be a lot easier to maintain going forward.

DA.
  • 39,848
  • 49
  • 150
  • 213
1

... not sure if this will help, but yahoo grid builder works well for me. Of course there is a catch. The css selectors it generates are not very semantic, so you might have to do some re-factoring of them from withing the generated html page.

Github Stats: (for Blueprint suggested by Daniel below)
Watchers: 4556
Forks: 390
Last Update: 06/06/2011
This post: 10/26/2011

Michael Durrant
  • 93,410
  • 97
  • 333
  • 497
vector
  • 7,334
  • 8
  • 52
  • 80
  • In a similar vein, I've found [Blueprint CSS](http://blueprintcss.org/) to be really useful. – Daniel Pryden Oct 27 '11 at 01:31
  • To each their own, of course, but I found YUI's grid system to be the most unintuitive of the bunch. Both in terms of the naming system and the actual math used in the logic of it. – DA. Oct 28 '11 at 19:45
  • ... true, it's a little cryptic, I think the WYSIWYG part is the clincher here. On the other hand, if I have to figure out someone else's css and html setup to get a skeleton layout in place, it's easier to do that from scratch. Not always, but quite often. – vector Oct 28 '11 at 20:07