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:
- 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).
- Provide a GUI that efficiently lets the designer express his/her intentions of styling and translating this specification into "executable" CSS(/JS).
- 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.