Quick Start
#
Looking to start your project quickly? Just unzip the boots4-v3.1.0.zip
. We have precompiled and packaged everything in the pages
directory for you. Start editing the pages/nav-four-item-two-column.html
with a text or code editor, save it, and open the file in your favourite browser to see the changes.
Setting up Build system
#
Unzip the boots4-v3.1.0.zip
to any folder and open a command line or terminal at that location. Boots4's dev tools require
Node and
Git . If you do not have them in your machine, please install their latest stable version from their corresponding website. As you have Node and Git installed and accessible from your terminal or command line,
install
Gulp CLI package globally with the following command:
npm i gulp-cli -g
When you’re done, install the rest of the Boots4's dependencies with:
npm i
Now run:
gulp
Running gulp will compile the SCSS, transpile the javascript, copy all required libraries form node_modules
to the corresponding pages/assets/
directory and will open a browser window to pages/index.html
All of the following folders are monitored for changes, which will tell the browser to reload automatically after any changes are made:
pages/*.html
pages/assets/fonts/
pages/assets/img/
scss/
js/
Now you can edit any html file from pages
, change SCSS variable with _user-variables.scss
, or write your own SCSS code in scss/_user.scss
Running the gulp
command will discard and regenerate all the files in following directories:
js/bootstrap/
scss/bootstrap/
pages/assets/css/
pages/assets/js/
pages/assets/lib/
Hit Ctrl+C
or just close the command line window to stop the server.
File Structure
#
Within your Boots4 you’ll find the following directories and files, grouping common resources and providing both compiled, transpiled and minified distribution files, as well as raw source files.
boots4-v3.1.0/
├── js/
| ├── bootstrap/
| ├── boots4/
| └── plugins/
├── pages/
| ├── assets/
| ├── index.html
| ├── nav-eight-item-four-column.html
| ├── nav-four-item-one-column.html
| ├── nav-four-item-two-column.html
| ├── nav-six-item-two-column.html
| ├── nav-six-item-three-column.html
| ├── nav-sixteen-item-four-column.html
├── scss/
| ├── boots4/
| ├── bootstrap/
| ├── _user.scss
| ├── _user-variables.scss
| └── theme.scss
├── .eslintrc.json
├── .gitignore
├── gulpfile.js
└── package.json
Gulp
#
To start your project run:
gulp
The gulp
command will build, serve and watch the project with the following gulp tasks:
Task |
Action |
clean |
Delete the following directories:js/bootstrap
scss/bootstrap
pages/assets/css
pages/assets/js
pages/assets/lib
|
scss |
Compiles scss/theme.scss and generates theme.css and theme.map to the pages/assets/css/ directory. |
js:bootstrap |
Concat the js files from js/bootstrap/ and transpiles with babel to bootstrap.js , bootstrap.min.js to the pages/assets/js/ directory. |
js:boots4 |
Concat the js files from js/boots4/ and transpiles with babel to theme.js , theme.min.js to the pages/assets/js/ directory. |
js:plugins |
Concat the js files according to the Paths.JS.PLUGINS array declared in gulpfile.js and transpiles with babel to plugins.js and plugins.min.js to the pages/assets/js/ directory. |
js |
Run the following tasks parallelly:
js:bootstrap
js:boots4
js:plugins
|
copy:dependency |
Copies the dependencies from node_modules/ directory to pages/assets/ directory according to the Paths.DEPENDENCIES object declared in gulpfile.js . |
watch |
All of the following folders are monitored for changes, which will tell the browser to reload automatically after any changes are made:pages/*.html
pages/assets/fonts/
pages/assets/img/
scss/
js/
|
serve |
Starts a Browsersync instance on port 3000 served from pages , defaults to index.html . |
Other available gulp tasks
Task |
Action |
scss:min |
Compiles scss/theme.scss and generates theme.min.css , and theme.min.map to the pages/assets/css/ directory. |
scss:rtl |
Compiles scss/theme.scss and generates theme-rtl.css , and theme-rtl.map to the pages/assets/css/ directory. |
scss:rtl:min |
Compiles scss/theme.scss and generates theme-rtl.min.css , and theme-rtl.min.map to the pages/assets/css/ directory. |
Adding a New Page
#
To add/replace a new page in Boots4 v3.1.0
you should set a unique id to .page
element and also assign it to data-content
attribute of .sidebar-item-wrapper
for navigating this
page from sidebar nav. For example, if we want to add feature page in nav-four-item-two-column.html
the following code need to set inside #gridNav
<div class="position-relative w-lg-50 position-lg-fixed four-item-two-column" id="gridNav">
<div class="row minh-lg-100">
<div class="col-6 minh-25vh h-lg-50vh sidebar-item-wrapper py-5" data-content="feature">
<div class="bg-holder" style="background-image:url(assets/img/navigation/feature.jpg);"></div>
<div class="sidebar-item">
<img class="mb-2 mb-lg-3 nav-icon" src="assets/img/lineicons/your-icon.svg" alt="" />
<h2 class="font-weight-light text-white fs-1 fs-xl-3">Feature</h2>
</div>
</div>
</div>
</div>
Now four-item-two-column.html
page structure will look like this
<main>
<div class="page position-absolute w-100" id="feature" style="display: none;">
<div class="row no-gutters minh-100vh">
<div class="col-lg-9 order-1 order-lg-0 page-content">
<footer class="page-footer">
<div class="bg-holder" style="background-image:url(assets/img/sidebars/your-feature-image.jpg);background-position: center; transform: scale(1.1);"></div>
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="row align-items-center">
<div class="col-lg-6 text-lg-left">
<p class="fs--1 text-uppercase ls font-weight-bold mb-0">Copyright © 2018 Boots4™ inc.</p>
</div>
<div class="col-lg-6 text-lg-right mt-2 mt-lg-0">
<p class="fs--1 text-uppercase ls font-weight-bold mb-0">Made with<span class="fas fa-heart mx-1"></span>by
<a class="text-light" href="https://themewagon.com/">Themewagon</a>
</p>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
</main>
Adding a New Plugin
#
Adding a new plugin to your Boots4 is simple. You Here are two ways you can do that.
Simple approach
Place your new plugin in pages/assets/lib
folder. Eg: to add the lightbox.js
plugin, we will download it from
here, unzip it and place the lightbox2
folder in pages/assets/lib
folder.
Using NPM
Suppose we are installing the lightbox.js
plugin. Here are the steps:
Step 1:
npm install lightbox2 -S
Step 2:
In your gulpfile.js
, add the plugin at the end of the Paths.DEPENDENCIES
variable. eg:
Paths = {
...
DEPENDENCIES: {
...
'lightbox': {
FROM: 'node_modules/lightbox2/js/lightbox.js',
TO: JS,
},
},
...
},
or
Paths = {
...
DEPENDENCIES: {
...
'lightbox': {
FROM: 'node_modules/lightbox2/dist/*.*',
TO: lib,
},
},
...
},
Here, JS
refers to pages/assets/js
and lib
refers to pages/assets/lib
, where gulp will copy files from the lightbox.js
plugin. We use the JS
folder when
we need only the js files from the plugin. Otherwise, we use the lib
folder for plugins like owl.carousel
Step 3:
Run the following command:
gulp copy:dependency
Built-in plugins
#
Count Up
#
A simple and html agnostic countup plugin for jQuery
Implimentation in Boots4
Example
<span data-countup="7499">0</span>
Isotope
#
Filter & sort magical layouts.
Masonry -
Filter -
Implimentation in Boots4
Lightbox 2
#
Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page.
Implimentation in Boots4 -
Full Documentation
Example
<a href="assets/img/projects/your-preview-image.jpg" data-lightbox="image" data-title="my caption">
<img src="assets/img/projects/your-image.jpg" alt="" />
</a>
Owl carousel 2
#
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
Implementation in Boots4 -
Full Documentation
Example
<div class="owl-carousel owl-theme owl-dots-inner owl-theme-white" data-options='{"items":1,"autoplay":true,"loop":true,"animateOut":"fadeOut"}'>
<img class="rounded fit-cover" src="assets/img/your-first-iamge.jpg" alt="" />
<img class="rounded fit-cover" src="assets/img/your-second-iamge.jpg" alt="" />
</div>
Rellax
#
Rellax is a buttery smooth, super lightweight (1021bytes gzipped), vanilla javascript parallax library.
Full Documentation
Remodal
#
Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
Implimentation in Boots4 -
Full Documentation
Example
<a class="btn btn-primary" href="#" data-remodal-target="modal">Show Modal</a>
Semantic UI (Accordion)
#
An accordion allows users to toggle the display of sections of content.
Implimentation in Boots4 -
Full Documentation
Example
<div class="ui styled fluid accordion mt-4 border-0" data-options='{"exclusive":false}'>
<h5 class="title active"><span class="fas fa-plus mr-1 text-800" data-fa-transform="shrink-6 down-1.5"></span> What is Boots4?</h5>
<div class="content pl-5 active">
<p>Bootst4 is a first Bootstrap 4 premium template. It is published in 1896 by talented Boots4 Team.</p>
</div>
<h5 class="title"><span class="fas fa-plus mr-1 text-800" data-fa-transform="shrink-6 down-1.5"></span>
<div class="d-inline-block mb-0">Why should I use Boots4?</div>
</h5>
<div class="content pl-5">
<p>There are many reason to use Boots4 Template. Unique layout design, smooth animation and clean ui design are the most important features of Boots4 Bootsrap Template.</p>
</div>
</div>
jQuery.mb.YTPlayer
#
An HTML5 Background player for YouTube video.
Implimentation in Boots4 -
Full Documentation
Example
<section class="text-center py-7">
<div class="bg-holder overlay overlay-2" style="background-image:url(assets/img/headers/header-event.jpg);">
<div class="youtube-background" data-property="{"videoURL":"https://www.youtube.com/watch?v=hLpy-DRuiz0","startAt":10,"stopAt":584,"mute":true,"showYTLogo":false}"></div>
</div>
<div class="text-center">
<h5 class="text-white">Video Background</h5>
</div>
</section>
Loaders.css
#
Delightful and performance-focused pure css loading animations.
Full Documentation
Sticky Kit
#
Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.
Use class="sticky-kit"
on any dom element to make it sticky relative to it's parent.
Full Documentation
Boots4 has a built-in universal php-ajax form that can grab dynamic amounts of inputs and send it to any given email address. To make the form work, simply add the class .zform
like <form class="zform">
.
You can also specify where to send the data via an hidden input:
<input type="hidden" name="to" value="username@domain.extension" />
Other reserved
name
fields are:
subject
,
email
,
name
See the sample code under the form bellow for better understanding.
HTML
<form class="zform" method="post">
<div class="form-group">
<input class="form-control" type="hidden" name="to" value="username@domain.extension" />
</div>
<div class="form-group row">
<label class="col-2 col-form-label text-right">Name :</label>
<div class="col-10">
<input class="form-control" type="text" name="name" required="" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label text-right">Subject :</label>
<div class="col-10">
<input class="form-control" type="text" name="subject" required="" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label text-right">Email :</label>
<div class="col-10">
<input class="form-control" type="email" name="from" required="" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label text-right">Field One :</label>
<div class="col-10">
<input class="form-control" type="text" name="field-1" placeholder="Optional" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label text-right">Field Two :</label>
<div class="col-10">
<input class="form-control" type="text" name="field-2" placeholder="Optional" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label text-right">Message :</label>
<div class="col-10">
<textarea class="form-control" rows="8" name="message" placeholder="Write your message here..."></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-10 offset-2">
<input class="btn btn-primary" type="submit" name="submit" value="Send!" />
</div>
</div>
<div class="zform-feedback"></div>
</form>
Integrating reCaptcha
Get your secret and site key
here ⟶
HTML
<form class="zform" method="post">... ...
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
<input type="submit" value="Submit" />
</form>
JavaScript
<script src="https://www.google.com/recaptcha/api.js"></script>
PHP
Open assets/php/form-processor.php
and change the secret key with yours at line: 13
$reCaptchaSecret = "YOUR_SECRET_KEY";
Google Map
#
Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
HTML
<div class="googlemap minh-50vh" data-latlng="48.8583701,2.2922873,17" data-scrollwheel="false" data-icon="assets/img/map-marker.png" data-zoom="17" data-theme="Default">
<div class="marker-content py-3">
<h5>Eiffel Tower</h5>
<p>Gustave Eiffel's iconic, wrought-iron 1889 tower,
<br/> with steps and elevators to observation decks.</p>
</div>
</div>
JavaScript
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async></script>
Get your API key⟶
Map color schemes
Change the value of data-theme=''
to any of the followings
Default
Gray
Midnight
Hopper
Beard
AssassianCreed
SubtleGray
Tripitty
Example
With AssassianCreed
scheme
Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
HTML
<div class="googlemap minh-50vh" data-latlng="48.8583701,2.2922873,17" data-scrollwheel="false" data-icon="assets/img/map-marker.png" data-zoom="17" data-theme="AssassianCreed">
<div class="marker-content py-3">
<h5>Eiffel Tower</h5>
<p>Gustave Eiffel's iconic, wrought-iron 1889 tower,
<br/> with steps and elevators to observation decks.</p>
</div>
</div>
Example of street view
Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
HTML
<div class="googlemap minh-100vh" data-latlng="48.8588723,2.2932638" data-pov='{"heading":120,"pitch":0}' data-scrollwheel="false" data-icon="assets/img/map-marker.png" data-zoom="1" data-theme="streetview"></div>
Changelog
#
Boots4 - 3.1.0
11 September, 2019
Add
- Add
.gitignore
file
- Add
README.md
file
- Add
jTap
plugin to assets/lib
folder
Update
- Update
theme.js
- Remove
jTap
plugin from packages.json
- Remove
jTap
plugin path from gulpfile.js