Documentations

HTML

Base / Starter HTML

HTML demo file demo files located at dist/{colorscheme} directory .

discoverize-html/
|-dist/
|--default/
|--minimal/
|--classic/

Starter Template

<!doctype html>
<html lang="en">
  <head>
  
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/538d9daa14.js" crossorigin="anonymous"></script>
  
    <!-- Google-Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;700&family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
  
    <!-- Flaticons - used for property category icons -->
    <link rel="stylesheet" type="text/css" href="../assets/fonts/flaticon/flaticon.css" />
  
    <!-- Photoswipe CSS - used only if your using photoswupe -->
    <link rel="stylesheet" href="../assets/vendor/photoswipe/photoswipe.css" />
    <link rel="stylesheet" href="../assets/vendor/photoswipe/default-skin/default-skin.css" />
  
    <!-- Leaflet-CSS - required for map -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
  
    <!-- Swiper-CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@7.0.6/swiper-bundle.min.css" />
  
    <!-- Discoverize CSS bundled with Bootstrap-CSS -->
    <link rel="stylesheet" type="text/css" href="../assets/css/discoverize-default.css" />
  
    <title>Page Title</title>
  
  </head>
  <body>
  
    <header class="header">
  
      <!-- (optional) Nav Goes Here  -->
      
      <!-- (optional) HEADER SECTIONS goes here  -->
  
    </header>
      
    <!-- MAIN SECTIONS goes here  -->
        
    <footer class="bg-dark">
  
      <!-- FOOTER SECTIONS goes here  -->
      
    </footer>
    
    <!-- MODALS goes here  -->
  
    <!-- Photoswipe-JS - used only if your using photoswupe -->
    <script src="../assets/vendor/photoswipe/photoswipe.min.js"></script>
    <script src="../assets/vendor/photoswipe/photoswipe-ui-default.min.js"></script>
    <script src="../assets/js/discoverize.photoswipe.js"></script>
  
    <!-- Swiper-JS -->
    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
  
    <!-- Leaflet-CSS - required for map -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
  
    <!-- Discoverize JS -->
    <script src="../assets/js/discoverize.js"></script>
  
  </body>
</html>

Notes:

  • Font Awesome and Flaticons are required since some of elements using their icons.

  • Google fonts is also required since the page is using google font. If you want to change the font, make sure you also change font family name in colorscheme _variables.scss file

  • Swiper, Leaflet, Photoswipe are optional. Include them only if you use it in your page.

  • Put Sections in area with * SECTIONS goes here

SCSS - Customizing
HTML - Header HTML