Blank Template

Blank template is the most minimal page you can use to create new page.

The theme provide blank template, a page that consist minimal content so you don't get overwhelmed in the first place. Find blank template at src/html/pages/misc/blank.html

Below is blank template from the source file.

          
    
    @@include('../../inc_header.html', {assets_path: "../../", light: "true"})

    <!-- Your content -->
    <header class="header-inner-1 page-section text-center">
      <p class="text-muted mt-4">Your content here</p>
    </div>

    @@include('../../inc_footer.html', {assets_path: "../../"})

After running gulp, we will get generated HTML for blank template as below (skeleton).

          
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Krait UI</title>
    <!-- Plugins -->
    <link rel="stylesheet" href="../../assets/plugins/bootstrap-icons/font/bootstrap-icons.css" type="text/css">
    <link rel="stylesheet" href="../../assets/plugins/fontawesome/css/all.min.css" type="text/css">
    <link rel="stylesheet" href="../../assets/plugins/flag-icon-css/css/flag-icons.min.css" type="text/css">
    <link rel="stylesheet" href="../../assets/plugins/swiper/swiper-bundle.min.css" type="text/css">
    <!-- Theme -->
    <link rel="stylesheet" href="../../assets/css/main.min.css" type="text/css">
    <!-- Fonts and favicon -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="../../assets/images/favicon.png">
  </head>
  <body >
    <!-- Header -->
    <header class="position-absolute top-0 start-0 w-100" style="z-index: 9;">
      ...
    </header>
  
    <!-- Main content -->
    <div class="main-content">
      <!-- Your content -->
      <div class="header-inner-1 page-section text-center">
        <svg width="204" height="272" xmlns="http://www.w3.org/2000/svg">
          <g fill-rule="nonzero" fill="#BFC6D0">
            <path d="M59.5 119a8.5 8.5 0 0 0 0 17h85a8.5 8.5 0 0 0 0-17h-85ZM51 161.5a8.5 8.5 0 0 1 8.5-8.5h85a8.5 8.5 0 0 1 0 17h-85a8.5 8.5 0 0 1-8.5-8.5Zm0 34a8.5 8.5 0 0 1 8.5-8.5h34a8.5 8.5 0 0 1 0 17h-34a8.5 8.5 0 0 1-8.5-8.5Z"/>
            <path d="M127.5 0H34C15.222 0 0 15.222 0 34v204c0 18.778 15.222 34 34 34h136c18.778 0 34-15.222 34-34V76.5L127.5 0Zm0 17v34c0 14.083 11.417 25.5 25.5 25.5h34V238c0 9.389-7.611 17-17 17H34c-9.389 0-17-7.611-17-17V34c0-9.389 7.611-17 17-17h93.5Z"/>
          </g>
        </svg>
        <p class="text-muted mt-4">Your content here</p>
      </div>
    </div>

    <!-- Footer -->
    <footer class="footer-1">
      ...
    </footer>
  
    <!-- Core JS: jQuery, Bootstrap bundle -->
    <script src="../../assets/js/vendor.min.js"></script>
  
    <!-- Main JS -->
    <script src="../../assets/js/main.min.js"></script>
  </body>
  </html>

Getting Started

Layout

Content

Components

Utility classes

Extend

Blank Template