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.

This project is using Ruby on Rails version 7.x. https://guides.rubyonrails.org/getting_started.html
This project is using Ruby version 3.1.3. It can be installed using "rbenv" https://phoenixnap.com/kb/install-ruby-ubuntu#ftoc-heading-2
sudo gem install rails OR gem install rails to install rails on your device
rbenv install 3.1.3 to install ruby version 3.1.3 on your device
rbenv global 3.1.3 to set ruby version 3.1.3 global in your device
Install Node.js : Please install latest version of Node.js from: https://nodejs.org
Copy ruby folder from vristo-ruby and extract to your suitable directory or folder.
Open terminal or command prompt with installation directory/folder.
Install node dependencies: npm install
Run command npm run dev to start vite development.
Run command npm run build to build for production.
Run command bin/rails server to start ruby server which will run rails or if you are using other server apps like WAMP, XAMPP or MAMP, you can follow that guide.

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

File Sturcture

The arrangement below describes our file structure.

Vristo
- app
  - controllers
    - all controller files and folders
  - views
    - index.html.erb and all other app pages
- config
  - routes.rb - routes file
- public
  - assets
    - css
      - all the css files and folders
    - images
      - all the image files
    - js
      - all the js files and folders
- .gitignore
- .gitattributes
- Gemfile
- package.json
- tailwind.config.js

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