Liquid Layout Engine

This method works, but it does come with certain design restrictions: everything has to fit into that Tetris-like stack of boxes, and if your design is not repetitive, it gets tedious to create this. Also, it causes most sites to start to look alike because of its restrictions.

We imagined that you could create layouts with elements positioned anywhere you would want them, without having to worry about manual padding, margins, spacing or fitting everything into a box scheme.

So we created a layout engine that does all of that. It's called 'liquid layout'.

With our liquid layout engine, you can freely move any element around and place it where you want it. Next to another element, under another element, on top of another element, in the top header... anything is possible. When you drag-and-drop an element on the canvas in the location where you want it, our liquid layout engine will automatically create its own positioning, proportionally to other elements on the canvas. Where it gets really cool though is that this ‘web’ adapts itself to the size of the browser window that your visitors are using. On a small browser window, the liquid layout contracts and on a larger web browser window, the liquid layout expands. So your layout looks like you intended it across screen sizes. Contracting and expanding is all nice and well, you might say, but does my layout look as intended when the distance between the elements is variable? Wouldn’t it all look quite crowded on a smaller screen, or sparse on a large screen?