Tired of the excessive number of non-semantic layout-specific classes that were often required to achieve a desired layout Campbell McGuiness decided to create StackLayout, a CSS layout system that fixed many of the issues that bothered the author, including the one we mentioned before and the fact that the “float” property does not have a very intuitive behavior, but is still used as the primary layout tool.

The system offers a solution for the people that want to vertically center the elements of a page and expect that block level nodes will act more like text. The project is still on its developing face as new versions are released every one in a while.

An important thing to clarify in order to understand StackLayout is the “stack” concept. A .stack is the outer most parent component that wraps all the other components. You can actually use any stack component as a parent because they are infinitely stable, but .stack is the only component that is full width and allows other stack components as children.

Quoting the author’s words, mocking up a site site with StackLayout components is comparable to building something with Lego. All the pieces are designed to fit together and be interchangeable in a myriad of combinations, so you can enjoy the process of creating. They behave just like text, forming new stack rows automatically so your layout will never “break”, instead content will simply be pushed down the page. No more floats, container elements or clearfixes for layout. StackLayout enables you to mockup complex yet stable prototypes on the fly.

On the original link you will encounter all the required documentation to understand StackLayout, including tests, template variations, wrappers and nesting, semantic class names, technical support and more great features such as:

• Cross device support
• Downloadable files
• Template variations and accessibility
• Complete code
• Demos

Original link: StackLayout