Stack Layout mockup steps

stacklayout-mockup-step1.html

<div id="page">
    <div class="stack">
        <div id="header">
        </div>
        <div id="content">
        </div>
        <div id="footer">
        </div>
    </div>
</div>

stacklayout-mockup-step2.html

        <div id="content">
            <div id="column1" class="stack3of4"> <!-- large column, width:75% -->
            </div>
            <div id="column2" class="stack1of4"> <!-- small column, width:25% -->
            </div>
        </div>

stacklayout-mockup-step3.html

            <div id="column1" class="stack3of4">
                <div class="stackContent">
                    <h2>My Awesome Heading</h2>
                    <p>This is sample content</p>
                </div>
            </div>

stacklayout-mockup-step4.html

           <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>

stacklayout-mockup-step5.html

           <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>

stacklayout-mockup-step6.html

           <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>

stacklayout-mockup-step7.html

        <div id="header">
            <h1 id="title" class="stackContent">Basic Mockup</h1>
            <div id="banner" class="stackContent">
            </div>
            <ul id="nav" class="stackContent">
            </ul>
        </div>

stacklayout-mockup-step8.html

        <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>

stacklayout-mockup-step9.html

        <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>