Top

HTML file structure

Codeigniter yet highly flexible, layout system that makes it easy to use one or more basic layouts throughout our theme, making it more readable and easy to modify.

We have created views/layout which contains all the common css and javascript files and we have also included header and footer in this file as they are the same in a majority of the pages.

master.php


<!DOCTYPE html>
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Cuba admin is super flexible, powerful, clean & modern responsive bootstrap 5 admin template with unlimited possibilities.">
   <meta name="keywords" content="admin template, Cuba admin template, dashboard template, flat admin template, responsive admin template, web app">
   <meta name="author" content="pixelstrap">
   <link rel="icon" href="/assets/images/favicon.png" type="image/x-icon">
   <link rel="shortcut icon" href="/assets/images/favicon.png" type="image/x-icon">
   <title>Cuba - Premium Admin Template</title>

   <!-- Google font-->
   <link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900&display=swap" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="/assets/css/font-awesome.css">
   <!-- ico-font-->
   <link rel="stylesheet" type="text/css" href="/assets/css/vendors/icofont.css">
   <!-- Themify icon-->
   <link rel="stylesheet" type="text/css" href="/assets/css/vendors/themify.css">
   <!-- Flag icon-->
   <link rel="stylesheet" type="text/css" href="/assets/css/vendors/flag-icon.css">
   <!-- Feather icon-->
   <link rel="stylesheet" type="text/css" href="/assets/css/vendors/feather-icon.css">
   <!-- Plugins css start-->   
    < ?= $this->include('Admin/layout/css') ?>
   <!-- Plugins css Ends-->
   <title>Document</title>
</head>

<body>
   <!-- loader starts-->   
  <div class="loader-wrapper">
      <div class="loader-index"><span></span></div>
      <svg>
        <defs></defs>
        <filter id="goo">
          <fegaussianblur in="SourceGraphic" stddeviation="11" result="blur"></fegaussianblur>
          <fecolormatrix in="blur" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"> </fecolormatrix>
        </filter>
      </svg>
  </div>
   <!-- loader ends-->

   <!-- tap on top starts-->
   <div class="tap-top"><i data-feather="chevrons-up"></i></div>   
   <!-- tap on tap ends-->

   <!-- page-wrapper Start-->
   <div class="page-wrapper compact-wrapper " id="pageWrapper">

   <!-- Page Header Start-->
   < ?= $this->include('Admin/layout/header') ?>         
   <!-- Page Header Ends -->   
  
  <div class="page-body-wrapper">

         <!-- Page Sidebar Start-->
         < ?=$this->include('Admin/layout/sidebar ?>
         <!-- Page Sidebar Ends-->

        <div class="page-body">

          <!-- Main Content Start-->           
            < ?= $this->renderSection('main-content') ?>
          <!-- Main Content End-->           

        </div>

         <!-- footer start-->   
         < ?=$this->include('Admin/layout/footer') ?>
        <!-- footer end-->
      </div>
   </div>

   <!-- Plugins JS start-->
   < ?=$this->include('Admin/layout/script') ?>;
   <!-- Plugins JS Ends-->

</body>

</html>

As you can see, we have extended the views/Admin/layout/master.php file and added additional css and javascript files below the 'css' and 'script' blocks. And write the content of the page below the 'body' block.

You can see that we have used include , to add multiple sections of the page. We have divided the page into small sections and used include to add them where they are required.

These small sections of code are in the layout folder.