IDE专门用于常规web应用程序的布局和设计？

Question

Introduction

我已经使用CSS很多年了，毫无疑问，它在将表示责任和HTML分离成一个单独的规范层方面有着巨大的价值。

但是，我发现我自己只是觉得做复杂的布局和设计工作是错误的，直接编码CSS规则。它似乎存在抽象级别的不匹配，并且一个位于CSS之上并允许您在更高级别上使用和指定布局和设计的工具具有很大的价值。

规范

我正在寻找的是一个工具来管理HTML的表示和布局，让设计师在布局和设计方面与更高层次的意图和规范一起工作，并且自动生成适当的CSS和可能的特定布局的JavaScript来解决设计者的意图。

有点像令人厌恶的所见即所得编辑，我们有时会在2000年初左右或任何时候使用，但只关注设计和布局。拖放元素。绑定到网格上。相互绑定元素。管理和可视化语义和文体元素的关系及其分配。诸若此类。

当然，该工具需要与常规开发过程兼容，就像我在Visual中开发常规的.NET ASP.MVC应用程序时一样，但随后使用该工具来处理内容的布局和样式。当然，我们假设两者完全脱钩是可能的，这是愚蠢的，但这种耦合至少是明确和可管理的。(当然，从理论上讲，该工具可以是VS或其他IDE的扩展-解决这些问题，但可能会使整个环境变得更加复杂。)

因此，虽然该工具的实现可能相当广泛，但我认为这里的核心功能是：

1. 在web应用程序的设计和布局方面提供更高的抽象(如果要哲学的话，实际上是任何图形系统)。
2. 提供一个图形用户界面，使设计人员能够有效地表达他/她的设计意图，并将此规范转换为“可执行的”CSS(/JS)。
3. 只关注web应用程序的布局和样式，并与我们的正常工作流和实现后端( web应用程序的一部分)的工具一起工作。

有类似我描述的工具存在吗？

任何操作系统都是有趣的，但Windows将是最方便的。

Answer 1

新的WYSIWYG编辑器

适合于仿真器和初始设计。在现有的应用程序上工作不好。

金刚鹦鹉，草图，皮涅罗，甚至Photoshop +括号

• ✔为web应用程序的设计和布局提供了更高的抽象。
• ✔提供了一个图形用户界面，使设计师能够有效地表达他/她的造型意图。
• /js将此规范转换为“可执行的”css(✔)
• ✔只关注布局和样式
• ✘与我们的正常工作流一起工作得很好。

Thoose软件很适合最初的模拟和设计。但是，使用现有的应用程序(即导入html、表示样式和导出更改)并不能很好地工作。

不幸的是，他们和WYSIWYG编辑器有着同样的问题:他们可以导入自生成的代码，但是他们不善于处理第三方或修改过的代码。

用于web开发的

IDE

理想的web集成，应该与任何工作流程。但不需要抽象，并要求设计人员编写代码。

TweakStyle，浓缩咖啡，括号，德鲁韦弗，)还有很多其他的。我选择了thoose，因为他们提供现场预览。)

• ✘为web应用程序的设计和布局提供了更高的抽象。
• ✘提供了一个图形用户界面，使设计师能够有效地表达他/她的造型意图。
• /js将此规范转换为“可执行的”css(✔)
• ✔只关注布局和样式
• ✔与我们的正常工作流一起工作得很好。

Thoose是代码编辑器，它为前端和网页设计提供了有用的工具，比如实时预览或重写(TweakStyle和Espresso)。它们可能在您的工作流中运行得很好，但可能缺乏让设计人员思考的抽象，而且对某些设计人员来说可能有点技术性。

最好的解决方案可能是使用绘图工具来思考设计(Photoshop、Gimp或简单的纸和笔)。然后使用下面的一个IDE将其应用到现有的应用程序中。

Disclamer:我是TweakStyle

的创造者

关于您的需求，您可能对TweakStyle的覆盖特性感兴趣。它允许在远程后端导航，同时预览对静态资源所做的更改。此外，它似乎与sass和更少的工作。

欢迎在评论中添加到其他软件的链接。