<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>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.
The cells are arranged horizontally from left to 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>The cells are arranged vertically from top to 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>Fits the height, width of the parent container. Usually used if you want the layout to cover the whole page.
<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>A cell is default with a width that fits its own content. A fluid cell will take the remaining space of the layout.
<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>The cells are arranged horizontally from left to 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>The cells are arranged vertically from top to 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>Allows the cell to be scrollable if the content is overflowed.
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.
<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>A secondary background tone to presents it’s not the main content section.
<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>Background with a tertiary color stands out the main subject.
<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><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>