Static Layout
Back to top

Static Layout

  1. Home
  2. Page Layouts
  3. Static Layout

Static Layout

CSS Classes

Default this template has a static layout elements, so there is no any specific classes need to add to create this layout.

To create this layout just need to confirm .navbar-fixed-top, .menu-fixed and .footer-fixed not applied to their respective element, in short do not use fixed layout classes.

HTML Markup

This section contains HTML Markup to create static layout. No need to add any specific classes just do not use fixed layout classes. This layout has a navigation, content and left sidebar sections with common header & footer.

Robust has a ready to use starter kit, you can use this layout directly by using the static-layout.html

            
                <!DOCTYPE html>
                  <html lang="en">
                    <head></head>
                    <body data-menu="vertical-menu" class="vertical-layout vertical-menu content-left-sidebar menu-expanded">

                      <!-- navbar-fixed-top-->
                      <nav role="navigation" class="header-navbar navbar navbar-with-menu navbar-dark navbar-shadow navbar-border">
                          ...
                      </nav>

                      <!-- BEGIN Navigation-->
                      <div class="main-menu menu-dark menu-shadow">
                          ...
                      </div>
                      <!-- END Navigation-->

                      <!-- BEGIN Content-->
                      <div class="content robust-content container-fluid">
                          <div class="content-wrapper">
                              <!-- content header-->
                              <div class="content-header row">
                                  ...
                              </div>
                              <!-- content header-->

                              <!-- content body-->
                              <div class="content-body">
                                  ...
                              </div>
                              <!-- content body-->

                          </div>
                      </div>
                      <!-- END Content-->

                      <!-- START FOOTER DARK-->
                      <footer class="footer footer-dark">
                          ...
                      </footer>
                      <!-- START FOOTER DARK-->

                    </body>
                  </html>

JADE Configuration

Robust Admin use JADE as template engine to generate pages and whole template quickly using node js, for getting start with JADE usage & template generating process please refer template documentation.

JADE Variables

This table contains required JADE variables to generate static layout.

If you want to use this layout on page level you need to define it on page it self. This template has one example jade file for static static-layout.jade, however you can use it on template level but it will generate whole template as a static.

                  
                      block pageVars
                        - var pageTitle    = "Static Layout"
                        - var pageSubTitle = "Static layout with navigation"
                        - var description  = "Static layout page structure have fixed navbar, navigation and footer."
                        - var activeMenu   = "static-layout"

                      extends template

                      block headerConfig
                        - var headerCustom = "navbar-dark navbar-shadow navbar-border" //- OPTIONS: navbar-dark, navbar-light, navbar-semi-dark, navbar-fixed-top, navbar-hide-on-scroll, navbar-border, navbar-shadow

                      block menuConfig
                        - var menuCustom = "menu-dark menu-shadow" //- OPTIONS : menu-border, menu-native-scroll, menu-icon-right menu-fixed

                      block footerConfig
                        - var footerCustom = "footer-dark" //- OPTIONS: footer-dark, footer-transparent, footer-fixed

                      append breadcrumbs
                        include ../includes/mixins
                        +breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Page Layouts"}, {name:"Static Layout"}])

                      append page-header
                        include page-headers/breadcrumb-top

                      //- Include page content in page block
                      append content
                        include ../contents/static-layout.html

                      //- Page specific dependency
                      //------------------------------

                      //- Add custom page specific CSS
                      block pagecss
                        link(rel='stylesheet', type='text/css', href='../app-assets/css/plugins/ui/prism.min.css')

                      //- Add custom page specific JS
                      block pagejs
                        script(type='text/javascript' ,src='../app-assets/vendors/js/ui/prism.min.js')
Refer following links for detailed documentation, configuration options, methods and examples:
Type URL
Static Layout http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/layout-static.html