Я использую CSS уже много лет, и, не заблуждайтесь, он имеет огромное значение для отделения ответственности за представление от HTML в отдельный уровень спецификации.
Но я оказался в ситуации, когда кажется неправильным делать сложную компоновку и дизайн, напрямую кодируя правила CSS. Такое ощущение, что существует несоответствие уровня абстракции и что было бы очень полезно использовать инструмент, который находится поверх CSS и позволяет вам работать и определять макет и дизайн на более высоком уровне.
То, что я ищу, - это инструмент для управления представлением и макетом HTML, когда дизайнер работает с намерениями и спецификациями более высокого уровня в отношении макета и дизайна, и который автоматически генерирует соответствующий CSS и, возможно, специфичный для макета JavaScript для решения намерений. дизайнера.
Что-то вроде ненавистных WYSIWYG-редакторов, которые мы иногда использовали в начале 2000-х или когда бы то ни было, но с единственным упором на дизайн и верстку . Перетаскивайте элементы. Привязать к сетке. Привязать элементы друг к другу. Управление и визуализация соотношения семантических и стилистических элементов и их назначение. И так далее.
Конечно, инструмент должен быть совместим с обычным процессом разработки, как в случае, когда я разрабатываю обычное приложение .NET ASP MVC в Visual Studio, но затем обращаюсь к этому инструменту для работы над макетом и стилем содержимого. Конечно, было бы глупо предполагать, что полное разделение этих двух факторов возможно, но это соединение, по крайней мере, было бы ясным и управляемым. (И, конечно же, инструмент теоретически может быть расширением для VS или других IDE — решение подобных проблем, но, возможно, усложнение всей среды.)
Таким образом, хотя реализация инструмента может быть довольно широкой, я думаю, что основная функция здесь заключается в следующем:
Существует ли какой-либо инструмент, похожий на то, что я описал?
Любая ОС представляет интерес, но Windows была бы наиболее удобной.
Подходит для макетирования и первоначального дизайна. Плохо для работы над существующим приложением.
Macaw , Sketch , Pinegrow или даже Photoshop + скобки
Эта часть программного обеспечения хороша для начального макетирования и дизайна. Но работа с существующим приложением (т. е. импорт html, выражение стилей и экспорт изменений) работает не очень хорошо.
К сожалению, у них те же проблемы, что и у WYSIWYG-редакторов: они могут импортировать самостоятельно сгенерированный код, но плохо справляются со сторонним или модифицированным кодом.
Идеально подходит для веб-интеграции, должен работать с любым рабочим процессом. Но никакой абстракции и требует от дизайнера кода
TweakStyle , Espresso , Brackets , Dreamweaver , ... (есть много других. Я решил перечислить эти четыре, потому что они предлагают предварительный просмотр в реальном времени.)
Это редакторы кода с полезными инструментами для интерфейса и веб-дизайна, такими как предварительный просмотр в реальном времени или Override (TweakStyle и Espresso). Они, вероятно, будут хорошо работать с вашим рабочим процессом, но им может не хватать абстракции, чтобы позволить дизайнерам думать, и они могут быть немного техническими для использования некоторыми дизайнерами.
Лучшим решением, вероятно, будет использовать инструмент для рисования, чтобы продумать дизайн (Photoshop, Gimp или просто бумага и ручка). Затем примените его к существующему приложению, используя одну из следующих IDE.
Отказ от ответственности: я создатель TweakStyle
Что касается ваших потребностей, вас может заинтересовать функция Override в TweakStyle. Это позволяет перемещаться по удаленному бэкэнду, предварительно просматривая изменения, внесенные в статические ресурсы. Также он работает безупречно с sass и меньше.
Не стесняйтесь добавлять ссылки на другие программы в комментариях.
подводное веселье
Алекс
подводное веселье
Алекс
Хьюи
baitisj
Мог говорит восстановить Монику
Эйден Гроссман