1. Home
  2. Page Layouts
  3. Static Layout

Static Layout

Static layout with navigation

Advanced CardButtons Extended

The static layout page structure have fixed navbar, navigation and footer.

Description

Staic layout is useful for those platform having less menu options and content sections weher user required to scroll less.

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 sk-static.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 layout-static.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   = "layout-static"

                  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/layout-static.html

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

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

                  //- Add custom page specific JS
                  block pagejs
                    script(type='text/javascript' ,src='robust-assets/js/plugins/ui/prism.min.js')