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 you application does not require a scrollable area, not 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, theapp-content-details
div will be hidden in mobile mode (full screen). You will need to add theshowdetails
class to theapp-content-list
to show the main content. On mobile view, the whole list/details section (depending on which is shown) will scroll the body