Overview

Layouts are page layouts built using components and elements. A properly structured layout enforces an optimal and consistent experience across interfaces.

When selecting a layout find you'll have to consider:

  • The main tasks that a user needs to accomplish and all necessary information for making decisions
  • The priorities and features of those tasks and information.

Page structure done

The full page structure is as follows:

<div c8y-main-app><!-- app wrapper -->
    <div><!-- mainController.authState.hasAuth -->
      <div class="header"></div> <!-- header component -->
      <div class="navigator"></div><!-- navigator component -->
      <div class="alerts"></div><!-- alert messages wrapper -->
      <div class="mcontainer"><!-- layouts wrapper -->
        <c8y-ui-tabs></c8y-ui-tabs> <!-- tabs both vertical and horizontal -->
        <c8y-ui-action-bar></c8y-ui-action-bar><!-- action bar -->
        <div class="container-fluid"></div> <!-- main content -->
      </div>
    </div>
  </div>

The .mcontainer wraps the c8y-ui-tabs component, the c8y-ui-action-bar component and a .container-fluid. It adjusts page size and margins according to tabs and the state of the collapsible navigator.

All layouts are nested in the .container-fluid — a full-width container optimized for using the grid system, so you don't have to worry about either margins or paddings.

Keep in mind that some layouts may use horizontal tabs, vertical tabs or no tabs at all, which influences the available width of the page.