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

StackLayout is the brain child of Campbell McGuiness

Campbell McGuiness is a member of the Working Software team and has a passion for hand coding highly semantic, cross browser & device compatible HTML & CSS.

StackLayout is sponsored by Decal CMS

Contact Me

Email me


Connect With StackLayout



Get Involved

This is a living project. I'm hoping StackLayout will grow through people using it, so please let me know how you're using it, what went wrong and what went right.


See the latest developments on our Wiki

Fork This Project

Not sure how? Read this.

Who Is Using StackLayout?

Click here to find out