Gibt es ein Tool, das das Entwerfen von HTML (und CSS) mit der Relative Layout-Logik von Android anbietet?

Ich bin es gewohnt, das Layout in Android zu entwerfen , wobei ich hauptsächlich das Relative Layout verwende , das alle möglichen intuitiven Gestaltungsmöglichkeiten bietet. Zum Beispiel:

  • Legen Sie die Breite eines Elements dynamisch fest, indem Sie einfach angeben, dass Sie es links von diesem Element und rechts von einem anderen Element haben möchten
  • Ausrichtungsoptionen, um ein Objekt an beliebiger Stelle auf dem Bildschirm unter, über, links oder rechts von einem anderen Objekt zu platzieren
  • Layout-Optionen sind strikt getrennt von den Optionen, die Ansicht im Inneren zu verändern und nach Belieben zu verschönern

...und viele mehr

Diese Art, ein Layout per Code zu entwerfen, erscheint viel natürlicher .

Ich weiß, dass das DOM ganz anders funktioniert und man alles umhüllen muss und es keinen Sinn für Objekte gibt, die etwas Platz auf dem Bildschirm einnehmen. Jedes div kann auf jedes andere div fallen, ohne seine Nachbarn zu respektieren.

Gibt es Tools, die, wahrscheinlich mit Hilfe von Javascript-Magie , das HTML-Layout durch ein einfacheres und vernünftigeres Markup einrichten/erstellen könnten?

WYSIWYG-Tools sind nicht gut für den Job, da ich immer noch diese "Sprache" zur Beschreibung des HTML-Layouts der zur Laufzeit zu speichernden Seite benötigen würde . Dies liegt daran, dass Sie eine Animation anfordern möchten, sagen wir eine Übersetzung von x=50 nach x=70, und Sie möchten die Regeln dieses relativen Layouts dynamisch beibehalten, damit die restlichen Objekte auf der Seite entsprechend reagieren würden .

Natürlich könnte jemand behaupten, dass ein solches Tool in Bezug auf die Effizienz ein schwerer Prozess wäre, aber lassen Sie uns das jetzt nicht in Betracht ziehen

Meiner bescheidenen Meinung nach besteht das ultimative Ziel darin, den Prinzipien der Richtungsmanipulation im Interaktionsdesign zu folgen , wie jeder mit einer Maschine interagieren möchte, um (mindestens) 2D-Grafiken zu erstellen. Während das Codieren von HTML/CSS von Hand im Jahr 2015 mit all den Browser-Inkompatibilitäten, die immer noch vorhanden sind, damit jeder sie neu lernen kann, alles andere als ideal erscheint

Soweit ich weiß, arbeiten beliebte HTML/CSS-Frameworks in der Regel auf Leinwand, was etwas zwischen den beiden Ansätzen ist.
@VicAche welche Frameworks funktionieren so?
Susie zum Beispiel
Könnten Sie einen Link für dieses Susy-Framework posten? Ich kann nur ein Susy-CSS-Framework finden, das nicht mit der von Ihnen erwähnten HTML5-Leinwand verwandt zu sein scheint. Vielen Dank! :)
Wahrscheinlich die gleiche Susy, über die wir reden.
Wie funktioniert das Layout in HTML5? Ich würde erwarten, dass es in der Sprache ist. Es sollte kein Werkzeug sein. Wenn Sie den Werkzeugteil weglassen, ist dies eine großartige SO-Frage.

Antworten (1)

Sie suchen nach GSS - Grid StyleSheets

Es verwendet im Grunde einen Constraint-Solver , um Elemente gemäß den von Ihnen festgelegten Regeln anzuordnen (deklariert als Constraints wie in RelativeLayout von Android ) .

Aus den Dokumenten:

GSS ist ein CSS-Präprozessor und eine JS-Laufzeitumgebung, die Cassowary.js nutzt, die JS-Portierung desselben Constraint-Lösungsalgorithmus, den Apple in Cocoa Autolayout für iOS und OS X verwendet. GSS und Cassowary basieren auf „Constraint Programming“ – einem Paradigma, auf das sich Entwickler konzentrieren darauf, das „Was“ zu erklären und sich auf einen mathematischen Löser zu verlassen, um das „Wie“ herauszufinden. Bei der traditionelleren objektorientierten Programmierung konzentrieren sich Entwickler mehr auf das „Wie“. Dies macht Constraint Programming zu einer natürlichen Lösung für deklarative Sprachen wie CSS.

GSS-Polyfill-Layoutsprachen aus einer alternativen CSS-Zukunft; einschließlich Constraint CSS (CCSS) von Greg Badros und Visual Format Language (VFL) von Apple. GSS wertet CSS mit relativer Positionierung und Größenanpassung und echter Unabhängigkeit der Quellreihenfolge auf - was bedeutet, dass Entwickler jedes Element innerhalb eines anderen mit einem Einzeiler zentrieren können: #any[center] == #anyother[center];Boom!

Gibt es ein Tool, das das Entwerfen von HTML (und CSS) mit der Relative Layout-Logik von Android anbietet?
AntwortenHierDatenschutz-Bestimmungen1y, 0v