1 Column

  1. Home
  2. Page Layouts
  3. 1 Column
Calender Cart Support
Settings

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.

Modern has a ready to use starter kit, you can use this layout directly by using the starter kit pages from the modern-admin/starter-kit folder.

        
            <!DOCTYPE html>
              <html lang="en">
                <head></head>
                <body data-menu="vertical-menu" class="vertical-layout vertical-menu 1-column menu-expanded">
                  <!-- fixed-top-->
                  <nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu fixed-top navbar-dark navbar-shadow navbar-border">
                    .....
                  </nav>
                  <!-- BEGIN Content-->
                  <div class="content app-content">
                    .....
                  </div>
                  <!-- END Content-->
                  <!-- START FOOTER DARK-->
                  <footer class="footer footer-dark">
                    .....
                  </footer>
                  <!-- START FOOTER DARK-->
                </body>
              </html>

PUG Configuration

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

PUG Variables

This table contains required PUG variables to generate 1 column layout.

Block Variable Datatype Value Description
pageConfig contentLayout string '1-column' pageConfig block has a page configuration variables, for 1 column layout you need to define variable - var contentLayout = '1-column'
pageConfig headerType string 'header-back' You need to set headerType variable value as 'header-back' in pageConfig block. You can create your own new header type and set it over here also.
PUG Code

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

Line no 20-22: pageConfig block has a page configuration variables, in that for 1 column layout need to define variable - var contentLayout = '1-column'

Line no 22: pageConfig block has a page configuration variables, in that for header-back custom navbar you need to define variable - var headerType = 'header-back'

As mentioned above this template do not have a navigation, so it should have back to Dashboard or Home link to navigate. This template also need custom navbar with back to dashboard or home link, for custom navbar use this variable headerType and value will be 'header-back'. You can also customize or change this pug file as per your requirements.

If you want to use this layout on page level you need to define it on pug page it self. This template has one example pug file for 1 column layout-1-column.pug, 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
                //------------------------------
                //- Add Vendor specific CSS
                append vendorcss
                //- Page CSS
                //------------------------------
                //- Add custom page specific CSS
                append pagecss
                //- Vendor JS
                //------------------------------
                //- Add vendor specific JS
                append vendorjs                    
                //- Page JS
                //------------------------------
                //- Add custom page specific JS
                append pagejs