Quick Start | Materio - Bootstrap Material Design Admin Template

Quick Start 🚀

Jump-start your development using this amazing theme.

Info: To run Materio template, Use local servers like XAMPP, WAMPP etc to avoid search and language json file path issue.

Starter Template

Use the below HTML snippet as a way to quickly start any new blank page.

Info: Materio comes with and without customizer options. Read more

With Customizer
Without Customizer

<!DOCTYPE html>
<html lang="en" class="light-style layout-navbar-fixed layout-menu-fixed " dir="ltr" data-theme="theme-default"
  data-assets-path="../../assets/" data-template="vertical-menu-template-starter">

<head>
  <meta charset="utf-8" />
  <title>Title</title>

  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="../../assets/img/favicon/favicon.ico" />

  <!-- Fonts -->
  <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Icons. Uncomment required icon fonts -->
  <link rel="stylesheet" href="../../assets/vendor/fonts/remixicon/remixicon.css" /> 
  <!-- Core CSS -->
  <link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
  <link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
  <link rel="stylesheet" href="../../assets/css/demo.css" />

  <!-- Vendors CSS -->
  <link rel="stylesheet" href="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
  <link rel="stylesheet" href="../../assets/vendor/libs/node-waves/node-waves.css" />
  <link rel="stylesheet" href="../../assets/vendor/libs/typeahead-js/typeahead.css" />

  <!-- Helpers -->
  <script src="../../assets/vendor/js/helpers.js"></script>

  <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
  <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
  <script src="../../assets/vendor/js/template-customizer.js"></script>
  <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
  <script src="../../assets/js/config.js"></script>

</head>

<body>

  <h1>Hello, world!</h1>

  <!-- Core JS -->
  <!-- build:js assets/vendor/js/core.js -->
  <script src="../../assets/vendor/libs/jquery/jquery.js"></script>
  <script src="../../assets/vendor/libs/popper/popper.js"></script>
  <script src="../../assets/vendor/js/bootstrap.js"></script>
  <script src="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
  <script src="../../assets/vendor/libs/node-waves/node-waves.js"></script>
  <script src="../../assets/vendor/libs/hammer/hammer.js"></script>
  <script src="../../assets/vendor/js/menu.js"></script>
  <!-- endbuild -->

  <!-- Main JS -->
  <script src="../../assets/js/main.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="en" class="light-style layout-navbar-fixed layout-menu-fixed " dir="ltr" data-theme="theme-default"
  data-assets-path="../../assets/" data-template="vertical-menu-template-starter">

<head>
  <meta charset="utf-8" />
  <title>Title</title>

  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="../../assets/img/favicon/favicon.ico" />

  <!-- Fonts -->
  <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Icons. Uncomment required icon fonts -->
  <link rel="stylesheet" href="../../assets/vendor/fonts/remixicon/remixicon.css" /> 
  <!-- Core CSS -->
  <link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css"/>
  <link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css"/>
  <link rel="stylesheet" href="../../assets/css/demo.css" />

  <!-- Vendors CSS -->
  <link rel="stylesheet" href="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
  <link rel="stylesheet" href="../../assets/vendor/libs/node-waves/node-waves.css" />
  <link rel="stylesheet" href="../../assets/vendor/libs/typeahead-js/typeahead.css" />

  <!-- Helpers -->
  <script src="../../assets/vendor/js/helpers.js"></script>

  <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
  <script src="../../assets/js/config.js"></script>

</head>

<body>

  <h1>Hello, world!</h1>

  <!-- Core JS -->
  <!-- build:js assets/vendor/js/core.js -->
  <script src="../../assets/vendor/libs/jquery/jquery.js"></script>
  <script src="../../assets/vendor/libs/popper/popper.js"></script>
  <script src="../../assets/vendor/js/bootstrap.js"></script>
  <script src="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
  <script src="../../assets/vendor/libs/node-waves/node-waves.js"></script>
  <script src="../../assets/vendor/libs/hammer/hammer.js"></script>
  <script src="../../assets/vendor/js/menu.js"></script>
  <!-- endbuild -->

  <!-- Main JS -->
  <script src="../../assets/js/main.js"></script>
</body>

</html>

Info: Materio use perfect-scrollbar.js(mandatory) as scrollbar plugin used in menu (navigation) and hammer.js(optional) for swipe to open menu(navigation) in touch (small) screen.

Core CSS: Core style files, i.e core.css/core-dark.css, template-*.css and demo.css
Vendors CSS: Third-party library style files, i.e perfect-scrollbar.css
Page CSS: Template page specific styes. i.e Profile Page
helpers.js File contain helpers methods. Must be include in <head> section.
template-customizer.js Required if using template with customizer. Read more...
config.js Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. Read more...
Core JS: Required core JS files, i.e jquery.js, popper.js, bootstrap.js etc...
Main JS: Main JS file for the JS plugin and function Init.
Page JS: Template page specific js. i.e Dashboard page js

Theming

By default Materio use default theme using theme-default.css file. You can change it or include your custom style from assets/vendors/css.

With Customizer
Without Customizer

<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />

<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css" />

Styling

Materio provides light and dark styles options. By default it provides light style.

To enable dark style you need to:

Set dark-style class on the <html> element instead of light-style.
```
<html class="dark-style">
```

Add -dark suffix to core.css and theme-*.css stylesheets.

With Customizer
Without Customizer

<link rel="stylesheet" href="../../assets/vendor/css/rtl/core-dark.css" class="template-customizer-core-css" />
<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default-dark.css" class="template-customizer-theme-css" />

<link rel="stylesheet" href="../../assets/vendor/css/rtl/core-dark.css" />
<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default-dark.css" />

RTL support

By default Materio provides RTL supported HTML template.

To enable RTL direction support just load Materio's stylesheets from the assets/vendor/css/rtl/ path instead of assets/vendor/css/.

With Customizer
Without Customizer

<link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />

<link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css" />
<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css" />

To enable RTL direction (mode), add dir="rtl" attribute to the <html> element.

<html dir="rtl">

Tip: If you don't want to use rtl supported style you can just include styles from assets/vendor/css/ instead of assets/vendor/css/rtl/. That will only load ltr styles.