Documentation

  • Home
  • Documentation
Preskool Banner

Introduction

Preskool is a simple and easy-to-access management dashboard for education, including schools, colleges, and universities.

Requirement

Technologies
Vue
Node
System Requirements
  • vuejs version >= 3.5.25
  • Node js Package
  • Node version = ^24x
  • Visual Studio Code
  • Terminal

Core features

Preskool offers Several powerful Home page and modern interface.

Built-in Applications
  • Build with vuejs 3.5.25
  • Build with vuejs Scripts
  • Create vuejs App Supported
  • Hooks based architecture
  • Pure Components Based vuejs
  • Fully Responsive Design
  • Multiple Layouts
  • User friendly design
  • Compatible Browsers: Firefox, Safari, Opera, Edge, Chrome
  • Json format used
  • Easy to Customize with css Variables

File Structure

Project Overview

The project follows a modular structure with clear separation of concerns.

		
preskool/
└── vue/
    ├── public/
    │   └── favicon.svg
    │
    ├── src/
    │   ├── assets/
    │   │   ├── css/
    │   │   ├── fonts/
    │   │   ├── img/
    │   │   ├── json/
    │   │   └── scss/
    │   │
    │   ├── components/
    │   ├── router/
    │   ├── views/
    │   ├── App.vue
    │   └── main.js
    │
    ├── index.html
    ├── package.json
    ├── README.md
    └── vite.config.js

Installation Guide

Prerequisites
Node.js Installation

Before installing Sass, ensure you have Node.js installed on your system:

Vue-cli

Open the terminal in your root directory, By running the following command you will get a vue-cli:

npm install -g @vue/cli
NPM Packages
  • Before proceding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.
npm install
Application Run
  • For running a project,run the command:
npm run dev
Plugins Install
  • To install any plugins in your application, you have to run the following command
npm install plugin_name
Local Serve
  • Now you can run this Template in any web browser from your PC or Laptop.
  • vue/template is a folder name, you can change as per your wish how you used the folder
http://localhost:3000/
Build Project
  • Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.
Installation Steps
1
Unzip Template Files

After downloading, extract the Preskool package. Inside, you will find the folder (Source Code), which contains all necessary files.

2
Copy Files to Server

Open the Vue folder, then copy all files and paste them into your localhost directory

3
Run in Browser

Once the files are in place, you can open the template in any modern web browser (Chrome, Firefox, Safari, Edge) from your PC or laptop.

Fonts

The default font is Roboto. To change the font:

Update the @import URL and the $font-family-primary variable in variables.scss: 

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


	body {
		font-family: "Roboto", sans-serif;
	}

Color System

The design token variables are defined in the variables.scss file.

Background Color Change

You can change the header background color in header.scss as per your wish


	.header {
		background: $white;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		height: 60px;
	}

Dark Mode

How it Works

Dark mode is controlled by a theme attribute/class on the root element. When activated, all design tokens are overridden to dark variants.

<html lang="en" data-theme="dark">

Dark mode styles are defined in the [data-theme=dark] block in themes.scss:

RTL Support

To enable Right-to-Left (RTL) layout, add the layout-mode-rtl class to the <html> tag:

<html lang="en" class="layout-mode-rtl">

Bootstrap handles RTL layout transformations automatically when the dir attribute is set. All margin, padding, and positioning utilities adapt to the RTL direction.

RTL Demo

An RTL demo page is available at layout-rtl.html in the HTML version for reference.

Icons

Use Tabler icons with specific class


	<i class="ti ti-layout-grid-add"></i>
	<i class="ti ti-layout-grid-add"></i>
	<i class="ti ti-users"></i>

Layout Options

Preskool offers multiple layout options to suit different application needs. Each layout can be combined with light or dark mode.

Default Layout

The default layout features a full vertical sidebar on the left, a horizontal topbar at the top, and the main content area. This is the standard layout used across all dashboard pages.

  • Full-width sidebar with navigation menu, logo, and user profile
  • Top header with search, notifications, and user actions
  • Responsive - sidebar collapses to overlay on mobile devices

Mini Sidebar

The mini sidebar layout collapses the sidebar to show only icons, providing more space for the main content area. Users can toggle between expanded and collapsed states using the sidebar toggle button.

  • Collapsed sidebar showing only menu icons
  • Hover to expand and reveal full menu text
  • Toggle via the hamburger button in the topbar

License

Preskool is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.

Regular License

Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.

Extended License

For use by you or one client in a single end product for which end users may be charged.

What are the main differences between the Regular License and the Extended License?

Note

If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.

Credits

NAME URL
Bootstrap https://getbootstrap.com/docs/
Bootstrap-vue-3 https://www.npmjs.com/package/bootstrap-vue-3
Fontawesome https://www.npmjs.com/package/@fortawesome/fontawesome-free/
Fullcalendar https://www.npmjs.com/package/fullcalendar
Vue3-apexcharts https://www.npmjs.com/package/vue3-apexcharts
Vue3-perfect-scrollbar https://www.npmjs.com/package/vue3-perfect-scrollbar
Vue DatePicker https://www.npmjs.com/package/vue3-datepicker
Vue3-carousel https://www.npmjs.com/package/vue3-carousel
Vue3-select2-component https://www.npmjs.com/package/vue3-select2-component
Vue-easy-lightbox https://www.npmjs.com/package/vue-easy-lightbox

Support

Need Support?

If this documentation does not address your questions, please feel free to contact us via email at support@dreamstechnologies.com

Reach the team at GMT+5:30. Typical reply within 12–24 hours on weekdays — rarely up to 48 hrs during holidays. Support is available to verified buyers for template-related issues.

Contact Support

Important Note : We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.

Custom Work

Do you need a customized application for your business?

If you need a customized application for your business depends on your specific requirements and goals, Please contact us. Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.

Don't Miss Out on the Benefits of Customization!

Unlock the potential of your project. It's time to ensure your project isn't another cookie-cutter solution but truly unique and effective one.

Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!

We'll tailor the application to meet your specific needs and preferences.

We will upload your website to the server and ensure it is live.

Book an Appointment Get a Free Quote
thanks

Thank You

Thank you once again for downloading Preskool.
We hope you're enjoying your experience, and we kindly request that you take a moment to share your valuable review and rating with us.

Review Link