#Frames

Frames are designed similar to cards, but provide more flexibility to the developer to align items in a structured layout.

#Basics

The structure of the frame only consists of a couple of sections.

Structure

frame
- frame__header
  - frame__title
  - frame__subtitle
- frame__body
- frame__footer

Frame Body

Insert any component here, including a frame navigation menu using frame-nav. The frame will auto-expand and if a specific height is set, a scrollbar will appear to take care of overflow.

The white margins bettween the gray boxes is to demonstrate how the frame sub sections are separated.

<div class="frame">
    <div class="frame__header u-text-center">
        <div>
            <figure class="avatar"><img src="https://orig04.deviantart.net/aded/f/2013/066/c/2/profile_picture_by_naivety_stock-d5x8lbn.jpg"></figure>
        </div>
        <div>
            <div class="frame__title">John Doe</div>
            <div class="frame__subtitle">Freelance Photographer</div>
        </div>
        <div class="row"><a class="col" href="!#"><i class="fa fa-wrapper fa-facebook link-btn" aria-hidden="true"></i></a><a class="col" href="#"><i class="fa fa-wrapper fa-twitter link-btn" aria-hidden="true"></i></a><a class="col" href="#"><i class="fa fa-wrapper fa-instagram link-btn" aria-hidden="true"></i></a><a class="col" href="#"><i class="fa fa-wrapper fa-medium link-btn" aria-hidden="true"></i></a></div>
    </div>
    <div class="content-no-padding">
        <div class="divider m-0"></div>
    </div>
    <div class="frame__body">
        <div class="content u-text-center">
            <h5>Lorem! Ipsum!</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        </div>
    </div>
    <div class="content-no-padding">
        <div class="divider m-0"></div>
    </div>
    <div class="frame__footer">
        <div class="frame__subtitle u-text-center"><i>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</i></div>
    </div>
</div>

#Examples

Below are some examples for inspiration.

John Doe

Freelance Photographer

Lorem! Ipsum!

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

<div class="frame">
    <div class="frame__header u-text-center">
        <div>
            <figure class="avatar"><img src="https://orig04.deviantart.net/aded/f/2013/066/c/2/profile_picture_by_naivety_stock-d5x8lbn.jpg"></figure>
        </div>
        <div>
            <div class="frame__title">John Doe</div>
            <div class="frame__subtitle">Freelance Photographer</div>
        </div>
        <div class="row"><a class="col" href="#"><i class="fa fa-wrapper fa-facebook link-btn" aria-hidden="true"></i></a><a class="col" href="#"><i class="fa fa-wrapper fa-twitter link-btn" aria-hidden="true"></i></a><a class="col" href="#"><i class="fa fa-wrapper fa-instagram link-btn" aria-hidden="true"></i></a><a class="col" href="#"><i class="fa fa-wrapper fa-medium link-btn" aria-hidden="true"></i></a></div>
    </div>
    <div class="content-no-padding">
        <div class="divider m-0"></div>
    </div>
    <div class="frame__body">
        <div class="content u-text-center">
            <h5>Lorem! Ipsum!</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
        </div>
    </div>
    <div class="content-no-padding">
        <div class="divider m-0"></div>
    </div>
    <div class="frame__footer">
        <div class="frame__subtitle u-text-center"><i>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</i></div>
    </div>
</div>

This one demonstrates overflow on the y-axis with tiles.

Elk

Hey guys.

Tony

What's up?

Elk

I started working on a new webapp. However I'm pretty lazy when it comes to designing from the ground up. Anyone know any good CSS frameworks for rapid prototyping?

Tony

Check out Cirrus. https://spiderpig86.github.io/Cirrus

Elk

Just what I needed.

