Stack Layout mockups

stacklayout-basic-mockup1.html

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

stacklayout-basic-mockup2.html

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

stacklayout-media-queries.html

<!-- 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" />