Philosophy

There Must Be A Better Way

2 Things I Dislike About Existing CSS Grid Layout Systems:
  1. An excessive number of non-sematic layout-specific classes are often required to acheive a desired layout. (More on StackLayout class names)
  2. The float property does not have very intuitive behaviour, but is still used as the primary layout tool
2 Things I Like About inline-block Components:
  1. They behave like text and don't require clearfix elements to create rows

  2. You can vertically align them

I had used inline-block many times for image gallery thumbnails, with very desirable results.

I also found my self being asked to create horizontally stacked components with vertical alignment and no fixed height.

The 'stickers' on the Decal CMS homepage demonstrate my approach to solving the problem. Other notable examples include Highrise and Wistia.

It occured to me that people will always want to be able to vertically center things and expect that block level nodes will behave more like text. It is simply more intuitive and desirable behaviour.

So I thought, "there must be a better way" to take advantage of this desirable behaviour on a larger scale, and began experimenting using inline-block on layout elements. As it turned out, they behaved almost as desired right away, however because they behave just like text each element was separated by whitespace. After some experimentation, I found that I could set the "control font" to something with a fixed width whitespace character like Courier New, and remove this whitespace with negative letter-spacing. Over time I've refined the classes and markup required down to the bare minimum, so now only the containers and a .stackContent class to "reset" the letter-spacing and control font are required.

Another factor that influenced the development of the StackLayout system was the challenge to find a better solution to the age old design vs content paradigm. I wanted to develop a CSS templating system that was flexible enough to cater for virtually any layout, resolved enough to to be used as reliable design framework for an entire project and robust enough to withstand any amount of 'hacking' that may be required in the later stages of the development process.

Needless to say, I am quite happy with the results :) I now use StackLayout or some iteration of its CSS for every single project I work on.

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