Skip to content

Instantly share code, notes, and snippets.

@camslice
Created February 11, 2011 09:07
Show Gist options
  • Save camslice/822104 to your computer and use it in GitHub Desktop.
Save camslice/822104 to your computer and use it in GitHub Desktop.
Stack Layout mockups
<div id="page">
<div class="stack">
<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="content">
<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>Column Heading</h3>
<p>Side column sample content</p>
</div>
</div>
</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>
</div>
</div>
<div id="page">
<div id="header">
<div class="wrapper">
<div class="stack">
<div class="stackAuto">
<h1 id="title" class="stackContent">Wrappers and Nesting</h1>
<h2 id="sub-title" class="stackContent">Demonstrating Multiple Wrapper .stack Rows and Deeper Component Nesting</h1>
</div>
<div id="banner" class="stackContent">
<img width="1100" src="my-banner.png" alt="My Banner" />
</div>
<ul id="nav">
<li class="stackAuto"><a class="stackContent" href="mockup1.html">Basic Mockup</a></li>
<li class="stackAuto"><a class="stackContent" href="mockup2.html">Wrappers and Nesting</a></li>
<li class="stackAuto"><a class="stackContent" href="mockup3.html">Template Variations</a></li>
<li class="stackAuto"><a class="stackContent" href="mockup4.html">Semantic Class Names</a></li>
</ul>
</div>
</div>
</div>
<div id="content" class="stack">
<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>Column Heading</h3>
<p>Side column sample content</p>
</div>
</div>
</div>
<div id="footer" class="stack">
<div class="stackAuto">
<div class="stackContent">
&copy; 2011 Your Name here
</div>
</div>
<div class="stackAuto">
<div class="stackContent">
<a href="#">License</a>
</div>
</div>
<div class="stackAuto">
<div id="twitter" class="stackContent">
<a href="#">Follow me on Twitter</a>
</div>
</div>
</div>
</div>
<!-- you'll need this meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- this will attach style_mobile.css when the display is less than 767px wide -->
<link rel="stylesheet" media="handheld, only screen and (max-width: 767px)" type="text/css" href="style_mobile.css" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment