Page Layouts
Back to top

Page Layouts

  1. Home
  2. Card Documetation

Description

Robust Admin provides different types of page layouts i.e: 1 Column, 2 Column, Content Sidebar, Content Detached Sidebar, Fixed, Static, Boxed, Light & Dark etc...

Below you can find how to use these layouts. We have provided CSS Classes, HTML Markup & Jade configuration for usage.

TIP: These classes and markup are flexible can be remixed and extended with ease.

1 Column

CSS Classes

This table contains all classes related to the 1 column layout. This is a custom layout for full width page requirements.

All these options can be set via following classes:

Classes Description
.1-column You can create 1 column layout by adding .1-column class in <body> tag.

HTML Markup

This section contains HTML Markup to create 1 column layout. You need to add the .1-column class in the <body> tag as show in below markup on line no 4. Please note that 1 column layout do not have Navigation section and it has back to Dashboard or Home page link in Navbar.

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

            
                <!DOCTYPE html>
                  <html lang="en">
                    <head></head>
                    <body data-menu="vertical-menu" class="vertical-layout vertical-menu 1-column menu-expanded">
    
                      <!-- navbar-fixed-top-->
                      <nav role="navigation" class="header-navbar navbar navbar-with-menu navbar-fixed-top navbar-dark navbar-shadow navbar-border">
                        .....
                      </nav>
    
                      <!-- BEGIN Content-->
                      <div class="content robust-content container-fluid">
                        .....
                      </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 1 column layout.

Variable Value Description
contentLayout '1-column' You need to set contentLayout variable value as '1-column' in pageConfig block.
JADE Code

To generate 1 column layout page or template, you need to use following JADE code.

Line no 19-23: pageConfig block has a template specific configuration variables, in that for 1 column layout need to define variable - var contentLayout = '1-column'

Line no 25-26: For that need to add headerConfig block with headerCustom.

Line no 30-31: As mentioned above this template do not have a navigation, so it should have back to Dashboard or Home link to navigate. In last this template also need custom navbar with back to dashboard or home link. For that need to use header block with custom jade page header-back.jade,
You can also customize or change this jade file as per your requirements.

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 1 column layout-1-column.jade, however you can use it on template level but it will generate whole template as a 1 column.

                  
                        block pageVars
                            - var pageTitle    = "1 Column"
                            - var pageSubTitle = "Full width 1 column layout"
                            - var description  = "The full width 1 column layout with only content section."
                            - var activeMenu   = "layout-1-column"

                        extends template

                        append pageConfig
                            - var contentLayout = '1-column'
                            - var headerType = 'header-back'

                        append breadcrumbs
                            +breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Page Layouts"}, {name:"1 Column"}])

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

                        //- Vendor CSS
                        append vendorcss
                            link(rel='stylesheet', type='text/css', href='../app-assets/vendors/css/ui/prism.min.css')

                        //- Vendor JS
                        //------------------------------
                        //- Add vendor specific JS
                        append vendorjs
                            script(src='../app-assets/vendors/js/ui/prism.min.js', type='text/javascript')
Refer following links for detailed documentation, configuration options, methods and examples:
Type URL
1 Column Layout http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/layout-1-column.html