Plugins

Various non-Bootstrap JavaScript plugins are included to provide extended functionality and components.

Improving the speed of your site

Plugins should be removed when not used in order to improve page load times. This is an important aspect for user experience and search engine optimization.

Plugins have their own folder: /src/plugins, where you may place their JS and CSS files. They are separated from the standard JS & CSS processing pipeline in order to provide more control and flexibility in how to use them.

There are two ways to include plugins in your webpages.

Bundled

All JS files from the /src/plugins directory are concatenated and minified into one file, /dist/js/plugins.js. Including this file in your HTML file will make all plugins available on that page. 


<script src="js/plugins.min.js"></script>
Most plugins come with their own CSS as well. You should manually import these in your stylesheet, using an import statement such as: 

@import "../plugins/your-plugin/your-plugin.css";
Be sure to import this CSS before any other theme files, in order to provide custom styling of the plugins.

Individually

Alternatively, you may individually include each plugin in your webpage. Additionally to concatenating all JS from /src/plugins, all files from the plugins directory are copied to /dist/plugins, without any processing. This allows you to include a single plugin in your webpage, by simply including the script and stylesheet as follows: 


<link href="plugins/your-plugin/your-plugin.css" rel="stylesheet">
<script src="plugins/your-plugin/your-plugin.js"></script>
Again, be sure to include these files before loading any other theme related stylesheets or scripts, in order to allow the theme to provide custom styling for the plugin.

Read more

Components Getting started