Parcel.js

Parcel.js guide for Trezo.

Overview

Parcel.js is a fast, zero-configuration web application bundler designed to simplify the development workflow for both small and large projects.

Parcel.js: The Zero-Config Bundler for Effortless Web Development

Parcel.js is a next-generation bundler that eliminates the complexity of configuring a build pipeline. Ideal for projects of any size, it automatically handles bundling, code-splitting, and optimizations like tree-shaking and minification without manual setup. With built-in support for JavaScript, CSS, HTML, images, and a wide range of file types, Parcel allows you to focus on coding while it manages your project’s assets efficiently in the background.

Key Benefits:

Zero Configuration: Just point Parcel at your entry file, and it handles the rest, making setup and iteration incredibly quick.
Optimized Performance: Parcel builds and hot-reloads your project blazingly fast, ensuring you see changes in real-time.
Multi-Language Support: Automatically supports JavaScript, TypeScript, JSX, CSS, SCSS, and many other formats.
Intelligent Caching: Speeds up rebuilds with a robust caching mechanism that only rebuilds changed files.
Scalable and Extensible: Parcel works well for everything from simple applications to complex, modular architectures with its plugin ecosystem.

Perfect for Developers Who Want to Skip Config Hassles

Parcel.js is an ideal choice for developers who want a straightforward, highly productive development experience without diving into complex configurations. Just code, save, and let Parcel handle the rest!

Parcel starts with a great development experience, from starting a new project, to iterating and debugging, and shipping to production. No more fiddling with configuration, or spending hours to keep up with best practices – it just works!

The Trezo template folder is located inside the downloaded .zip file. To access the template and the documentation folder, simply unzip the file.

The structure of the files and folders is as follows:

src/assets/css — Contains the CSS files.
src/assets/fonts — Contains the font files.
src/assets/images — Contains the image files.
src/assets/js — Contains the JavaScript files.
src/assets/scss — Contains the SCSS files.

Upload the template's dist files to the server with the help of one of the FTP-clients like FileZilla.

Files Edit & Upload:

Individual pages can be customized by opening them in a code editor like VS Code. Once all the customizations are complete, upload the updated project files to your hosting server to make the website live on your domain. You can use an FTP client, such as FileZilla, to upload the files.

HEAD CSS Structure

Followings are the css files which loaded inside the Head Section:

<!-- Links Of CSS File -->
<link rel="stylesheet" href="assets/scss/styles.scss" />

Javascript Structure

The following JS files are loaded before the closing HEAD or BODY section:

<!-- Link Of JS File -->
<script type="module" src="assets/js/main.js"></script>
<script src="assets/js/feather.min.js"></script>
<script src="assets/js/clipboard.min.js"></script>
<script src="assets/js/dragdrop.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/sidebar-menu.js"></script>
<script src="assets/js/fullcalendar.main.js"></script>
<script src="assets/js/apexcharts.min.js"></script>
<script src="assets/js/rangeslider.min.js"></script>
<script src="assets/js/quill.min.js"></script>
<script src="assets/js/sweetalert.js"></script>
<script src="assets/js/custom.js"></script>

Do You Want Real Demo Images?

Due to Envato's policy, we cannot include demo images in the download bundle. To request demo images, please submit a ticket through the provided link. Dedicated Support System.

HTML Structure

Trezo Parcel is a responsive template built on the Parcel + Bootstrap framework. For more details, you can refer to the Bootstrap Parcel documentation .

The overall template structure is consistent throughout, with each part organized under a section with a specific section ID. Here is the general structure:

<div class="col-lg-4 col-sm-6">
	<div class="stats-box card bg-white border-0 rounded-10 mb-4">
		<div class="card-body p-4">
			<div
				class="d-flex justify-content-between align-items-center mb-3 pb-1"
			>
				<div class="flex-grow-1 me-3">
					<h3 class="body-font fw-bold fs-3 mb-2">$25,890</h3>
					<span>Total Sales</span>
				</div>
				<div class="flex-shrink-0">
					<div class="icon transition">
						<i class="flaticon-donut-chart"></i>
					</div>
				</div>
			</div>
			<div class="d-flex align-items-center">
				<div class="svg-success me-2">
					<i data-feather="trending-up"></i>
				</div>
				<p class="fw-semibold">
					<span class="text-success">1.3%</span> Up from past week
				</p>
			</div>
		</div>
	</div>
</div>

Responsive Breakpoints

The Trezo is a responsive template and is based on the Bootstrap Framework. For more information you can check the Bootstrap CSS.

/* Max width 767px */
@media only screen and (max-width: 767px) {
}

/* Min width 768px to Max width 992px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}

/* Min width 992px to Max width 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
}

/* Min width 1200px to Max width 1399px */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
}

/* Min width 1400px to Max width 1799px */
@media only screen and (min-width: 1400px) and (max-width: 1799px) {
}

@media only screen and (max-width: 1199px) {
}

Fonts Used

By default, the template loads Inter And Epilogue font from Google Web Font Services. The font can be changed based on the website needs. Google Fonts

Font code can be found in the _variables.scss file path: assets/scss/_variables.scss

@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap");

$body-font-family: "Inter", sans-serif;
$logo-font-family: "Epilogue", sans-serif;

Note: After SCSS file run then it will be work

Option to Change the Main Color

src/assets/scss/_variables.scss

// Color
$body-color: #64748b;
$primary: #605dff;
$secondary: #3a4252;
$info: #2db6f5;
$success: #37d80a;
$warning: #ffbc2b;
$danger: #fd5812;
$light: #d5d9e2;
$dark: #000000;
$border-color: #eceef2;
$body-bg: #f6f7f9;
$primary-div: #ad63f6;
$danger-div: #ffcea9;
$gray-light: #445164;
$rating-color: #fe7a36;
$card-bg-c: #3584fc;
$card-text-c: #ffe8d4;
$gary-light: #f4f6fc;
$gray-div: #f7f8f7;
$transition: all ease 0.5s;
$box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
$body-font-family: "Inter", sans-serif;
$logo-font-family: "Epilogue", sans-serif;

// For Dark Mode Color
$dark-body-bg: #0a0e19;
$dark-body-color: #8695aa;
$dark-card-bg: #0c1427;
$dark-input-bg: #15203c;
$dark-border: #172036;

Note: After SCSS file run then it will be work

Only For RTL

If you want to use RTL only, please apply the code below.

<html lang="zxx" class="rtl"></html>

How to Run Development Server

Inside the project (parcel-bootstrap) directory.

# Install NPM
npm install

# Run the server
npm start

Speed Optimization

Please optimize all images to reduce their file size (in KB or MB) and ensure they match the size of the placeholder image at 'path: src/assets/images/...'

Tinypng

Please minify all CSS file path: assets/css/..

CSS Minifier

Please minify all JS file path: assets/js/..

Javascript Minifier

How to Change Image?

Please navigate to the image file at 'path: src/assets/images/...' and replace it with your desired image, ensuring it matches the placeholder image's size and name.

Installation Video

To help you understand the installation process better, please watch the following video tutorial. It provides a step-by-step guide on setting up the application:

Additional Notes

If you need more details, please refer to the written instructions.

Feel free to reach out to our support team if you have any questions!

Python Django

Vite