Learn to work with the existing plugins or install new ones. Optimize your web project and use the plugins only when needed in order to get great speed results.

Installation

All plugins are installed using package managers like npm or Yarn. In the package.json file you will find a dependencies array where all the packages are stored. You can choose which one will remain or add new ones. Also, you can install plugins directly from the terminal using the npm i PACKAGE_NAME.

Usage

After the installation is finished there are a few ways you can integrate those plugins in your web project:

CSS

JS

Bundled

You can choose to use Gulp or Laravel Mix to bundle all libs files in a single file. It is a good option when you don’t have to many plugins that could affect the overall speed and performance.

For Purpose, we chose to create a single JS file that includes the most important and used scripts throughout the theme under the name purpose.core.js. It must be the first script included in your scripts section from the bottom of the HTML page. It contains the following scripts:

purpose-website-ui-kit/
├── assets/
   ├── libs/
   ├──├── jquery/dist/jquery.min.js
   ├──├── bootstrap/dist/js/bootstrap.bundle.min.js
   ├──├── in-view/dist/in-view.min.js
   ├──├── sticky-kit/dist/sticky-kit.min.js
   ├──├── svg-injector/dist/svg-injector.min.js
   ├──├── jquery.scrollbar/jquery.scrollbar.min.js
   ├──├── jquery-scroll-lock/dist/jquery-scrollLock.min.js
   └──└── imagesloaded/imagesloaded.pkgd.min.js

Individually

You can choose to include the JS resources required by a specific library one by one in the page. It is a good option when you have many plugins and need to optimize pages by loading the resources only when needed.

In the plugin’s description page you will see that each plugin has a usage section where it is shown what resources you need to add on the web page.

So, if you don’t want to use purpose.core.js you can replace it with:

<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/assets/libs/in-view/dist/in-view.min.js"></script>
<script src="/assets/libs/sticky-kit/dist/sticky-kit.min.js"></script>
<script src="/assets/libs/svg-injector/dist/svg-injector.min.js"></script>
<script src="/assets/libs/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="/assets/libs/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<script src="/assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script>

Initalization

After installing and integrating a plugin on your web page you will need to initialize it. For vendor files/plugins our approach is to create a new file with the name of the plugin in the resources/js/components/libs folder. After adding the init script, Gulp or Laravel Mix will automatically compile it in the main JS file.