Kitchen Sink Markup (for Magento)

magento-kitchen.html

<div class="kitchen-sinks">
    <section>
        <h6 class="grey">Page Titles</h6>
        <div class="page-title">
            <h1>Page Title Here</h1>
        </div>
    </section>

    <section>
        <h6 class="grey">Typography</h6>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>

        <p>Paragraph Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.</p>

        <p>Paragraph Text: <a href="#anchor" title="Anchor Title">Lorem ipsum dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat. Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <ul>
            <li>Unordered list item</li>
            <li>Unordered list item</li>
            <li>Unordered list item
                <ul>
                    <li>Nested list item</li>
                    <li>Nested list item</li>
                    <li>Nested list item with an <a href="#anchor" title="Anchor Title">Anchor</a></li>
                </ul>
            </li>
        </ul>
        <ol>
            <li>Ordered list item</li>
            <li>Ordered list item
                <ol>
                    <li>Nested list item</li>
                    <li>Nested list item</li>
                    <li>Nested list item with an <a href="#anchor" title="Anchor Title">Anchor</a></li>
                </ol>
            </li>
            <li>Ordered list item</li>
            <li>Ordered list item last</li>
        </ol>
    </section>

    <section>
        <h6 class="grey">Messages</h6>
        <ul class="messages">
            <li class="notice-msg">
                <ul>
                    <li>Notice: Please enable cookies in your web browser to continue.</li>
                </ul>
            </li>
            <li class="error-msg">
                <ul>
                    <li>Error Message.</li>
                </ul>
            </li>
            <li class="success-msg">
                <ul>
                    <li>Success message.</li>
                </ul>
            </li>
        </ul>

    </section>

    <section>
        <h6 class="grey">Forms</h6>
        <ul class="form-list">
            <li class="field">
                <label class="required" for="firstname">First Name<em>*</em></label>
                <div class="input-box">
                    <input type="text" id="firstname" name="firstname" value="" title="First Name" maxlength="255" class="input-text required-entry" autocomplete="off">
                </div>
            </li>
            <li class="field">
                <label for="optional-1">Field (Optional)</label>
                <div class="input-box">
                    <input id="optional-1" name="optional-1" class="input-text" type="text">
                </div>
            </li>
            <li class="fields">
                <div class="field">
                    <label class="required" for="firstname-2">First Name<em>*</em></label>
                    <div class="input-box validation-error">
                        <input type="text" id="firstname-2" name="firstname" value="" title="First Name" maxlength="255" class="input-text required-entry validation-failed" autocomplete="off">
                        <div class="validation-advice" id="advice-required-entry-email">This is a required field.</div>
                    </div>
                </div>
                <div class="field">
                    <label class="required" for="lastname-2">Last Name<em>*</em></label>
                    <div class="input-box validation-error">
                        <input type="text" id="lastname-2" name="firstname" value="" title="First Name" maxlength="255" class="input-text required-entry validation-failed" autocomplete="off">
                        <div class="validation-advice" id="advice-required-entry-email">This is a required field.</div>
                    </div>
                </div>
            </li>
            <li class="fields">
                <div class="field">
                    <label class="required" for="email">Email<em>*</em></label>
                    <div class="input-box">
                        <input type="text" id="email" name="email" value="" title="Email" class="input-text validate-email required-entry" autocomplete="off">
                    </div>
                </div>
                <div class="field">
                    <label class="required" for="email-2">Email 2<em>*</em></label>
                    <div class="input-box">
                        <input type="text" id="email-2" name="email" value="" title="Email" class="input-text validate-email required-entry" autocomplete="off">
                    </div>
                </div>
            </li>
            <li class="field">
                <label for="textarea">Text Area</label>
                <div class="input-box">
                    <textarea name="textarea" id="textarea" cols="30" rows="10" class="input-text"></textarea>
                </div>
            </li>
            <li class="control">
                <div class="input-box">
                    <input type="checkbox" name="is_subscribed" title="Sign Up for Newsletter" value="1" id="is_subscribed" class="radio" autocomplete="off">
                </div>
                <label for="is_subscribed">Sign Up for Newsletter</label>
            </li>
            <li class="control">
                <div class="input-box">
                    <input type="checkbox" name="is_subscribed" title="Sign Up for Newsletter" value="1" id="is_subscribed-2" class="radio" autocomplete="off">
                </div>
                <label for="is_subscribed-2">Sign Up for Newsletter</label>
            </li>
            <li class="control">
                <div class="input-box">
                    <input type="checkbox" id="checkbox-1" name="checkbox_1" class="checkbox">
                </div>
                <label for="checkbox-1">Check Box Styles</label>
            </li>
            <li class="control">
                <div class="input-box">
                    <input type="checkbox" id="checkbox-2"  name="checkbox_2" class="checkbox">
                </div>
                <label for="checkbox-1">Check Box Styles</label>
            </li>
            <li class="field">
                <label for="select-choice">Select Menu</label>
                <div class="input-box">
                    <select name="select-choice" id="select-choice" class="styled-select">
                        <option value="Choice 1">Choice 1</option>
                        <option value="Choice 2">Choice 2</option>
                        <option value="Choice 3">Choice 3</option>
                    </select>
                </div>
            </li>
            <li class="field">
                <label for="select-choice-d">Select Menu (disabled)</label>
                <div class="input-box">
                    <select name="select-choice" id="select-choice-d" class="styled-select" disabled>
                        <option value="Choice 1">Choice 1</option>
                        <option value="Choice 2">Choice 2</option>
                        <option value="Choice 3">Choice 3</option>
                    </select>
                </div>
            </li>
            <li class="field">
                <label for="select-choice-r">Select Menu (readonly)</label>
                <div class="input-box">
                    <select name="select-choice" id="select-choice-r" class="styled-select" readonly>
                        <option value="Choice 1">Choice 1</option>
                        <option value="Choice 2">Choice 2</option>
                        <option value="Choice 3">Choice 3</option>
                    </select>
                </div>
            </li>
        </ul>
    </section>

    <section>
        <h6 class="grey">Buttons</h6>
        <div class="buttons-set">
            <p>
                <button class="button primary"><span><span>Button</span></span></button>
                <button class="button primary" disabled><span><span>Button</span></span></button>
                <a class="button primary" href="#"><span>Anchor Button</span></a>
            </p>
            <p>
                <button class="button utility"><span><span>Button</span></span></button>
                <button class="button utility" disabled><span><span>Button</span></span></button>
                <a class="button utility" href="#"><span>Anchor Button</span></a>
            </p>
            <p>
                <button class="button utility"><span><span>Button</span></span></button>
            </p>
            <p class="back-link"><a class="back-link" href="#back">Back</a></p>
        </div>
    </section>

    <section>
        <h6 class="grey">Tabs</h6>
    </section>

    <section>
        <h6 class="grey">Tables</h6>
        <table class="data-table stacked">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr class="even">
                    <td data-header="Name">Abc Product</td>
                    <td data-header="Description">This is a sample description of the Abc Product.  Enjoy!</td>
                    <td data-header="Price"><span>$9.99</span></td>
                </tr>
                <tr class="odd">
                    <td data-header="Name">Another Product</td>
                    <td data-header="Description">This is a sample description of the Abc Product.  Enjoy!</td>
                    <td data-header="Price"><span>$12.99</span></td>
                </tr>
                <tr class="even">
                    <td data-header="Name">Another Product #3</td>
                    <td data-header="Description">This is a sample description of the Abc Product.  Enjoy!</td>
                    <td data-header="Price"><span>$12.99</span></td>
                </tr>
            </tbody>
        </table>
    </section>
</div>