App Layout
Divides the application interface layout into several parts.
Example
Theme
Default
Default
Light
Dark
Scale
Medium
Large
Medium
Small
Sidebar
Topbar
Content
<div class="ts-box">
    <div class="ts-app-layout is-horizontal">
        <div class="cell">
            <div class="ts-content">Sidebar</div>
        </div>
        <div class="cell is-fluid is-vertical">
            <div class="cell">
                <div class="ts-content">Topbar</div>
            </div>
            <div class="cell">
                <div class="ts-content">Content</div>
            </div>
        </div>
    </div>
</div>
Introduction

This is a component designed for applications.

It’s usually be treated as a top-level element that wraps the main content.

Also it is often being used along with the Sidebar and Navbar.

Variations
Horizontal

The cells are arranged horizontally from left to right.

Left
Center
Right
<div class="ts-box">
    <div class="ts-app-layout is-horizontal">
        <div class="cell is-fluid">
            <div class="ts-content">Left</div>
        </div>
        <div class="cell is-fluid">
            <div class="ts-content">Center</div>
        </div>
        <div class="cell is-fluid">
            <div class="ts-content">Right</div>
        </div>
    </div>
</div>
Vertical

The cells are arranged vertically from top to bottom.

Top
Middle
Bottom
<div class="ts-box">
    <div class="ts-app-layout is-vertical">
        <div class="cell">
            <div class="ts-content">Top</div>
        </div>
        <div class="cell">
            <div class="ts-content">Middle</div>
        </div>
        <div class="cell">
            <div class="ts-content">Bottom</div>
        </div>
    </div>
</div>
Full

Fits the height, width of the parent container. Usually used if you want the layout to cover the whole page.

Cell
<div class="ts-box">
    <div class="ts-app-layout is-full is-horizontal">
        <div class="cell">
            <div class="ts-content">Cell</div>
        </div>
    </div>
</div>
Cell Variations
Fluid

A cell is default with a width that fits its own content. A fluid cell will take the remaining space of the layout.

Default
Fluid
<div class="ts-box">
    <div class="ts-app-layout is-horizontal">
        <div class="cell">
            <div class="ts-content">Default</div>
        </div>
        <div class="cell is-fluid">
            <div class="ts-content">Fluid</div>
        </div>
    </div>
</div>
Horizontal

The cells are arranged horizontally from left to right.

Top
Left
Center
Right
<div class="ts-box">
    <div class="ts-app-layout is-vertical">
        <div class="cell">
            <div class="ts-content">Top</div>
        </div>
        <div class="cell is-horizontal">
            <div class="cell is-fluid">
                <div class="ts-content">Left</div>
            </div>
            <div class="cell is-fluid">
                <div class="ts-content">Center</div>
            </div>
            <div class="cell is-fluid">
                <div class="ts-content">Right</div>
            </div>
        </div>
    </div>
</div>
Vertical

The cells are arranged vertically from top to bottom.

Left
Top
Middle
Bottom
<div class="ts-box">
    <div class="ts-app-layout is-horizontal">
        <div class="cell">
            <div class="ts-content">Left</div>
        </div>
        <div class="cell is-vertical is-fluid">
            <div class="cell">
                <div class="ts-content">Top</div>
            </div>
            <div class="cell">
                <div class="ts-content">Middle</div>
            </div>
            <div class="cell">
                <div class="ts-content">Bottom</div>
            </div>
        </div>
    </div>
</div>
Scrollable

Allows the cell to be scrollable if the content is overflowed.

Header

Fusce non enim egestas, lobortis diam et, congue felis.

Rhoncus est sed laoreet facilisis. Suspendisse ante odio,

pulvinar non nulla sed, consequat lacinia risus.

Aliquam mollis pulvinar lorem sed efficitur.

Footer
<div class="ts-box">
    <div class="ts-app-layout is-vertical" style="height: 260px;">
        <div class="cell">
            <div class="ts-content">Header</div>
        </div>
        <div class="cell is-scrollable is-fluid">
            <div class="ts-content">
                <p>Fusce non enim egestas, lobortis diam et, congue felis.</p>
                <p>Rhoncus est sed laoreet facilisis. Suspendisse ante odio,</p>
                <p>pulvinar non nulla sed, consequat lacinia risus.</p>
                <p>Aliquam mollis pulvinar lorem sed efficitur.</p>
            </div>
        </div>
        <div class="cell">
            <div class="ts-content">Footer</div>
        </div>
    </div>
</div>
Secondary

A secondary background tone to presents it’s not the main content section.

Sidebar
Content
<div class="ts-box">
    <div class="ts-app-layout is-horizontal">
        <div class="cell is-secondary">
            <div class="ts-content">Sidebar</div>
        </div>
        <div class="cell is-fluid">
            <div class="ts-content">Content</div>
        </div>
    </div>
</div>
Tertiary

Background with a tertiary color stands out the main subject.

Sidebar
Hello, my friend!
<div class="ts-box">
    <div class="ts-app-layout is-horizontal">
        <div class="cell">
            <div class="ts-content">Sidebar</div>
        </div>
        <div class="cell is-tertiary is-fluid">
            <div class="ts-content">
                <div class="ts-segment">
                    Hello, my friend!
                </div>
            </div>
        </div>
    </div>
</div>
Compositions

You can easily create a single-page application layout by combining with the Sidebar and Navbar.

TEACAT DEVELOPERS
VERSION 1.3.4
<div class="ts-box">
    <div class="ts-app-layout is-horizontal">
        <div class="cell" style="width: 245px;">
            <div class="ts-content">
                <div class="ts-header is-big is-heavy">
                    TEACAT DEVELOPERS
                </div>
                <div class="ts-text is-description is-heavy">
                    VERSION 1.3.4
                </div>
            </div>
            <div class="ts-app-sidebar">
                <div class="header">
                    STARTUP
                </div>
                <a class="item">
                    <span class="ts-icon is-house-icon"></span> Home
                </a>
                <div class="header">
                    MANAGEMENT
                </div>
                <a class="item is-active">
                    <span class="ts-icon is-user-icon"></span> Users
                </a>
                <a class="item">
                    <span class="ts-icon is-download-icon"></span> Downloads
                </a>
                <div class="header">
                    SYSTEM
                </div>
                <a class="item">
                    <span class="ts-icon is-gears-icon"></span> Preferences
                </a>
            </div>
            <div class="ts-content">
                <button class="ts-button is-outlined is-fluid">
                    Logout
                </button>
            </div>
        </div>
        <div class="cell is-fluid is-vertical">
            <div class="cell is-fluid is-secondary"></div>
            <div class="cell">
                <div class="ts-content">
                    <div class="ts-app-navbar is-fluid">
                        <a class="item">
                            <div class="ts-icon is-user-icon"></div>
                            <div class="label">Users</div>
                        </a>
                        <a class="item">
                            <div class="ts-icon is-house-icon"></div>
                            <div class="label">Home</div>
                        </a>
                        <a class="item is-active">
                            <div class="ts-icon is-newspaper-icon"></div>
                            <div class="label">News</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Looking for similar components?
Designed by Yami Odymel from Taiwan with the love of the contributors ❤️. The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co.
Translators: Yami Odymel