Webpack

Webpack guide for Trezo.

Overview

Webpack: The Robust and Configurable Module Bundler for Complex JavaScript Applications

Webpack is a powerful and flexible module bundler that takes your code from development to production with optimized performance. It transforms your project’s JavaScript, CSS, images, and other assets into efficient bundles, ready for deployment, by leveraging a deeply customizable configuration system. Webpack is an ideal tool for building large-scale applications, enabling advanced optimizations and supporting complex project structures.

Key Features of Webpack:

Modular Asset Management: Webpack processes JavaScript, CSS, images, and even custom file types as modules, enabling a unified build process.
Powerful Configurability: From loaders that transform files to plugins that extend functionality, Webpack’s configuration can be tailored to meet any requirement, allowing for a highly customized build environment.
Dynamic Code Splitting: Break down your application into smaller chunks that are loaded on-demand, which can improve load times and runtime performance.
Tree Shaking and Optimizations: Webpack automatically eliminates unused code through tree-shaking, producing lighter, faster bundles.
Rich Ecosystem of Plugins and Loaders: Extend Webpack’s capabilities with a vast library of community and official plugins and loaders, allowing for endless possibilities in asset management and optimization.

Ideal for Developers Building Scalable, Complex Web Applications

Webpack is the go-to solution for developers who need control and flexibility for complex applications. While it can require some initial configuration, Webpack’s power, extensibility, and advanced optimization make it an invaluable tool for delivering high-performance, modular applications at scale.

Folders Structure

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.

Javascript Structure

Followings are the JS files which loaded before the end of HEAD or BODY Section:

<!-- Link Of JS File -->
<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 Webpack is a responsive template built on the Webpack + Bootstrap framework. For more details, you can refer to the Bootstrap Webpack 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 run build

After running npm run build, there will be a new folder dist, which will contain all of the HTML, CSS & JS files. Now run dist/index.html in your browser.

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!

Vite

ASP.net Blazor