Main content

Since 14, we standardized our structure.

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

  1. <header>
  2.         <div class="header-left">
  3.                 <!-- apps menu -->
  4.         </div>
  5.         <div class="header-right">
  6.                 <!-- search - contactsmenu - settingsmenu - ... -->
  7.         </div>
  8. </header>
  9. <div id="content" class="app-YOURAPPID">
  10.         <div id="app-navigation" class="">
  11.                 <div class="app-navigation-new">
  12.                         <!-- app 'new' button -->
  13.                 </div>
  14.                 <ul id="usergrouplist">
  15.                         <!-- app navigation -->
  16.                 </ul>
  17.                 <div id="app-settings">
  18.                         <!-- app settings -->
  19.                 </div>
  20.         </div>
  21.         <div id="app-content">
  22.                 <div id="app-navigation-toggle" class="icon-menu"></div>
  23.                 <!-- app-content-wrapper is optional, only use if app-content-list  -->
  24.                 <div id="app-content-wrapper">
  25.                         <div class="app-content-list">
  26.                                 <!-- app list -->
  27.                         </div>
  28.                         <div class="app-content-details"></div>
  29.                         <!-- app content -->
  30.                 </div>
  31.         </div>
  32.         <div id="app-sidebar"></div>
  33. </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