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.
|
This section contains HTML Markup to create 1 column layout. You need to add the .1-columnclass 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.
Stack has a ready to use starter kit, you can use this layout directly by using the starter kit pages from the stack-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>Stack 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.
| Block | Variable | Datatype | Value | Description |
|---|---|---|---|---|
pageConfig
|
contentLayout
|
string
|
'1-column'
|
pageConfigblock 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 headerTypevariable value as 'header-back'in pageConfigblock. You can create your own new header type and set it over here also.
|
JADE Code
To generate 1 column layout page or template, you need to use following JADE code.
Line no 20-22:pageConfigblock has a page configuration variables, in that for 1 column layout need to define variable - var contentLayout = '1-column'
Line no 22:pageConfigblock 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 headerTypeand value will be 'header-back'. 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 jade 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 //------------------------------ //- 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