VRISTO - Multipurpose Tailwind CSS Admin Template

Documentation

Preview Buy Now

Installation process

The following process will be used to install admin dashboard using package manager.

Install Node.js : Please install latest version of Node.js from https://nodejs.org
Extract main template : Extract the admin template site to your suitable directory or folder.
Access Command Prompt : Open node.js command prompt.
- Note:- The process mentioned below can also be excuted with system command prompt.
In CMD, Navigate to the location where main folder is extracted.
Navigate to the root folder of project where package.json file exist.
Install node dependencies : Run npm install.
To run the project open it in browser.
Run Command npm run dev.
- Note:- Start the Tailwind CLI build process when you make change in site.
- Note:- The CLI tool scan your template files for classes and build your CSS.
Run command npm run build to minify your CSS.

In case if you have any problems or query then please contact us

File Sturcture

The arrangement below describes our file structure.

Vristo
- assets
  - css
    - all the base css files including build css.
  - images
    - all the image files
  - js
    - all the js files
- index.html and all other pages
- package.json
- tailwind.config.js
- .editorconfig
- .gitignore
- .prettierrc

Code Structure

This section will give you a brief description of our code.

1. Header Section : This is the default navbar section. It contains :

Sidebar Toggle button.
Quick access button for calendar.
Quick access button for todolist.
Quick access button for chat.
Search Bar
Theme toggle button.
Language Dropdown
Message Dropdown
Notification Dropdown
User Profile with Dropdown
Horizontal Menu

Note:- These categories are defined by us and you can modify as per your needs :)

<!--  BEGIN NAVBAR  -->
<header :class="{'dark' : $store.app.semidark && $store.app.menu === 'horizontal'}">
  <div class="shadow-sm">
      <div class="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-[#0e1726]">
          ..............................
      </div>

      <!-- horizontal menu -->
      <ul
          class="horizontal-menu hidden border-t border-[#ebedf2] bg-white py-1.5 px-6 font-semibold text-black rtl:space-x-reverse dark:border-[#191e3a] dark:bg-[#0e1726] dark:text-white-dark lg:space-x-1.5 xl:space-x-8"
      >
          ..............................
      </ul>
  </div>
</header>
<!--  END NAVBAR  -->

2. Main Container Section : The main container section includes header, footer and main content section.

Sidebar Section
Header Section
Main Content Section
Footer Section

<!--  BEGIN MAIN CONTAINER  -->
<body
  x-data="main"
  class="relative overflow-x-hidden font-nunito text-sm font-normal antialiased"
  :class="[ $store.app.sidebar ? 'toggle-sidebar' : '', $store.app.theme, $store.app.menu, $store.app.layout,$store.app.rtlClass]"
>
  ..............................
</body>
<!-- END MAIN CONTAINER -->

3. Sidebar : This is the sidebar code.

<!--  BEGIN SIDEBAR  -->
<div :class="{'dark text-white-dark' : $store.app.semidark}">
  <nav x-data="sidebar" class="sidebar fixed top-0 bottom-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300">
      ..............................
  </nav>
</div>
<!--  END SIDEBAR  -->

4. Main Content : This is the Main Content code section.

This is the root structure where you can create widgets, charts, tables etc.

<!--  BEGIN CONTENT PART  -->
<div class="main-content">
  ..............................
</div>

<!--  END CONTENT PART  -->

5. Footer : This is the Footer code.

<!--  BEGIN FOOTER  -->
<p class="pt-6 text-center dark:text-white-dark ltr:sm:text-left rtl:sm:text-right">
  ..............................
</p>
<!--  END FOOTER  -->

The Combined Code

Now, after a brief description of our admin template. Below is the combined code of the snippets we have discuss above.

<!--  BEGIN MAIN CONTAINER  -->
<body
  x-data="main"
  class="relative overflow-x-hidden font-nunito text-sm font-normal antialiased"
  :class="[ $store.app.sidebar ? 'toggle-sidebar' : '', $store.app.theme, $store.app.menu, $store.app.layout,$store.app.rtlClass]"
