Getting Started

🙏 Thank you for purchasing 🙏
Hypxo - React Landing Page Templates

Introduction

Thank you for purchasing the Hypxo! We’re pleased you found what you were looking for. Our goal is to ensure you're always satisfied with your purchase. We hope you will easily create an outstanding website using our template.

Before proceeding with the template installation, we recommend following the steps listed in this guide. We have included all the necessary information, guidelines, and details you will need to use the Hypxo template effectively.

If you can't find the answer you're looking for, we encourage you to reach out to us through our support portal. Please generate a ticket through our support portal, and you will hear back from us very soon.

Directory Structure

Extract the zip file you received after purchase and you would find the exact below files and folders:

├── Reactjs
    ├── public
    ├── src
        ├── assets
            ├── componets
            ├── fonts
            ├── images
            └── scss
                ├── custom
                ├── _custom-variable.scss
                ├── app.scss
                ├── bootstrap.scss
                ├── custom.scss
                └── icons.scss
        ├── App.jsx
        ├── main.jsx
    ├── .gitignore
    ├── eslint.config.js
    ├── index.html
    ├── package.json
    ├── README.md
    └── vite.config.js
For Developers

You can boost your development with Hypxo on:

  • Bootstrap
  • Gulp
  • Yarn
  • SASS
Browser Compatibility
  • Chrome (Windows, Mac, Linux)
  • Firefox (Windows, Mac, Linux)
  • Safari (Mac)
  • Microsoft Edge
  • And other WebKit browsers

Setup

We are using vite which allows to have complete automatation for build flow. In case if you don't know - Vite is a Vite is a toolkit for automating painful or time-consuming tasks in development workflow, so you can stop messing around and build something. You can read it more about it here.

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Git

    Make sure to have Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

  • Nodejs

    Make sure to have Node.js installed & running on your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 18. We suggest you to use LTS version of Node.js.

  • Node version support policy
    1. Refer to the releases page for specific information about the supported Node.js versions as they may vary by releases.
    2. Node versions that hit the end of life https://github.com/nodejs/Release, will be dropped from support at each node-sass release (major, minor).
    3. We'll discontinue the production of binaries for unsupported releases and halt compatibility testing for potential issues with dependencies. However, we won't prevent installations for those who wish to manage their own support.
    4. Each new Node.js release demands minor internal adjustments and collaboration with CI providers like AppVeyor and GitHub Actions. To streamline communication, we'll create a single issue where interested parties can subscribe, while any extra issues will be closed.
    Below is a quick guide for minimum and maximum support supported versions of node-sass:-
    NodeJS Supported node-sass version Node Module
    Node 18 8.0+ 108
    Node 16 6.0+ 93
    Node 15 5.0+ 88
    Node 14 4.14+ 83
Installation
Once you've completed the preceding steps, you can execute the following commands in the terminal or command prompt from the root directory of Hypxo for javascript project. This will either run the project locally or build it for production use:
  • This would install all the required dependencies in the node_modules folder.

    npm install

  • Runs the project locally, starts the development server and watches for any changes in your code. The development server is accessible at http://localhost:3000

    npm run dev

  • After executing the provided command in the terminal, you will obtain this output:
  • Generates a /build directory with all the production files.

    npm run build

SCSS: We suggest you do not change any scss files from the assets/scss/custom folders because getting new updates will break your SCSS changes if any you have made. We strongly suggest you use a custom.scss file and use that instead of overwriting any template's custom scss files.

Light Mode

To have Light mode enabled, Keep your html element with data attribute data-bs-theme="light".
E.g. <html data-bs-theme="light"> to have Dark layout.

Dark Mode

To have Dark mode enabled, Keep your html element with data attribute data-bs-theme="dark".
E.g. <html data-bs-theme="dark"> to have Dark layout.

RTL Mode

To have RTL mode enabled, replace the reference of bootstrap-rtl.min.css, app-rtl.min.css and in the <html dir="rtl">. Because it will set to default the LTR version.

📦 Credits / Plugins

We extend our heartfelt gratitude to the ingenious creators behind the exceptional products and plugins that serve as alternatives in the Hypxo project.

Plugins Url
Bootstrap http://getbootstrap.com/
Bootstrap Validator https://github.com/1000hz/bootstrap-validator
imagesLoaded https://imagesloaded.desandro.com/
Isotope Layout https://isotope.metafizzy.co/
Isotope Layout https://isotope.metafizzy.co/
jQuery https://jquery.com/
jQuery Backstretch https://github.com/jquery-backstretch/jquery-backstretch
Parallax.js https://github.com/pixelcog/parallax.js/
jquery.mb.YTPlayer https://github.com/pupunzi/jquery.mb.YTPlayer
Simple Text Rotator https://github.com/peachananr/simple-text-rotator
Magnific Popup https://dimsemenov.com/plugins/magnific-popup/
Owl Carousel https://owlcarousel2.github.io/OwlCarousel2/
Particles JS https://github.com/VincentGarreau/particles.js
Remix Icon https://remixicon.com/
Typed JS https://github.com/mattboldt/typed.js

Support

Once again thank you for your purchase. We'll be happy to answer the the questions you have related to the template. In case if you have any suggestion or feature, request please feel free to contact us, We'll try to implement it and will release as part of future updates.

Thanks for purchasing template and for supporting our work. If we fail here in this documentation, please e-mail us imbulltheme@gmail.com. If you have a spare time, please go and rate my template. We will appreciate that.

Stay Awesome!

- BullTheme

Changelog

v1.0.0 - 10 October 2024

  • Initial released