Simple Stacks and Panels

written by jonathantneal on June 21, 2012 in CSS with 4 comments

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.

.stack, .panel { display: inline-block; vertical-align: top; width: 100%; }
.stack { font-size: 0; text-align: justify; }
.stack:after { content: ""; display: inline-block; width: 100%; }
.panel { font-size: 16px; font-size: 1rem; text-align: left; }

And here is everything you need to use them.

<div class="stack s1">
	<div class="panel p1"></div>
	<div class="stack s2">
		<div class="panel p2"></div>
		<div class="panel p3"></div>
		<div class="panel p4"></div>
	</div>
	<div class="panel p5"></div>
</div>

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.

/* Default / Tablet Portrait View */

.p2, .p3, .p4 { width: 33.3333%; }

/* Handheld Portrait View */

@media screen and (max-width: 479px) {
	.stack, .panel { width: 100%; }
}

/* Handheld Landscape View */

@media screen and (min-width: 480px) and (max-width: 719px) {
	.stack, .panel { width: 100%; }
	.p2, .p3 { width: 50%; }
}

/* Tablet Landscape / Desktop View */

@media screen and (min-width: 960px) {
	.stack, .panel { width: 100%; }
	.s1 { max-width: 1200px; }
	.p1, .s2 { width: 50%; }
	.p2 { width: 66.6665%; }
	.p3 { width: 33.3333%; }
}

Open in JSFiddle

Support is superb. This technique will work in Opera 9+, Firefox 3+, Safari 5+, Chrome 4+, and IE8+. IE6 & IE7 support is available for the price of a couple lines of unsightly CSS.

.stack, .panel { *display: inline; *zoom: 1; } .iestack { *letter-spacing: -10px; } .iestack .panel { *letter-spacing: 0; }
.stack { *-ms-stack: expression(this.firstChild.className!="iestack"&amp;&amp;this.appendChild((function(c,e,i){e.className="iestack";while(c.length)e.appendChild(c[0]);return e})(this.childNodes,document.createElement("div"),0))); }

Need Nine-Sixty layouts? No problem.

/* Default / Tablet Portrait View */

.stack, .panel { width: 720px; }

.p2, .p3, .p4 { width: 240px; }

/* Handheld Portrait View */

@media screen and (max-width: 479px) {
	.stack, .panel { width: 320px; }
}

/* Handheld Landscape View */

@media screen and (min-width: 480px) and (max-width: 719px) {
	.stack, .panel { width: 480px; }
	.p2, .p3 { width: 240px; }
}

/* Tablet Landscape / Desktop View */

@media screen and (min-width: 960px) {
	.stack, .panel { width: 960px; }
	.p1, .s2, .p4 { width: 480px; }
	.p2, .p3 { width: 240px; }
}

Open in JSFiddle

Have fun. Build. Here’s a refresher on the conventions.

Stack
A container of panels and other stacks.
Panel
A container of anything else.
sX
A unique class for each stack. s stands for Stack. X can be anything.
pX
A unique class for each panel. p stands for Panel. X can be anything.