>
  <!-- BEGIN SIDEBAR MENU OVERLAY -->
  <div x-cloak class="fixed inset-0 z-50 bg-[black]/60 lg:hidden" :class="{'hidden' : !$store.app.sidebar}" @click="$store.app.toggleSidebar()"></div>
  <!-- END SIDEBAR MENU OVERLAY -->

  <!-- BEGIN SCREEN LOADER -->
  <div class="screen_loader animate__animated fixed inset-0 z-[60] grid place-content-center bg-[#fafafa] dark:bg-[#060818]">
      <svg>...</svg>
  </div>
  <!-- END SCREEN LOADER -->

  <!-- BEGIN SCROLL TO TOP BUTTON -->
  <div class="fixed bottom-6 z-50 ltr:right-6 rtl:left-6" x-data="scrollToTop">
      <template x-if="showTopButton">
          <button type="button" class="btn btn-outline-primary animate-pulse rounded-full bg-[#fafafa] p-2 dark:bg-[#060818] dark:hover:bg-primary" @click="goToTop">
              <svg>...</svg>
          </button>
      </template>
  </div>
  <!-- END SCROLL TO TOP BUTTON -->

  <!-- BEGIN APP SETTING LAUNCHER -->
  <div>...</div>
  <!-- END APP SETTING LAUNCHER -->

  <div class="main-container min-h-screen text-black dark:text-white-dark" :class="[$store.app.navbar]">
      <!--  BEGIN SIDEBAR  -->
      <div :class="{'dark text-white-dark' : $store.app.semidark}">
          <nav x-data="sidebar" class="sidebar fixed top-0 bottom-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300">
              ..............................
          </nav>
      </div>
      <!--  END SIDEBAR  -->

      <!--  BEGIN CONTENT AREA  -->
      <div class="main-content">
          <!--  BEGIN NAVBAR  -->
          <header :class="{'dark' : $store.app.semidark && $store.app.menu === 'horizontal'}">
              <div class="shadow-sm">
                  <div class="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-[#0e1726]">..............................</div>

                  <!-- horizontal menu -->
                  <ul
                      class="horizontal-menu hidden border-t border-[#ebedf2] bg-white py-1.5 px-6 font-semibold text-black rtl:space-x-reverse dark:border-[#191e3a] dark:bg-[#0e1726] dark:text-white-dark lg:space-x-1.5 xl:space-x-8"
                  >
                      ..............................
                  </ul>
              </div>
          </header>
          <!--  END NAVBAR  -->

          <div class="animate__animated p-6" :class="[$store.app.animation]">
              <!--  BEGIN PAGE CONTENT  -->
              <div>..............................</div>
              <!--  END PAGE CONTENT  -->

              <!-- BEGIN FOOTER -->
              <p class="pt-6 text-center dark:text-white-dark ltr:sm:text-left rtl:sm:text-right">..............................</p>
              <!-- END FOOTER -->
          </div>
      </div>
      <!--  END CONTENT AREA  -->
  </div>
</body>
<!--  END MAIN CONTAINER  -->

Admin JS Code Structure

This section will give you a brief description of our admin template JS code.

1. assets/js/custom.js : This is primary js file. It is necessary for the layout to work. It contains the code as follows :-

Set default layout
Set Navigation Position
Set Navbar Type
Set Router Animation
Theme change funtionality
Direction change funtionality

(function () {
const $themeConfig = {
    locale: "en", // en, da, de, el, es, fr, hu, it, ja, pl, pt, ru, sv, tr, zh
    theme: "light", // light, dark, system
    menu: "vertical", // vertical, collapsible-vertical, horizontal
    layout: "full", // full, boxed-layout
    rtlClass: "ltr", // rtl, ltr
    animation: "", // animate__fadeIn, animate__fadeInDown, animate__fadeInUp, animate__fadeInLeft, animate__fadeInRight, animate__slideInDown, animate__slideInLeft, animate__slideInRight, animate__zoomIn
    navbar: "navbar-sticky", // navbar-sticky, navbar-floating, navbar-static
    semidark: false,
};

document.addEventListener("alpine:init", () => {
    Alpine.store("app", {
        // theme
        theme: Alpine.$persist($themeConfig.theme),
        toggleTheme(val) {
            if (!val) {
                val = this.theme || $themeConfig.theme; // light|dark|system
            }

            this.theme = val;
        },

        // navigation menu
        menu: Alpine.$persist($themeConfig.menu),
        toggleMenu(val) {
            if (!val) {
                val = this.menu || $themeConfig.menu; // vertical, collapsible-vertical, horizontal
            }
            this.sidebar = false; // reset sidebar state
            this.menu = val;
        },

        // layout
        layout: Alpine.$persist($themeConfig.layout),
        toggleLayout(val) {
            if (!val) {
                val = this.layout || $themeConfig.layout; // full, boxed-layout
            }

            this.layout = val;
        },

        // rtl support
        rtlClass: Alpine.$persist($themeConfig.rtlClass),
        toggleRTL(val) {
            if (!val) {
                val = this.rtlClass || $themeConfig.rtlClass; // rtl, ltr
            }

            this.rtlClass = val;
            this.setRTLLayout();
        },

        setRTLLayout() {
            document.querySelector("html").setAttribute("dir", this.rtlClass || $themeConfig.rtlClass);
        },

        // animation
        animation: Alpine.$persist($themeConfig.animation),
        toggleAnimation(val) {
            if (!val) {
                val = this.animation || $themeConfig.animation; // animate__fadeIn, animate__fadeInDown, animate__fadeInLeft, animate__fadeInRight
            }

            this.animation = val;
        },

        // navbar type
        navbar: Alpine.$persist($themeConfig.navbar),
        toggleNavbar(val) {
            if (!val) {
                val = this.navbar || $themeConfig.navbar; // navbar-sticky, navbar-floating, navbar-static
            }

            this.navbar = val;
        },

        // semidark
        semidark: Alpine.$persist($themeConfig.semidark),
        toggleSemidark(val) {
            if (!val) {
                val = this.semidark || $themeConfig.semidark;
            }

            this.semidark = val;
        },

        // multi language
        locale: Alpine.$persist($themeConfig.locale),
        toggleLocale(val) {
            if (!val) {
                val = this.locale || $themeConfig.locale;
            }

            this.locale = val;
        },

        // sidebar
        sidebar: false,
        toggleSidebar() {
            this.sidebar = !this.sidebar;
        },
    });
});
})();