Main content

Since 14, we standardized our structure.

Your application will be directly injected into the #content div.

<header>
        <div class="header-left">
                <!-- apps menu -->
        </div>
        <div class="header-right">
                <!-- search - contactsmenu - settingsmenu - ... -->
        </div>
</header>
<div id="content" class="app-YOURAPPID">
        <div id="app-navigation" class="">
                <div class="app-navigation-new">
                        <!-- app 'new' button -->
                </div>
                <ul id="usergrouplist">
                        <!-- app navigation -->
                </ul>
                <div id="app-settings">
                        <!-- app settings -->
                </div>
        </div>
        <div id="app-content">
                <div id="app-navigation-toggle" class="icon-menu"></div>
                <!-- app-content-wrapper is optional, only use if app-content-list  -->
                <div id="app-content-wrapper">
                        <div class="app-content-list">
                                <!-- app list -->
                        </div>
                        <div class="app-content-details"></div>
                        <!-- app content -->
                </div>
        </div>
        <div id="app-sidebar"></div>
</div>

Rules and information

  • You cannot nor need to modify the header or the outside elements of your application.

  • The whole body needs to scroll to be compatible with the mobile views. Therefore the sidebar and the app-navigation are fixed/sticky.

  • Unless your application does not require a scrollable area, do not use any overflow properties on the parents of your content.

  • The app-navigation-toggle is automatically injected. The navigation hide/show is automatically managed.

  • Do not use #content-wrapper anymore

  • If your app is injecting itself by replacing the #content element, make sure to keep the #content id

  • If you use the app-content-list standard, the app-content-details div will be hidden in mobile mode (full screen). You will need to add the showdetails class to the app-content-list to show the main content. On mobile view, the whole list/details section (depending on which is shown) will scroll the body