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.

Run command python3 --version to check if python is installed in your device.
To install Python on your device. https://www.python.org
Run command sudo apt install python3-pip OR https://www.dataquest.io/blog/install-pip-windows/ OR https://phoenixnap.com/kb/install-pip-mac#ftoc-heading-1 to install python3-pip in your device.
Run commands to Install django on your device: https://docs.djangoproject.com/en/4.1/topics/install/
sudo apt install python3-django OR python3 -m pip install Django
Run command python3 -m pip install django-tailwind to install django-tailwind in your device.
Install Node.js : Please install latest version of Node.js from: https://nodejs.org
Copy django folder from vristo-django and extract to your suitable directory or folder.
Activating virtual environment Open terminal or command prompt with installation directory/folder.
Run either commands to Install node dependencies:
- This command npm install has be in the specific path i.e. vristo-django/vristoDjango/static_src
- This command python3 manage.py tailwind install can run in the vristo-django

Run either of the command for style generation and watch.

This command npm run dev has be in the specific path i.e. vristo-django/vristoDjango/static_src
This command python3 manage.py tailwind start can run in the vristo-django

Run either of the command to build for production.

This command npm run build has be in the specific path i.e. vristo-django/vristoDjango/static_src
This command python3 manage.py tailwind build can run in the vristo-django

Run command python3 manage.py runserver to start python server which will run django project

Note:-This command can run in the vristo-django

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

File Sturcture

The arrangement below describes our file structure.

Vristo
- main
  - templates
    - index.html and all other app pages
  - urls.py - routes file
  - views.py - controller file
- vristo
  - settings.py - project settings
  - urls.py - route file
- vristoDjango
  - static
    - assets
      - css
        all the css files and folders
      - images
        all the image files
      - js
        all the js files and folders
  - static_src
    - src
      - styles.css - main css file
    - .gitignore
    - package.json
    - postcss.config.js
    - tailwind.config.js
- manage.py

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. vristoDjango/static/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;
        },
    });
});
})();