Есть ли какой-нибудь инструмент, который предлагает разработку html (и css) с использованием логики относительного макета Android?

Я привык проектировать макет в Android , используя в основном Relative Layout , который предоставляет все виды интуитивно понятных способов проектирования. Например:

  • Установите ширину элемента динамически, просто заявив, что вы хотите, чтобы она была слева от этого элемента и справа от другого элемента.
  • Параметры выравнивания для размещения объекта в любом месте на экране ниже, выше, слева или справа от другого объекта
  • Параметры макета строго отделены от параметров изменения вида внутри и украшения его так, как вы хотите.

...и многое другое

Такой способ разработки макета по коду кажется гораздо более естественным .

Я знаю, что DOM работает совсем по-другому, и вам нужно все завернуть, и нет смысла в объектах, которые занимают какую-то недвижимость на экране. Любой div может лежать поверх любого другого div, не обращая внимания на его соседей.

Существуют ли какие-либо инструменты, которые, вероятно, с помощью некоторой магии javascript , могли бы настроить/создать макет html с помощью более простой и разумной разметки?

Инструменты WYSIWYG не годятся для этой работы, потому что мне все равно нужен этот «язык» описания html-макета страницы, который будет сохранен во время выполнения. Это потому, что вы хотели бы запросить анимацию, скажем, перевод из x=50 в x=70, и вы хотели бы динамически поддерживать правила этого относительного макета, чтобы остальные объекты на странице реагировали соответствующим образом. .

Конечно, кто-то может сказать, что такой инструмент будет тяжелым процессом с точки зрения эффективности, но давайте пока не будем принимать это во внимание.

по моему скромному мнению, конечная цель состоит в том, чтобы следовать принципам манипулирования направлением в интерактивном дизайне, а это то, как любой хотел бы взаимодействовать с машиной для создания (по крайней мере) 2D-графики. В то время как кодирование html/css вручную в 2015 году со всеми несовместимостями браузеров, которые все еще присутствуют для любого, кто может переучиться, кажется далеким от идеала.

Насколько я знаю, популярный фреймворк html/css, как правило, работает на холсте, что является чем-то средним между этими двумя подходами.
@VicAche, какие фреймворки так работают?
Сузи, например
Не могли бы вы опубликовать ссылку на этот фреймворк Susy? Я могу найти только структуру Susy css, которая, похоже, не связана с холстом html5, как вы упомянули. Спасибо! :)
Вероятно, тот самый суси, о котором мы говорим.
Так как же макет работает в HTML5? Я ожидал, что это будет на языке. Это не должно быть инструментом. Если вы опустите часть инструмента, это отличный вопрос SO.

Ответы (1)

Вы ищете GSS — таблицы стилей сетки

В основном он использует решатель ограничений для размещения элементов в соответствии с указанными вами правилами (объявленными как ограничения, как в Android RelativeLayout )

Из документов:

GSS — это препроцессор CSS и среда выполнения JS, использующая Cassowary.js, JS-порт того же алгоритма разрешения ограничений, который Apple использует в Cocoa Autolayout для iOS и OS X. GSS и Cassowary основаны на «программировании с ограничениями» — парадигме, на которой сосредоточены разработчики. на объявлении «что» и использовании математического решателя для выяснения «как». При более традиционном объектно-ориентированном программировании разработчики больше сосредотачиваются на том, «как». Это делает программирование с ограничениями естественным образом подходящим для декларативных языков, таких как CSS.

GSS полифиллирует языки раскладки из альтернативного будущего CSS; включая CSS Constraint Грега Бадроса (CCSS) и язык визуального формата Apple (VFL). GSS повышает уровень CSS благодаря относительному расположению и размеру, а также истинной независимости от исходного порядка — это означает, что разработчики могут центрировать любой элемент внутри любого другого с помощью одной строки: #any[center] == #anyother[center];Бум!