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
anymoreIf your app is injecting itself by replacing the #content element, make sure to keep the
#content
idIf 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