home chevron_right Documentation chevron_right Working with Fuse
Page Layouts

One of the strong sides of the Fuse is its Page layouts. Every single app, pre-built page and even this documentation pages uses the Fuse's page layouts.

Simply, page layouts are pre-built layouts with a demo content which you can simply copy/paste and start building your own page or app based on it. Because page layouts, it's very easy to replicate any page style that you can find in Fuse, without needing to remove all the demo functionality from them.

Identifying a Page Layout

You can easily identify the layout that particular page or app using by simply looking at its main html file. The very top wrapper div will tell you everything you need to know:

<div class="page-layout carded left-sidebar"> ... </div>

The above example is using the carded style page with a left sidebar setup which can be found in /ui/page-layouts/carded/left-sidebar-1 directory.

The numbers in the folder names represents the scrolling style of that particular page layout. For example, left-sidebar-1 has the exact same layout with left-sidebar-2 but the former one uses a single scrollbar while the latter one uses separate scrollbars for its content and its sidebar.