Main Menu

Simple Stacks and Panels

Layout frameworks should be simple, not complicated. The CSS and HTML source should be concise, yet compact. The selector chains should be shallow or non-existant. Naming conventions, clear and conformed.

We should step back, relax, and consider how easy it should be. Here is everything you need to start building elegant layouts.

Just create a stack and add panels to it. If you want, you can add stacks inside stacks too. Layouts are as mild or as flexible as you need them to be. Panels snap to the left and right sides perfectly. Every stack and panel can be styled individually, using small, readable classnames. Responsive designs are a breeze.

Related Articles

This is brilliant, why isn’t this used pretty much everywhere? As well, the pattern is simple enough to let you build generators for various layouts like this, be it fluid, fixed or a combination thereof. Thanks for sharing!

John1161

Got any tips for adding gutters or padding, without adding a bunch of additional DIVs?

@John1161:disqus The easiest way I’ve found is to add padding to your panels. You could do this for every panel, adding the left and right gutter values. You might want to account for this in your page width as well however, otherwise you’ll be eating up some space on the sides. Also, don’t forget border-box.

albert

nice. are you familiar with @stubbornella’s oocss? this is very similar…nicely done.