Cirrus

#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 Title
Frame Subtitle
This is the frame header.
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 text-white margins between the gray boxes is to demonstrate how the frame sub sections are separated.
Frame Footer
Takes up the bottom of the frame.
<div class="frame">
    <div class="frame__header" style="background: #eee; padding: 1rem; margin: 1rem">
        <div class="frame__title u-text-center">Frame Title</div>
        <div class="frame__subtitle u-text-center">Frame Subtitle</div>
        <div class="frame__subtitle u-text-center">This is the frame header.</div>
    </div>
    <div class="frame__body" style="background: #eee; padding: 1rem; margin: 1rem">
        <div class="frame__title u-text-center">Frame Body</div>
        <div class="frame__subtitle u-text-center">
            Insert any component here, including a frame navigation menu using<!-- -->
            <code>frame-nav</code>. The frame will auto-expand and if a specific height is set, a scrollbar will appear
            to take care of overflow.
        </div>
        <blockquote class="u-text-center">
            The text-white margins between the gray boxes is to demonstrate how the frame sub sections are separated.
        </blockquote>
    </div>
    <div class="frame__footer" style="background: #eee; padding: 1rem; margin: 1rem">
        <div class="frame__title u-text-center">Frame Footer</div>
        <div class="frame__subtitle u-text-center">Takes up the bottom of the frame.</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.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<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>
            <h6 class="frame__title">John Doe</h6>
            <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="divider m-0"></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="divider m-0"></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.

Super Awesome Group Chat

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-2">
            <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 text-white">Elk</p>
                    <p class="tile__subtitle m-0">Hey guys.</p>
                </div>
            </div>
        </div>
        <div class="my-2">
            <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-2">
            <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 text-white">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-2">
            <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-2">
            <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 text-white">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--sm 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="u-inline-block 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--sm">Send</button>
        </div>
    </div>
</div>

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

John Doe

Former youngest person on Earth

Twitter

@johndoe

Instagram

@johndoe

Email

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>
        <h6 class="u-text-center frame__title">John Doe</h6>
        <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>