Features

Stack Components Are Well Behaved

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 myraid 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 components are also infintely nestable, enabling you to mockup complex yet stable prototypes on the fly.

Check out this mockup to see a demonstration. Try building a layout yourself, all the resources are here.

It's really good. Use it now

Yes! It's that simple

Yes! It's 100% cross browser compatible*

Yes! You can realistically start presenting your clients with
working mockups in the early stages of your design process

(The Yes! blocks above are all .stackAuto components)

Enhancements

Using Semantic Class Names

StackLayout makes it incredibly easy to use semantic class names for particular areas of your site, such as the main navigation or a thumbnail gallery, or for the entire site as part of your deployment process.

On this mockup page all the stack component classes that relate to non-semantic width properties have been replaced with arbitrary 'semantic' classes. I have kept the .stackConent class because I consider it to be semantic enough for this purpose. This could also be easily replaced in a similar fashion if necessary.

Then I simply added the new classes to stacklayout.css and stacklayout_lte_ie7.css. For easy reference I have added them to stacklayout-semantic.css and stacklayout-semantic_lte_ie7.css, in which I have commented out the original StackLayout component class names. It should be noted that the parent .stack component is still required.

Template variations & accessibility

Let's say you've got a 2 column template with the large column first and the small column second, but you want to quickly see what it looks like the other way around. Simply use relative positioning to shuffle the columns:

This technique is a plus for accessibility because the most important content comes first. It works on any multi column layout and also means you can quickly demonstrate multiple template variations using the same markup.

See the template variations mockup page for more demonstrations.

Cross Device Support

StackLayout components make it very easy to create cross-device compatible versions of your site, due to their robust yet flexible behaviour.

Firstly, use media queries to attach another stylesheet for supported devices that have a smaller screen width. (Thankyou Andy Taylor for this method).

Now create some CSS to manipulate your layout to suit a smaller screen size. The most basic version of this will simply make every stack component width:100% causing them to stack up vertically:

I've employed a slighly more complex version of this for the stacklayout.com site, which makes columns 100% wide, menu items 50% wide and some footer items 100% wide if the screen is less than 767px wide. If the screen reduces if the screen reduces to less than 452px wide, all components become 100% wide.

It should be noted that i have done little independent device testing, here's a list.

If you've tested on others, or have more input on the best way to improve cross device support please get involved here.

* Browser Support

A full list of browser support can be found on the StackLayout github wiki.

Sub-pixel Rounding of Percentage Widths

Sub-pixel rounding techniques vary across browser rendering engines, so the resulting calculated width of components varies across browsers:

  • The technique used by Firefox produces the most desirable results.
  • Webkit results are less desirable but useable.
  • Opera's results are comparable to Webkit, however the calculated width of .stack1of3 components (width:33.334%) is severly rounded down.
    A small javascript solution to recalculate the width of these components in Opera (and possibly Webkit) would be a welcome improvement. If you come up with one please let me know.
  • Internet Explorer results are less desirable still, requiring a margin-right:-1px; applied to most components to safely produce useable results.

To see for yourself view the test page.

Firefox 2

Firefox 2 doesn't understand the inline-block declaration. Their proprietary -moz-inline-stack declaration comes close, but the results can be unpredicatable so I have not used it. A number of tests using inline-block resulted in everything stacking up vertically as block nodes and was still readable.

Last time I checked, the Firefox 2 global market share was around 0.4% (StatCounter - download the .csv for all browser versions) so i'm prepared to live with that. You may not be :)

IE7 & Below

.stackAuto > a.stackContent components and any micro stacks using this CSS suffer from a well known double margin bug. Unfortunately the fix collapses the bottom margin of the anchor.

Let's say you have applied margin:10px to your .stackAuto > a.stackContent components:

There are 2 ways to deal with this:

1.

(Recomended)

Change the way you manage margins and padding by giving all .stackAuto .stackContent components (anchors or not) left & right margins, and give all .stackAuto components top & bottom padding.

Replace the above CSS with the following in your normal stylesheet (use your own margin and padding values):

This technique applys a blanket fix for all .stackAuto > .stackContent components whether they are anchors or not.

The benefit being that you don't need to modify a conditional stylesheet, and you can be confident that your layout will 'Just Work'.

OR

2.

Adjust the position of .stackAuto > a.stackContent components by adding this to your LTE IE7 conditional stylesheet:

This technique applys a targetted fix for .stackAuto > a.stackContent components only by modifying the conditional stylesheet.

The benefit being that .stackAuto and non-anchor .stackContent components are not affected. This would be most useful if you did not wish to modify an existing component margin & padding structure and just want to apply a targetted fix.

If you can find a better solution please let me know. Thanks :)

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

@camslizzle

Connect With StackLayout

Facebook

@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.

Github

See the latest developments on our Wiki

Fork This Project

Not sure how? Read this.

Who Is Using StackLayout?

Click here to find out