Key Benefits
Only 12 CSS Class Names
There is never more that one class applied to any given component.
It's inevitable that any CSS layout system will contain class names which describe the layout of an item, rather than its semantic function on the page, however with StackLayout there is an acceptable level of abstraction.
Easily Shift To Semantic Class Names
It's easy to mockup using StackLayout default class names and shift to semantic class names when you deploy. You'll never have to leave your markup littered with non-semanitc class names ever again. Learn more.
Infinite Nesting
Stacks can be infinitely nested, providing the flexibility to produce complicated layouts with ease.
Check out this mockup page or the test page.
Well Behaved Components
StackLayout components utilise the inline-block declaration, affording them highly useable default behaviour without the need for container elements to group rows of components, or clear floats.
The StackLayout system is flexible and robust so you can "hack in" container elements at your leisure without breaking the layout.
Flexible Width Layout
The default StackLayout is a 'fluid' or 'liquid' layout based on percentage widths so you can mockup your design quickly. It provides adequate markup structure and layout hooks so that you can easily refine your design as the project progresses without having to revise your mocked up markup.
"I need a fixed width layout"... Easy :)
Simply define a fixed width for your parent page container. I find setting a max-width particularly useful because it appears as a fixed width layout on larger screens, but becomes variable if the viewport width decreases.
Easy Column Gutters
StackLayout column gutters are really easy and versatile. You can define pixel width and/or percentage width column gutters for your layout.
Define fixed width gutters by adding margin-left & margin-right declarations to your .stackContent components.
Define percentage width gutters by adding margins to your stack components (excluding .stack .stackContent) then adjust their width so the total adds up to 100%.
Add Flexibility To Your Workflow - Whichever Way You Sway
Let Content Precede Design
Avoid double handling your layout markup & CSS. Use StackLayout to mockup your site quickly and get some real content in there so you can accurately determine design requirements.
Mockup complex layouts on the fly and respond to design changes with ease.
Further reading: 24 ways: Make Your Mockup in Markup
Mockup In Photoshop
Continue to mockup in Photoshop with confidence that you'll be able to retroactively acheive your design goals without having to modify your originally mocked up markup.
Further reading: DevGrow: Why You Shouldn't Make Your Mockup in Markup
