CodeLab is a premium Bootstrap 4.1.3 Admin Dashboard Template. It comes with tones of well-designed UI elements, components, widgets, and pages. This template is very lightweight and easy to customize. It can be used to create a saas based interface, custom admin panels, dashboard, CRM, CMS etc. CodeLab helps your team moving faster and saving development costs.
/assets/dev file for the developer where have SASS files and js files. After compiling gulp command /assets/css and /assets/js file create automatically. Minified CSS and JS file also created automatically in CSS and Js folder
. ├── assets │ ├── css/ │ │ ├── main.css | │ ├── main.min.css │ ├── dev/ │ │ ├── js/ │ │ ├── sass/ │ ├── img/ │ ├── js/ │ │ ├── scripts.js │ │ ├── scripts.min.js │ ├── vendor/ │ │ ├── all third party plugins ├── gulpfile.js ├── package.json ├── index.html └── others .html files
Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
In order to utilize Gulp you will need to have installed Node.js on your computer. Also insure that you have NPM (node packaged modules) installed.
Run the following commands
gulp globally by running the command npm install -g gulpnpm install.
Once you have successfully setup now you can use bootkit Gulp CLI commands to automate your task.
gulpThis will automatically create /css folder and /js folder into /assets folder. and it will automatically generate minify version of css and js.
When gulp command runing it will automaically connect to a local server like http://localhost:3000/ and open index.html page to your default browser. And will automatically compile the SASS, JS and .html files on save.
Following is the basic page head which contains metadata, css and javascripts files
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="description" content=""> <meta name="author" content="Mosaddek"> <!--favicon icon--> <link rel="icon" type="image/png" href="assets/img/favicon.png"> <title>Home</title> <!--web fonts--> <link href="//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800" rel="stylesheet"> <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet"> <!--bootstrap styles--> <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!--icon font--> <link href="assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="assets/vendor/dashlab-icon/dashlab-icon.css" rel="stylesheet"> <link href="assets/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet"> <link href="assets/vendor/themify-icons/css/themify-icons.css" rel="stylesheet"> <link href="assets/vendor/weather-icons/css/weather-icons.min.css" rel="stylesheet"> <!--jquery ui--> <link href="assets/vendor/jquery-ui/jquery-ui.min.css" rel="stylesheet"> <!--iCheck--> <link href="assets/vendor/icheck/skins/all.css" rel="stylesheet"> <!--custom styles--> <link href="assets/css/main.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="assets/vendor/html5shiv.js"></script> <script src="assets/vendor/respond.min.js"></script> <![endif]--> </head>
Following is the body structure which contains a header, left sidebar, main content, right sidebar, and footer
<body class="left-sidebar-fixed"> <!--header start--> <header class="app-header"> <div class="branding-wrap"> <!--left nav toggler start--> <a class="nav-link mt-2 float-left js_left-nav-toggler pos-fixed" href="javaScript:;"> <i class=" ti-align-right"></i> </a> <!--left nav toggler end--> <!--brand start--> <div class="navbar-brand pos-fixed"> <a class="" href="index.html"> <img src="assets/img/logo.png" srcset="assets/img/logo@2x.jpg 2x" alt="CodeLab"> </a> </div> <!--brand end--> </div> <!--header rightside links--> <ul class="header-links hide-arrow navbar"> <li class="nav-item search-bar"> <button type="button" class="btn btn-link" data-toggle="modal" data-target="#searchModal"> <i class="vl_search"></i> </button> </li> ... </ul> <!--/header rightside links--> </header> <!--search modal start--> <div class="modal modal-search fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <input type="text" class="form-control" placeholder="Search..."> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> </div> </div> <!--search modal start--> <!--header end--> <div class="app-body"> <!--left sidebar start--> <div class="left-nav-wrap"> <div class="left-sidebar"> <nav class="sidebar-menu"> <ul id="nav-accordion"> <li class="sub-menu"> <a href="javascript:;" class="active"> <i class=" ti-home"></i> <span>Dashboard</span> </a> <ul class="sub"> <li class="active"><a href="index.html">Dashboard</a></li> <li><a href="dashboard-2.html">Dashboard 2</a></li> <li><a href="dashboard-3.html">Dashboard 3</a></li> <li><a href="dashboard-4.html">Dashboard 4</a></li> </ul> </li> <li class="nav-title"> <h5 class="text-uppercase">Components</h5> </li> <li class="sub-menu"> <a href="javascript:;" > <i class=" icon-speech"></i> <span>Forms</span> </a> <ul class="sub"> <li class="sub-menu"> <a href="#">Form Control</a> <ul class="sub"> <li><a href="form-basic.html">Basic Input</a></li> <li><a href="form-input-group.html">Input Group</a></li> <li><a href="form-checkbox-radio.html">Checkbox & Radio</a></li> </ul> </li> ... </ul> </li> ..... <!--multi level menu start--> <li class="sub-menu"> <a href="javascript:;" > <i class=" ti-paint-bucket"></i> <span>Multi level Menu</span> </a> <ul class="sub"> <li><a href="javascript:;">Menu Item 1</a></li> <li class="sub-menu"> <a href="#">Menu Item 2</a> <ul class="sub"> <li><a href="javascript:;">Menu Item 2.1</a></li> <li class="sub-menu"> <a href="javascript:;">Menu Item 3</a> <ul class="sub"> <li><a href="javascript:;">Menu Item 3.1</a></li> <li><a href="javascript:;">Menu Item 3.2</a></li> </ul> </li> </ul> </li> </ul> </li> <!--multi level menu end--> </ul> </nav> </div> </div> <!--left sidebar end--> <!--main content wrapper--> <div class="content-wrapper"> <div class="container-fluid"> <div class="row"> .... </div> </div> <!--footer--> <footer class="sticky-footer"> <div class="container"> <div class="text-center"> <small>Copyright © VectorLab 2018</small> </div> </div> </footer> <!--/footer--> </div> <!--main content wrapper end--> <!--right sidebar--> <div class="right-sidebar" id="right_side_bar"> ..... </div> <!--right sidebar end--> </div> <!--basic scripts--> .... </body>
Following is the javascript initialization files which required to load every page.
<!--basic scripts--> <script src="assets/vendor/jquery/jquery.min.js"></script> <script src="assets/vendor/jquery-ui/jquery-ui.min.js"></script> <script src="assets/vendor/popper.min.js"></script> <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script> <script src="assets/vendor/jquery.dcjqaccordion.2.7.js"></script> <!--[if lt IE 9]> <script src="assets/vendor/modernizr.js"></script> <![endif]--> <!--basic scripts initialization--> <script src="assets/js/scripts.js"></script>
Use "header-fixed" class into the body tag
<body class="left-sidebar-fixed header-fixed"> .... </body>
Use "header-primary-color" class into the body tag for blue color. For green color use "header-success-color". For red color use "header-danger-color". For yellow color use "header-warning-color". For purple color use "header-purple-color".
<body class="left-sidebar-fixed header-fixed header-primary-color"> ... </body>
Use "left-sidebar-light" class into the body tag
<body class="left-sidebar-fixed left-sidebar-light"> ... </body>
Use "left-sidebar-color" class into the body tag. You can change purple color to edit "left-sidebar-color" class css.
<body class="left-sidebar-fixed left-sidebar-color"> ... </body>
Following is the top menu layout html
<!DOCTYPE html> <html lang="en"> <head> ... <!--top nav start--> <link href="assets/vendor/custom-nav/css/core-menu.css" rel="stylesheet"> <link href="assets/vendor/custom-nav/css/responsive.css" rel="stylesheet"> <!--[if (gt IE 9) |!(IE)]><!--> <!--<link rel="stylesheet" href="assets/vendor/custom-nav/css/effects/fade-menu.css"/>--> <link rel="stylesheet" href="assets/vendor/custom-nav/css/effects/slide-menu.css"/> <!--<![endif]--> </head> <body class="fixed-nav top-nav header-fixed"> <!--header start--> <header class="app-header"> <div class="container"> <div class="row"> <div class="col-12"> <div class="branding-wrap "> <!--brand start--> <div class="navbar-brand pos-fixed"> <a class="" href="index.html"> <img src="assets/img/logo.png" srcset="assets/img/logo@2x.jpg 2x" alt="CodeLab"> </a> </div> <!--brand end--> </div> <!--top mega menu start--> <nav id="tb-menu"> <!--start responsive nav toggle button--> <div class="nav-btn"> <span class="bars"></span> </div> <!--end responsive nav toggle button--> <!--start tbmenu--> <ul id="menu" class="tbmenu light-sub-menu slide-effect"> <li class="active"><a href="#"> Dashboard <i class="fa fa-angle-down"></i></a> <!--start level 2--> <ul> <li><a href="index.html"><i class="vl_dashboard"></i> Dashboard Default</a></li> <li><a href="dashboard-2.html"><i class="ti-home"></i> Dashboard Top Nav</a></li> <li><a href="dashboard-3.html"> <i class="ti-pencil-alt"></i> Dashboard Left Nav Color</a></li> <li><a href="dashboard-4.html"><i class="icon-grid"></i> Dashboard Left Nav White</a></li> </ul> <!--end level 2--> </li> <li><a href="#">Components <i class="fa fa-angle-down"></i></a> <!--mega menu start--> <div class="mega-menu full-nav "> <div class="col5"> <h3>BS Elements</h3> <ol> <li><a href="alert.html">Alert</a></li> <li><a href="buttons.html">Buttons</a></li> <li><a href="dropdown.html">Dropdown</a></li> <li><a href="modals.html">Modals</a></li> <li><a href="progress.html">Progress</a></li> <li><a href="popover-tooltips.html">Popovers & Tooltips</a></li> </ol> </div> <div class="col5"> <h3> </h3> <ol> <li><a href="tabs-accordion.html">Tabs & Accordion</a></li> <li><a href="toastr-notification.html">Toastr Notification</a></li> <li><a href="typography.html">Typography</a></li> <li><a href="tree.html">Tree</a></li> <li><a href="#">Coming soon</a></li> </ol> </div> <div class="col5"> <h3>Extra Pages</h3> <ol> <li><a href="profile.html">Profile</a></li> <li><a href="invoice.html">Invoice</a></li> <li><a href="lock-screen.html">Lock Screen</a></li> <li><a href="login.html">Login</a></li> <li><a href="registration.html">Registration</a></li> <li><a href="404.html">404 Error</a></li> </ol> </div> <div class="col5"> <h3>Layouts</h3> <ol> <li><a href="layout-blank.html">Blank Default</a></li> <li><a href="layout-fixed-header.html">Fixed Header</a></li> <li><a href="layout-header-color.html">Colorful Header</a></li> <li><a href="layout-leftnav-color.html">Left Nav Color</a></li> <li><a href="layout-leftnav-white.html">Left Nav White</a></li> <li><a href="layout-leftnav-collapsed.html">Collapsed Left Nav</a></li> <li><a href="layout-top-nav.html">Top Nav</a></li> </ol> </div> <div class="col5"> <h3>Icons</h3> <ol> <li><a href="icon-fontawesome.html">Font Awesome Icons</a></li> <li><a href="icon-themify.html">Themify Icons</a></li> <li><a href="icon-simple-line.html">Simple Line Icons</a></li> <li><a href="icon-weather.html">Weather Icons</a></li> </ol> </div> </div> <!--mega menu end--> </li> <li><a href="#">Extended <i class="fa fa-angle-down"></i></a> <!--mega menu start--> <div class="mega-menu half-nav "> <div class="col3"> <h3>Calendar</h3> <ol> <li><a href="calendar-basic.html">Basic Calendar</a></li> <li><a href="calendar-external-events.html">External Events Calendar</a></li> <li><a href="calendar-list.html">List Calendar</a></li> </ol> </div> <div class="col3"> <h3>Charts</h3> <ol> <li><a href="chartjs.html">Chartjs</a></li> <li><a href="echarts.html">eChart</a></li> <li><a href="amcharts.html">amChart</a></li> </ol> </div> <div class="col3"> <h3>Widgets</h3> <ol> <li><a href="widget-basic.html">Basic Widgets</a></li> <li><a href="widget-chart.html">Chart Widgets</a></li> </ol> </div> </div> <!--mega menu end--> </li> <li><a href="#">Forms <i class="fa fa-angle-down"></i></a> <!--start level 2--> <ul> <li><a href="#">Form Control</a> <!--start level 3--> <ul> <li><a href="form-basic.html">Basic Input</a></li> <li><a href="form-input-group.html">Input Group</a></li> <li><a href="form-checkbox-radio.html">Checkbox & Radio</a></li> </ul> <!--end level 3--> </li> <li><a href="#">Pickers</a> <!--start level 3--> <ul> <li><a href="date-picker.html">Date Pickers</a></li> <li><a href="datetime-picker.html">Datetime & Time pickers</a></li> <li><a href="color-picker.html">Color Pickers</a></li> </ul> <!--end level 3--> </li> <li><a href="#">Advanced Form</a> <!--start level 3--> <ul> <li><a href="form-touchspin.html">Touchpin </a></li> <li><a href="form-select2.html">Select2 </a></li> <li><a href="form-input-mask.html">Input Mask </a></li> <li><a href="form-multi-select.html">Multiple Select </a></li> <li><a href="form-dropzone.html">Dropzone </a></li> <li><a href="form-ion-range-slider.html">Ion Range Slider </a></li> <li><a href="form-switch.html">Switchery </a></li> </ul> <!--end level 3--> </li> <li><a href="#">Editors</a> <!--start level 3--> <ul> <li><a href="editor-summernote.html">Summernote</a></li> <li><a href="editor-markdown.html">Markdown</a></li> </ul> <!--end level 3--> </li> <li><a href="#">Form Validation</a> <!--start level 3--> <ul> <li><a href="form-validation.html">Basic Validation</a></li> <li><a href="form-validation-jquery.html">jQuery Validation</a></li> <li><a href="form-wizard.html">Form Wizard</a></li> </ul> <!--end level 3--> </li> </ul> <!--end level 2--> </li> <li><a href="#"> Data Tables <i class="fa fa-angle-down"></i></a> <!--start level 2--> <ul> <li><a href="table-basic.html">Basic Tables </a></li> <li><a href="table-datatable.html">Data Table </a></li> <li><a href="table-ajax-datatable.html">Ajax Data Table </a></li> </ul> <!--end level 2--> </li> <li class="menu-right"><a href="#">Right menu <i class="fa fa-angle-down"></i></a> <!--start level 2--> <ul> <li><a href="#">Second Level 1</a></li> <li><a href="#">Right Level 2</a> <!--start level 3--> <ul> <li><a href="#">Third Level 1</a></li> <li><a href="#">Third Level 2</a></li> <li><a href="#">Third Level 3</a></li> </ul> <!--end level 3--> </li> <li><a href="#">Right Level 3</a> <!--start level 3--> <ul> <li><a href="#">Third Level 1</a></li> <li><a href="#">Third Level 2</a></li> <li><a href="#">Third Level 3</a></li> </ul> <!--end level 3--> </li> <li><a href="#">Second Level 3</a></li> </ul> <!--end level 2--> </li> </ul> <!--end tbmenu--> </nav> <!--top mega menu end--> <!--header rightside links--> <ul class="header-links hide-arrow navbar"> header notification links goes here </ul> <!--/header rightside links--> </div> </div> </div> </header> <!--search modal start--> <div class="modal modal-search fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <input type="text" class="form-control" placeholder="Search..."> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> </div> </div> <!--search modal start--> <!--header end--> <div class="app-body"> <!--main content wrapper--> <!--main content wrapper--> <div class="content-wrapper"> <div class="container"> <!--page title--> <div class="page-title mb-4 d-flex align-items-center"> <div class="mr-auto"> <h4 class="weight500 d-inline-block pr-3 mr-3 border-right">Blank Page</h4> <nav aria-label="breadcrumb" class="d-inline-block "> <ol class="breadcrumb p-0"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Extra Pages</a></li> <li class="breadcrumb-item active" aria-current="page">Blank Page</li> </ol> </nav> </div> </div> <!--/page title--> <div class="row"> <div class="col-12"> <div class="card card-shadow mb-4"> <div class="card-header border-0"> <div class="custom-title-wrap bar-success"> <div class="custom-title">Title Goes Here</div> <!--<div class="custom-post-title">Card subtitle goes here</div>--> </div> </div> <div class="card-body"> body content </div> </div> </div> </div> </div> </div> <!--/main content wrapper--> <!--footer--> <footer class="sticky-footer"> <div class="container"> <div class="text-center"> <small>Copyright © VectorLab 2018</small> </div> </div> </footer> <!--/footer--> <!--right sidebar--> <div class="right-sidebar" id="right_side_bar"> <div class="card border-0"> <div class="card-body pb-0"> <!--close toggle--> <a href="javascript:;" class="right_side_toggle float-right close-sidebar-icon"> <i class=" ti-shift-right"> </i> </a> <!--/close toggle--> </div> <div class="card-body pt-2"> <div class="right-widget"> <div class="custom-title-wrap bar-primary mb-4"> <div class="custom-title">Today's Activity</div> </div> <ul class="list-unstyled base-timeline"> <li class="time-dot-primary"> <div class="base-timeline-info"> <a href="#">John123</a> Successfully purchased item#26 </div> <small class="text-muted"> 28 mins ago </small> </li> <li class="time-dot-danger"> <div class="base-timeline-info"> <a href="#" class="text-danger">Farnandez</a> placed the order for accessories </div> <small class="text-muted"> 2 days ago </small> </li> <li class="time-dot-purple"> <div class="base-timeline-info"> User <a href="#" class="text-purple">Lisa Maria</a> checked out from the market </div> <small class="text-muted"> 12 mins ago </small> </li> </ul> </div> <div class="right-widget"> <div class="custom-title-wrap bar-danger mb-4"> <div class="custom-title">Active Users</div> </div> <ul class="list-unstyled mb-0 list-widget"> <li class="cursor"> <div class="media mb-4"> <div class="st-alphabet mr-3"> <img class="rounded-circle" src="assets/img/avatar/avatar1.jpg" alt=" "> <span class="status bg-success"></span> </div> <div class="media-body "> <div class="float-left"> <h6 class="text-uppercase mb-0">shirley hoe</h6> <span class="text-muted">Online</span> </div> </div> </div> </li> <li class="cursor"> <div class="media mb-4"> <div class="st-alphabet mr-3"> <img class="rounded-circle" src="assets/img/avatar/avatar2.jpg" alt=" "> <span class="status bg-warning"></span> </div> <div class="media-body "> <div class="float-left"> <h6 class="text-uppercase mb-0">james alexender</h6> <span class="text-muted">Screaming...</span> </div> </div> </div> </li> <li class="cursor"> <div class="media mb-4"> <div class="st-alphabet mr-3"> <img class="rounded-circle" src="assets/img/avatar/avatar3.jpg" alt=" "> <span class="status bg-info"></span> </div> <div class="media-body"> <div class="float-left"> <h6 class="text-uppercase mb-0">ursula sitorus</h6> <span class="text-muted">Start Exploring</span> </div> </div> </div> </li> <li class="cursor"> <div class="media mb-3"> <div class="st-alphabet mr-3"> <img class="rounded-circle" src="assets/img/avatar/avatar4.jpg" alt=" "> <span class="status bg-danger"></span> </div> <div class="media-body"> <div class="float-left"> <h6 class="text-uppercase mb-0">jonna pinedda</h6> <span class="text-muted">Busy</span> </div> </div> </div> </li> </ul> </div> <div class="right-widget"> <div class="custom-title-wrap bar-success mb-4"> <div class="custom-title">Notification</div> </div> <div > <a class="nav-link border-bottom px-0 py-3" href="#"> <span class="text-primary"> <span class="weight700 f12"> <i class="vl_bell weight600 pr-2"></i>Weekly Update</span> </span> <span class="small float-right text-muted">03:14 AM</span> <div class="text-dark f12"> This week project update report generated. All team members are requested to check the updates </div> </a> <a class="nav-link border-bottom px-0 py-3" href="#"> <span class="text-danger"> <span class="weight700 f12"> <i class="vl_Download-circle weight600 pr-2"></i>Server Error</span> </span> <span class="small float-right text-muted">10:34 AM</span> <div class="text-dark f12"> Unexpectedly server response stop. Responsible members are requested to fix it soon </div> </a> <a class="nav-link border-bottom px-0 py-3" href="#"> <span class="text-success"> <span class="weight700 f12"> <i class="vl_screen weight600 pr-2"></i>Monthly Meeting</span> </span> <span class="small float-right text-muted">12:30 AM</span> <div class="text-dark f12"> Our monthly meeting will be held on tomorrow sharp 12:30. All members are requested to attend this meeting. </div> </a> <div class="text-center mt-3"> <a class="nav-link px-0" href="#">View all notification</a> </div> </div> </div> </div> </div> </div> <!--/right sidebar--> </div> <!--basic scripts--> ..... <!--top nav--> <script src="assets/vendor/custom-nav/js/tb-menu.js"></script> <!--basic scripts initialization--> <script src="assets/js/scripts.js"></script> <script> tbmenu.init({ selector: ".tbmenu" }); </script> </body> </html>
Following is the left sidebar nav html.
<!--left sidebar start--> <div class="left-nav-wrap"> <div class="left-sidebar"> <nav class="sidebar-menu"> <ul id="nav-accordion"> <li class="sub-menu"> <a href="javascript:;" class="active"> <i class=" ti-home"></i> <span>Dashboard</span> </a> <ul class="sub"> <li class="active"><a href="index.html">Dashboard</a></li> <li><a href="dashboard-2.html">Dashboard 2</a></li> <li><a href="dashboard-3.html">Dashboard 3</a></li> <li><a href="dashboard-4.html">Dashboard 4</a></li> </ul> </li> <li class="nav-title"> <h5 class="text-uppercase">Components</h5> </li> <li class="sub-menu"> <a href="javascript:;" > <i class=" icon-speech"></i> <span>Forms</span> </a> <ul class="sub"> <li class="sub-menu"> <a href="#">Form Control</a> <ul class="sub"> <li><a href="form-basic.html">Basic Input</a></li> <li><a href="form-input-group.html">Input Group</a></li> <li><a href="form-checkbox-radio.html">Checkbox & Radio</a></li> </ul> </li> <li class="sub-menu"> <a href="#">Pickers</a> <ul class="sub"> <li><a href="date-picker.html">Date Picker</a></li> <li><a href="datetime-picker.html">Datetime & Time Picker</a></li> <li><a href="color-picker.html">Color Picker</a></li> </ul> </li> <li class="sub-menu"> <a href="#">Advanced Form</a> <ul class="sub"> <li><a href="form-touchspin.html">Touchpin</a></li> <li><a href="form-select2.html">Select2</a></li> <li><a href="form-input-mask.html">Input Mask</a></li> <li><a href="form-multi-select.html"> Multiple Select</a></li> <li><a href="form-dropzone.html"> Dropzone</a></li> <li><a href="form-ion-range-slider.html"> Ion Range Slider</a></li> <li><a href="form-switch.html"> Switchery </a></li> </ul> </li> <li class="sub-menu"> <a href="#">Editos</a> <ul class="sub"> <li><a href="editor-summernote.html">Summernote</a></li> <li><a href="editor-markdown.html">Markdown</a></li> </ul> </li> <li class="sub-menu"> <a href="#">Form Validation</a> <ul class="sub"> <li><a href="form-validation.html">Basic Validation</a></li> <li><a href="form-validation-jquery.html">jQuery Validation</a></li> <li><a href="form-wizard.html">Form Wizard</a></li> </ul> </li> </ul> </li> <li class="sub-menu"> <a href="javascript:;"> <i class=" icon-grid"></i> <span>Data Tables</span> </a> <ul class="sub"> <li><a href="table-basic.html">Basic Table</a></li> <li><a href="table-datatable.html">Data Table</a></li> <li><a href="table-ajax-datatable.html">Ajax Data Table</a></li> </ul> </li> <li class="sub-menu"> <a href="javascript:;"> <i class=" ti-pie-chart"></i> <span>Charts</span> </a> <ul class="sub"> <li><a href="chartjs.html">Chartjs</a></li> <li><a href="echarts.html">eCharts</a></li> <li><a href="amcharts.html">amCharts</a></li> </ul> </li> <li class="sub-menu"> <a href="javascript:;"> <i class="icon-calendar"></i> <span>Calendar </span> </a> <ul class="sub"> <li><a href="calendar-basic.html">Basic Calendar</a></li> <li><a href="calendar-external-events.html">External Events Calendar</a></li> <li><a href="calendar-list.html">List Calendar</a></li> </ul> </li> <li class="sub-menu"> <a href="javascript:;"> <i class=" ti-blackboard"></i> <span>Widgets </span> <span class="badge badge-danger ml-2">2</span> </a> <ul class="sub"> <li><a href="widget-basic.html">Widgets Base</a></li> <li><a href="widget-chart.html">Widgets Chart</a></li> </ul> </li> <li class="sub-menu"> <a href="javascript:;"> <i class=" ti-pencil-alt"></i> <span>Icons</span> </a> <ul class="sub"> <li><a href="icon-fontawesome.html">Fontawesome Icons</a></li> <li><a href="icon-themify.html">Themify Icons</a></li> <li><a href="icon-simple-line.html">Simple line Icons</a></li> <li><a href="icon-weather.html">Weather Icons</a></li> </ul> </li> <li class="sub-menu"> <a href="javascript:;"> <i class=" ti-layers"></i> <span>BS Elements</span> </a> <ul class="sub"> <li><a href="alert.html">Alerts</a></li> <li><a href="buttons.html">Buttons</a></li> <li><a href="dropdown.html">Dropdowns</a></li> <li><a href="modals.html">Modals</a></li> <li><a href="progress.html">Progress</a></li> <li><a href="popover-tooltips.html">Popover & Tooltips</a></li> <li><a href="tabs-accordion.html">Tabs & Accordion</a></li> <li><a href="toastr-notification.html">Toastr Notification</a></li> <li><a href="typography.html">Typography</a></li> <li><a href="tree.html">Tree</a></li> </ul> </li> <li class="sub-menu"> <a href="javascript:;" > <i class=" icon-equalizer"></i> <span>Extra Pages</span> </a> <ul class="sub"> <li><a href="profile.html">Profile</a></li> <li><a href="invoice.html">Invoice</a></li> <li><a href="lock-screen.html">Lock Screen</a></li> <li><a href="login.html">Login</a></li> <li><a href="registration.html">Registration</a></li> <li><a href="404.html">404 Error</a></li> </ul> </li> <li class="nav-title"> <h5 class="text-uppercase">Layouts & Multi Level Menu</h5> </li> <li class="sub-menu"> <a href="javascript:;"> <i class=" ti-layout"></i> <span>Layouts</span> </a> <ul class="sub"> <li><a href="layout-blank.html">Blank Default</a></li> <li><a href="layout-fixed-header.html">Fixed Header</a></li> <li><a href="layout-header-color.html">Colorful Header</a></li> <li><a href="layout-leftnav-color.html">Left Nav Color</a></li> <li><a href="layout-leftnav-white.html">Left Nav White</a></li> <li><a href="layout-leftnav-collapsed.html">Collapsed Left Nav</a></li> <li><a href="layout-top-nav.html">Top Nav</a></li> </ul> </li> <!--multi level menu start--> <li class="sub-menu"> <a href="javascript:;" > <i class=" ti-paint-bucket"></i> <span>Multi level Menu</span> </a> <ul class="sub"> <li><a href="javascript:;">Menu Item 1</a></li> <li class="sub-menu"> <a href="#">Menu Item 2</a> <ul class="sub"> <li><a href="javascript:;">Menu Item 2.1</a></li> <li class="sub-menu"> <a href="javascript:;">Menu Item 3</a> <ul class="sub"> <li><a href="javascript:;">Menu Item 3.1</a></li> <li><a href="javascript:;">Menu Item 3.2</a></li> </ul> </li> </ul> </li> </ul> </li> <!--multi level menu end--> <li class="nav-title"> <h5 class="text-uppercase">Others</h5> </li> <li> <a href="#"> <i class="fa fa-circle-o text-danger"></i> <span>Mail Inbox</span> </a> </li> <li> <a href="#"> <i class="fa fa-circle-o text-success"></i> <span>Email Template</span> </a> </li> <li> <a href="#"> <i class="fa fa-circle-o text-warning"></i> <span>Support</span> </a> </li> </ul> </nav> </div> </div> <!--left sidebar end-->
To create or start a new page you can use layout-blank.html which provides basic layout.
CodeLab used two google fonts. The font must be loaded in HTML header before the rest of CSS files
<!--web fonts--> <link href="//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800" rel="stylesheet"> <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
If this doc is not enough for you to understand. Please feel free to ask any question in the comments section or you can mail us here dkmosa@gmail.com
Thanks