<div class="frame" style="height: 30rem;">
    <div class="frame__header" style="box-shadow: rgba(85, 85, 85, 0.1) 0px 2px 3px;">
        <div class="frame__title title m-0">Super Awesome Group Chat</div>
    </div>
    <div class="frame__body">
        <div class="space"></div>
        <div class="my-1">
            <div class="tile tile--center m-0">
                <div class="tile-icon">
                    <figure class="avatar img-small" data-text="El"></figure>
                </div>
                <div class="tile__container">
                    <p class="tile__title m-0">Elk</p>
                    <p class="tile__subtitle m-0">Hey guys.</p>
                </div>
            </div>
        </div>
        <div class="my-1">
            <div class="tile tile--center m-0">
                <figure class="avatar img-small"><img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png"></figure>
                <div class="tile__container">
                    <p class="tile__title m-0">Tony</p>
                    <p class="tile__subtitle m-0">What's up?</p>
                </div>
            </div>
        </div>
        <div class="my-1">
            <div class="tile tile--center m-0">
                <div class="tile-icon">
                    <figure class="avatar img-small" data-text="El"></figure>
                </div>
                <div class="tile__container">
                    <p class="tile__title m-0">Elk</p>
                    <p class="tile__subtitle m-0">I started working on a new webapp. However I'm pretty lazy when it comes to designing from the ground up. Anyone know any good CSS frameworks for rapid prototyping?</p>
                </div>
            </div>
        </div>
        <div class="my-1">
            <div class="tile tile--center m-0">
                <div class="tile-icon">
                    <figure class="avatar img-small"><img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png"></figure>
                </div>
                <div class="tile__container">
                    <p class="tile__title m-0">Tony</p>
                    <p class="tile__subtitle m-0">Check out Cirrus. <a href="https://spiderpig86.github.io/Cirrus">https://spiderpig86.github.io/Cirrus</a></p>
                </div>
            </div>
        </div>
        <div class="my-1">
            <div class="tile tile--center m-0">
                <div class="tile-icon">
                    <figure class="avatar img-small" data-text="El"></figure>
                </div>
                <div class="tile__container">
                    <p class="tile__title m-0">Elk</p>
                    <p class="tile__subtitle m-0">Just what I needed.</p>
                </div>
                <div class="tile__buttons"><a href="#"><i class="fa fa-wrapper fa-ellipsis-v small" aria-hidden="true"></i></a></div>
            </div>
        </div>
    </div>
    <div class="frame__footer">
        <div class="form-group input-control">
            <input type="text" class="form-group-input input-small input-contains-icon" placeholder="Send a message"><span class="icon"><a href="#"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" class="svg-inline--fa fa-plus fa-w-14 fa-wrapper small" role="img" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></a></span>
            <button class="btn-primary form-group-btn btn-small">Send</button>
        </div>
    </div>
</div>

This one uses different components (tabcontrol, card tiles, etc...) inside the frame.

Twitter

@johndoe

Instagram

@johndoe

johndoe@github.com

Location

Toronto, Ontario

<div class="frame" style="height: 30rem;">
    <div class="frame__header">
        <div class="avatar"><img src="https://i.imgur.com/sbKJVxr.png"></div>
        <p class="u-text-center frame__title">John Doe</p>
        <p class="u-text-center frame__subtitle">Former youngest person on Earth</p>
        <div class="tab-container tabs-fill">
            <ul>
                <li class="tab-item"><a>Favorites</a></li>
                <li class="tab-item selected"><a>Profile</a></li>
                <li class="tab-item"><a>Pins</a></li>
            </ul>
        </div>
    </div>
    <div class="frame__body">
        <div class="tile level r">
            <div class="tile-avatar"><span class="icon"><i class="fa fa-wrapper fa-twitter" aria-hidden="true"></i></span></div>
            <div class="tile__container">
                <p class="tile__title">Twitter</p>
                <p class="tile__subtitle">@johndoe</p>
            </div>
            <div class="tile__buttons"><a href="#" class="link-btn"><span class="icon"><i class="fa fa-wrapper fa-pencil small" aria-hidden="true"></i></span></a></div>
        </div>
        <div class="tile level r">
            <div class="tile-avatar"><span class="icon"><i class="fa fa-wrapper fa-instagram" aria-hidden="true"></i></span></div>
            <div class="tile__container">
                <p class="tile__title">Instagram</p>
                <p class="tile__subtitle">@johndoe</p>
            </div>
        </div>
        <div class="tile level r">
            <div class="tile-avatar"><span class="icon"><i class="fa fa-wrapper fa-envelope-o" aria-hidden="true"></i></span></div>
            <div class="tile__container">
                <p class="tile__title">Email</p>
                <p class="tile__subtitle">johndoe@github.com</p>
            </div>
        </div>
        <div class="tile level r">
            <div class="tile-avatar"><span class="icon"><i class="fa fa-wrapper fa-map-marker" aria-hidden="true"></i></span></div>
            <div class="tile__container">
                <p class="tile__title">Location</p>
                <p class="tile__subtitle">Toronto, Ontario</p>
            </div>
        </div>
    </div>
    <div class="frame__footer"></div>
</div>

Cirrus

#Frames

#Basics

Structure

#Examples

Lorem! Ipsum!

Footer

Header