6

I am used to designing the layout in Android, using mostly the Relative Layout, which provides all sort of intuitive ways to design. For example:

  • Set the width of an element dynamically by simply stating that you want it on the left of this element and on the right of some other element
  • Alignment options to place an object wherever you want in the screen below, above, on the left or on the right of another object
  • Layout options are strictly separated from the options to change the view in the inside and beautify it they way you want

...and many more

This way of designing a layout by code seems much more natural.

I know that the DOM works very differently and you need to wrap everything and there is no sense of objects that take over some real estate on the screen. Any div can fall on top of any other div without respecting its neighbours.

Are there any tools out there that, probably with the help of some javascript magic, that could setup/create the html layout by a more simple and sane markup?

WYSIWYG tools are not good for the job because I would still need to have this "language" of describing the html layout of the page to be saved on runtime. This is because you would like to ask for an animation, let's say a translation from x=50 to x=70, and you would like to maintain dynamically the rules of this relative layout so the rest of the objects on the page would respond accordingly.

Of course someone could claim that such a tool would be a heavy process in terms of efficiency but let's not take it into consideration for now

in my humble opinion the ultimate goal is to follow the principles of direction manipulation in interaction design which is how anyone would want to interact with a machine to create (at least) 2D graphics. While coding html/css by hand at the year 2015 with all the browser incompatibilities still present for anyone to re-learn seems far from ideal

migrated from stackoverflow.com Apr 16 '15 at 20:57

This question came from our site for professional and enthusiast programmers.

  • For what I know, popular html/css framework tend to work on canvas, which is something in-between the two approaches. – VicAche Apr 24 '15 at 8:12
  • 1
    @VicAche which frameworks work like that? – Georgios Pligoropoulos Apr 24 '15 at 10:53
  • Susy for example – VicAche Apr 24 '15 at 13:37
  • Could you post a link for this Susy framework? I can only find a Susy css framework that does not seem related to the html5 canvas as you mentioned. Thanks! :) – Georgios Pligoropoulos Apr 27 '15 at 12:01
  • Probably the same susy we're talking about. – VicAche Apr 27 '15 at 13:21
1

You are looking for GSS - Grid StyleSheets

It basically uses a constraint solver to layout elements according to rules specified by you (declared as constraints as in Android's RelativeLayout)

From the docs:

GSS is a CSS preprocessor & JS runtime that harnesses Cassowary.js, the JS port of the same constraint solving algorithm Apple uses in Cocoa Autolayout for iOS & OS X. GSS & Cassowary are based on “Constraint Programming” - a paradigm where developers focus on declaring the “what” and relying on a mathematical solver to figure out the “how”. With more traditional Object-Oriented Programming, developers focus more on the “how”. This makes Constraint Programming a natural fit for declarative languages like CSS.

GSS polyfills layout languages from an alternate CSS future; including Greg Badros's Constraint CSS (CCSS) and Apple's Visual Format Language (VFL). GSS levels up CSS with relative positioning & sizing and true source order independence - which means developers can center any element within any other with a one-liner: #any[center] == #anyother[center]; Boom!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.