Create an elegant & responsive website & dashboard using Tapestry as your core CSS framework. Simply copy & paste HTML markup from our UI Showcase directly into your web pages.

How it works

Features

Example Grid

<div class="box size-med">
    <div class="row">
        <div class="col three">
            Row 1, Column 1
        </div>
        <div class="col seven">
            Row 1, Column 2
        </div>
        <div class="col two">
            Row 1, Column 3
        </div>
        <div class="col four">
            Row 2, Column 4
        </div>
        <div class="col four">
            Row 2, Column 5
        </div>
        <div class="col four">
            Row 2, Column 6
        </div>
    </div>
    <div class="row hover">
        <div class="col six">
            Row 3, Column 1
        </div>
        <div class="col six">
            Row 3, Column 2
        </div>
    </div>
</div>

Example Blog Post Form

<div class="box size-sm">
    <div class="row header">
        <div class="col title">New Blog Post</div>
        <div class="col right icon">
            <a href="/dashboard" target="_blank">
                <svg viewBox="0 0 15 15">
                    <use xlink:href="#icon-dashboard" x="0" y="0" width="15" height="15" />
                </svg>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col field-label"></div>
        <div class="col field-text">
            Write a new blog post from the depths of your heart.
        </div>
    </div>
    <div class="row hover">
        <div class="col field-label">Writer</div>
        <div class="col field-input">
            <input type="text" class="short" value="Your full name" />
        </div>
        <div class="col field-icon icon hover-faded">
            <a href="#">
                <svg viewBox="0 0 15 15">
                    <use xlink:href="#icon-help" x="0" y="0" width="15" height="15" />
                </svg>
            </a>
        </div>
    </div>
    <div class="row hover">
        <div class="col field-label">Title</div>
        <div class="col field-input four">
            <input type="text" class="long" value="A new blog post" />
        </div>
        <div class="col field-icon icon hover-faded">
            <a href="#">
                <svg viewBox="0 0 15 15">
                    <use xlink:href="#icon-help" x="0" y="0" width="15" height="15" />
                </svg>
            </a>
        </div>
    </div>
    <div class="row hover">
        <div class="col field-label">Story</div>
        <div class="col field-input four">
            <textarea class="medium"></textarea>
        </div>
        <div class="col field-icon icon hover-faded">
            <a href="#">
                <svg viewBox="0 0 15 15">
                    <use xlink:href="#icon-help" x="0" y="0" width="15" height="15" />
                </svg>
            </a>
        </div>
    </div>
    <div class="row pad">
        <div class="col buttons">
            <a href="#" class="button apply">Apply</a>
            <a href="#" class="button cancel">Cancel</a>
        </div>
    </div>
</div>