IDE specifically for layout and design of regular web applications?

Question

Introduction

I have been using CSS for many years now and, make no mistake, it has a huge value in separating the presentational responsibility from HTML into a separate layer of specification.

But, I've found myself in a point where it just feels wrong doing complex layout and design work by directly coding CSS rules. It feels like there is a mismatch of the level of abstraction and that there would be much value in a tool that sits on top of CSS and allows you to work with and specify layout and design on a higher level.

Specification

What I am searching for is a tool to manage presentation and layout of HTML by having the designer working with higher-level intentions and specifications in regards to layout and design, and that automatically generates appropriate CSS and possibly layout-specific JavaScript to solve the intentions of the designer.

Kind of like the loathed WYSIWYG editors we sometimes were using around the beginning of 2000, or whenever it was, but with a sole focus on the design and layout. Drag and drop elements. Bind to grid. Bind elements to each others. Managing and visualizing the relation of semantic and stylistic elements and the the assignment thereof. And so on.

Of course, the tool would need to be compatible with regular development process, like in the case where I develop an regular .NET ASP MVC application in Visual Studio, but then turn to this tool to work on the layout and style of the content. Of course we one would be foolish to assume that a complete decoupling of the two is possible, but this coupling would at least be clear and manageable. (And of course, the tool could theoretically be an extension to VS or other IDEs - Solving those kinds of problem but maybe making the whole environment more complex.)

So while the implementation of the tool might be quite broad, I think that the core feature here is to:

1. Provide higher abstractions in regards to the design and layout of a web application (or really any graphical system if one is to go philosophical).
2. Provide a GUI that efficiently lets the designer express his/her intentions of styling and translating this specification into "executable" CSS(/JS).
3. Be concerned only with the layout and styling of an web application and work well together with our normal workflows and tools for implementing the backend-part of an web application.

Does any tool similar to what I described exist?

Any OS is of interest but Windows would be most convenient.

Answer 1

The new WYSIWYG editors

Good for mockuping and initial design. Bad for working on an existing app.

Macaw, Sketch, Pinegrow or even Photoshop + Brackets

• ✔ Provide higher abstractions in regards to the design and layout of a web application
• ✔ Provide a GUI that efficiently lets the designer express his/hers intentions of styling
• ✔ Translate this specification into "executable" css(/js)
• ✔ Be concerned only with the layout and styling
• ✘ Work well together with our normal workflows

Thoose piece of software are good for initial mockuping and design. But, working with an existing app (i.e. importing html, expressing styling and exporting changes) does not work very well.

Unfortunatelly they have the same issues than WYSIWYG editors: They can import self-generated code but they are bad at handling third party or modified code.

IDEs for web development

Ideal for web integration, should work with any workflow. But no abstraction and requires the designer to code

TweakStyle, Espresso, Brackets, Dreamweaver, ... (there are plenty of others. I choosed to list thoose four because they offer live preview.)

• ✘ Provide higher abstractions in regards to the design and layout of a web application
• ✘ Provide a GUI that efficiently lets the designer express his/hers intentions of styling
• ✔ Translate this specification into "executable" css(/js)
• ✔ Be concerned only with the layout and styling
• ✔ Work well together with our normal workflows

Thoose are code editors with useful tools for front-end and web-design like live preview or Override (TweakStyle and Espresso). They will probably works well with your workflow but may lack abstraction to let designers think and may be a bit technical to be used by some designers.

The best solution is probably to use a drawing tool to think the design, (Photoshop, Gimp, or simply paper and pen). Then apply it to the existing app using one of the bellow IDEs

Disclamer: I'm the creator of TweakStyle

Regarding your needs, You may be interested by the Override feature of TweakStyle. It allows to navigate on a remote backend while previewing the changes made to static resources. Also it works seemlessly with sass and less.

Feel free to add links to other softwares in comments