1. Home
  2. Page Layouts
  3. 1 Column

1 Column

Full width 1 column layout

Advanced CardButtons Extended

The full width 1 column layout with only content section.

Description

1 Column layout is very useful for full width page requirements i.e: Contact us, Terms & Condition, Privacy policy etc..., It has Navbar with back to dashboard/home page option and footer, navigation menu will not be displayed on this layout.

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   = "1-column-layout"

                  extends template

                  block pageConfig
                    - var templateCustom = "vertical-layout vertical-menu" //- OPTIONS: menu-flipped
                    - var dataMenu = "vertical-menu"
                    - var boxedLayout = false  //- OPTIONS:- true, false
                    - var contentLayout = '1-column'

                  block headerConfig
                    - var headerCustom = "navbar-fixed-top navbar-dark navbar-shadow navbar-border"

                  //- Template includes
                  //-------------------
                  block header
                    include ../templates/sections/header/header-back


                  append breadcrumbs
                    include ../includes/mixins
                    +breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Starters"}, {name:"1 Column"}])

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

                  //- Include page content in page block
                  append content
                    include ../contents/1-column-layout.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(src='robust-assets/js/plugins/ui/prism.min.js', type='text/javascript')