Skip to content

Instantly share code, notes, and snippets.

@camslice
Created February 11, 2011 07:48
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save camslice/822051 to your computer and use it in GitHub Desktop.
Stack Layout mockup steps
<div id="page">
<div class="stack">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</div>
<div id="content">
<div id="column1" class="stack3of4"> <!-- large column, width:75% -->
</div>
<div id="column2" class="stack1of4"> <!-- small column, width:25% -->
</div>
</div>
<div id="column1" class="stack3of4">
<div class="stackContent">
<h2>My Awesome Heading</h2>
<p>This is sample content</p>
</div>
</div>
<div id="column1" class="stack3of4">
<div class="stackContent">
<h2>My Awesome Heading</h2>
<p>This is sample content</p>
</div>
<div class="stack1of3">
</div>
<div class="stack1of3">
</div>
<div class="stack1of3">
</div>
</div>
<div id="column1" class="stack3of4">
<div class="stackContent">
<h2>My Awesome Heading</h2>
<p>This is sample content</p>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
</div>
<div id="column2" class="stack1of4">
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
<div class="stackContent">
<h3>Another Heading</h3>
<p>Side column sample content</p>
</div>
</div>
<div id="header">
<h1 id="title" class="stackContent">Basic Mockup</h1>
<div id="banner" class="stackContent">
</div>
<ul id="nav" class="stackContent">
</ul>
</div>
<div id="header">
<h1 id="title" class="stackContent">Basic Mockup</h1>
<div id="banner" class="stackContent">
<img width="1100" src="my-banner.png" alt="My Banner" />
</div>
<ul id="nav" class="stackContent">
<li><a href="mockup1.html">Basic Mockup</a></li>
<li><a href="mockup2.html">Wrappers and Nesting</a></li>
<li><a href="mockup3.html">Template Variations</a></li>
<li><a href="mockup4.html">Semantic Class Names</a></li>
</ul>
</div>
<div id="footer">
<div class="stackAuto">
<p class="stackContent">&copy; 2011 Your Name here</p>
</div>
<div class="stackAuto">
<a class="stackContent" href="#">License</a>
</div>
<div class="stackAuto">
<a id="twitter" class="stackContent" href="#">Follow me on Twitter</a>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment