VitalityDocumentation


An overview of the Vitality theme's features along with usage instructions for it's various components.

Introduction

Vitality is a Bootstrap 4 based theme for building single page websites.

Thank you for choosing Vitality by Start Bootstrap! If you have any issues or questions regarding this theme, contact us directly at support@startbootstrap.com and we will answer your questions as soon as possible!

You must purchase a license to use this theme, which you can do so at the Start Bootstrap Shop!

What's Included

When purchsing this theme, the download package will include a /dist directory which will contain the compiled theme. Within that folder, you will see an index.html file with the theme itself, along with supporting /css, /fonts, /img, /js, and /mail directories.

The theme package also includes a /src directory which includes all of the source files used to create the theme. The gulpfile.js file and package.json file in the root directory are also development files used to build the theme, and should only be used by advanced developers looking to modify the theme's development files and recompile.

Plugins

Vitality utilizes some powerful, third party plugins for certain components. They are:

  • Bootstrap 4
  • jQuery
  • jQuery Easing
  • Fancybox
  • HTML5 Device Mockups
  • Slick Carousel

Color Schemes

Vitality includes nine preset color schemes to choose from. When you open the index.html file, you will see the default stylesheet being loaded. Within the head tag of the file, you will see:

If you wanted to use the blue color scheme for example, you would uncomment that color scheme and delete the rest from the head tag. The end result would look like this:

Simple delete the color schemes you're not using from the HTML, and you can also delete them from the /dist/css directory as well - there is no need to have unnecessary files taking up valuable space on your web server!

Custom Colors

If you want to use a custom color other than one of the preset stylesheets, you can do so by changing the primary color variable in the src/scss/_variables.scss file, and then recompiling the SCSS using the Gulp task included with the theme package. For more information on this, see the advanced usage section of these docs.

Important: Use only one stylesheet!

Using more than one stylesheet is not necessary. Just use one stylesheet and delete the rest, the last stylesheet loaded will override the previous is multiple stylesheets are used.


Components

Here is a comprehensive overview of how to use and modify the components included with the Vitality theme package.

Navigation

There are a few things to note when using the Vitality navbar. It is built on top of the deafult Bootstrap navbar, and the markup is identical, with a few minor additions. The first addition you will see is the usage of the #navbar-main ID on the nav component. This sets the custom styling for the navbar, and should not be changed or removed.

Changing the .navbar-brand image

Next, you will notice that we have replaced the text in the .navbar-brand element with an SVG image. The HTML appears as follows by default:

The easiest way to replace the navbar brand image is to replace and overwrite the logo-navbar.svg image in the dist/img directory with your own SVG image. Doing so would mean you don't have to change any of the HTML.

If you are using a different file type for the navbar brand image, then you will need to make sure the file path and the file type is correct. Let's say, for example, you have a new PNG image that you want to use for the navbar brand imagg; the markup would change from what you see in the box above to the following:

The above snippet assumes that you have a new image file called logo-navbar.png in the dist/img directory.

If you want to use text instead of an image, keep in mind you may have to restyle the text on your own. The best way to do this would be to create a new stylesheet and write your own custom CSS. Make sure to load this after your theme-default.css file (or whichever color scheme file you are choosing).

Troubleshooting FAQ: Why isn't my brand image showing up?

If your image isn't appearing, first make sure that the file extension of your image matches the file extension you're using in your HTML. After that, check to make sure that the file path is correct. Note: keep in mind that file extensions can be case sensitive (.jpg is different than .JPG)!

Adding/modifying navigation links

When you items in the .navbar-nav element, you'll see all of the default Bootstrap classes, along with the .js-scroll-trigger class. You'll also notice that the links for each .nav-link are set to an ID. This is how the one page scrolling system works.

Any time you want a navigation link to scroll to a position on the page, just set an ID on the element you wish to scroll to, make sure the link points to that target, and add the .js-scroll-trigger class to the link. For example, if you wanted to add a new item to the navbar, you would add the following list item within the .navbar-nav:

From there, you would need a link target, so on the page somewhere in your HTML, you would have a section that has the ID #new-link, like so:

Quick tip: you can use .js-scroll-trigger anywhere on the page!

If you look at the first call to action section of the default page, you'll notice a .js-scroll-trigger on a button within the call to action. You can use scroll triggers anywhere on the page, just set the link target to the ID of the section you want to scroll to, and make sure the link has the .js-scroll-trigger class!

Masthead

Vitality includes a few different masthead header options. You can have a full or partial page height header, and your header background can be either an image or a video.

Masthead Demos
Changing a masthead background image

The best, and easiest way to change the header background image is to replace the image file within the dist/img directory. You will see a file called bg-header.jpg. Overwrite this file with your own image. We reccommend that you keep the image as a JPG. If you want to change image formats, you will need to edit your theme's CSS file. To do this, you will need to go into your theme's CSS file, and find the .masthead class, and modify the URL attached to the background rule. By default, it is set as follows:

.masthead {
  position: relative;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.7))), url("../img/bg-masthead.jpg");
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("../img/bg-masthead.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

If you need to change the file name, path, or extension, simply edit the URL in both the normal background rule and the webkit background rule.

Quick tip: you can change the color and/or opacity of the background overlay!

If you look at the CSS snippet above, before the URL you will see a linear gradient. You can change the RGBA color value (which is black by default) or the opacity of the gradient which will change the overlay of the background image!

About

The about section has no custom CSS classes added. There are, however, custom icons that are being used for the about section - which can be modified.

Modifying the about section icons

The about section icons are from Font Awesome's free library of icons. You will see four i elements within that section with the .fas, .fa-4x, and .fa-fw classes, along with another class that identifies which icon to use .fa-* (where the * is the name of the icon, for example, .fa-code). You will need to change the .fa-* class to an icon. For a full list of icons, visit http://fontawesome.com/icons . This theme includes the free version of Font Awesome, but you can upgrade to a pro version to get access to the entire icon library.

Team

By default, the team section has 5 team members which are organized on a carousel, using the Slick Carousel plugin. When modifying the team section, you can change the team member images, text content, and social links. You can also add or remove team members from the carousel.

Changing a team member image

The best and easiest way to change the image for a specific team member is by replacing the image file in the dist/img/team directory. In that directory you will find the 5 default team member images. Replace these images with another JPG with the same name, and it will replace that team members portrait.

Image Dimensions Warning!

It is recommended that you use images that are 400x400 in pixels. If your team member images are different sizes, the sizes of the carousel items may appear asymmetrical.

Modifying team member social links

Each team member has a variety of links for social profiles. You can add, remove, or modify the existing social links by using icons from the Font Awesome icon library. Each icon has a .fab, .fa-fw, and .fa-* class (where the * is the social icon being used, for example .fa-facebook-f). To change these icons, you can go to http://fontawesome.com/icons and sort by their brand icons to see what is available. You will also want to set the link target for each of the link elements to your team member's social profile on your chosen network.

Adding/removing team members from the carousel

If you want to add or remove team members from the carousel, you need to do so at the .carousel-team-item level. Example markup for a single carousel item is:

To add items, copy the above snippet and paste it into the team carousel. Make sure to set a path for the team member image, and make sure to modify the social links, and add link targets, as needed.

To remove items, simply delete the entire .carousel-team-item element from the carousel.

Process

The process section of the Vitality theme uses a few custom classes for positioning and spacing purposes. More importantly, if you need to change the icons in the process section, you can select the icons you want to use from the Font Awesome icon library.

Modifying process section icons

In the process section, you will see three i elements with the .fas class and another .fa-* class (where the * indicates the icon being used, for example .fa-heart). For a complete list of icons you can use, go to http://fontawesome.com/icons. This theme includes the free version of the Font Awesome icon font, but you can also purcase the pro version to have access to all of the icons available.

Portfolio (Carousel)

The portfolio carousel utilizes the Slick Carousel plugin for slider functionality, along with Bootstrap modals for the individual item popup windows and the HTML5 device mockups plugin for device previews. There are a few things to consider when modifying the portfolio carousel.

Modifying a portfolio carousel item

Each portfolio carousel item has a background image, a preview image, and a modal window that is linked to, along with text content.

First, you will need to change the background image of the carousel item, and the preview image of the carousel item. The best and easiest way to do this is by replacing the default images in the dist/img/portfolio/carousel directory. Make sure to replace the existing demo images with JPG files that have the same name! Otherwise you will need to modify the theme's CSS.

To modify the content of the modal window, look at the data-target of the View Details button in each item, and find the corresponding modal, all of which are listed below the carousel. For example, Portfolio Carousel - Item 1 has a View Details button with data-target="portfolio-modal-1". Scrolling down the HTML, you will find a div with the class name .portfolio-modal and the ID #portfolio-modal-1. This is where you can edit the contents of the popup modal for that specific item.

The theme includes 4 portfolio items by default, and you can edit each one by modifying the carousel item HTML along with it's corresponding modal window.

Changing the device type for a carousel item

By default, all of the portfolio carousel items use a Macbook Pro as the device type being shown. You can change this in the HTML by modifying the data attribute on the .device element of each carousel item. For example, if you wanted to change from a MacBook Pro to an iPad, your markup would look like this:

For full documentation on available device options, visit the documentation page for the HTML5 Device Mockups plugin.

Adding items to the portfolio carousel

If you wish to add items to the portfolio carousel, you will need to do so in two steps. First, you will need to add an item to the portfolio carousel, and then you will need to link that item to a corresponding modal window.

The markup for a portfolio carousel item is as follows:

Add the above snippet as a child to the .carousel-portfolio element on the page. You will also need to make sure to set the data-target of the View Details button in your portfolio item to a modal window, and you will need to make sure the image path is correct in the preview. The background images for the portfolio items are set in the theme's CSS. If you are adding another item, you will need to set the background of the portfolio item using custom CSS. The markup for a new modal window is:

Make sure the ID of your modal window and the data-target of your portfolio carousel item match - otherwise, nothing will happen when the View Details button is clicked! For example, if you were going to add a fifth portfolio modal, the portfolio modal would have an ID of #portfolio-modal-5, and the corresponding portfolio item's view details button would have a data-target="portfolio-modal-5" set.

Recommended image sizes for device mockups:

The ideal dimensions for the preview images that are located inside of the device mockups is 1018x636 pixels. If you are using a different device, your images may need to be resized!

Portfolio (Grid)

By default, the portfolio grid option includes six items, each of which have a hover effect, and when clicked, the open a gallery powered by the fancybox plugin.

Adding more items to the portfolio grid

Each grid item is contained within a Bootstrap column. To add more items, copy and paste the below snipped into the portfolio grid after the last item, and before the closing of the .row element.

Make sure to add a new image to the dist/img/portfolio/grid directory and set the to image paths in the snippet above to your image's location. If this isn't done, the image will not appear. You can use a smaller image for the preview image, and a larger image for the link target, but for demo purposes, the same image is used twice.

Testimonials

The testimonials carousel is also handled by slick carousel, and functions similarly to the team and carousel sliders. To add another item to the testmonials, simply add another .caroursel-testimonials-item to the carousel before the close of the .carousel-testimonials element.

You can use the below snippet to easily add more items to the testimonials carousel:

Contact

The contact form is a working PHP/AJAX form with validation. First and foremost, if you are testing the form it must have a mail server attached and PHP enabled on the server. For example, if you are just testing the form locally, the form will not work - it must be on a live web server, or on a testing server with PHP and a mail server.

To set up the form, open the dist/mail/contact.php file and change the email address on line 18, which is set to yourname@yourdomain.com by default. Replace that email address with your own. You can also change the email address on line 21, which is set as noreply@yourdomain.com. Since the form sends from the webserver, you don't need to reply to the webserver - but changing this is optional since the form is set up to auto reply to the email address the sender put in the email field of the form.

Contact form not working? Troubleshooting tips:

There are a number of reasons the contact form might not be working properly. You don't need to change anything in the dist/js/contact.js file, ONLY the email address on line 18 of the dist/mail/contact.php file.

For advanced troubleshooting, see this post on StackOverflow, where a community user has provided comprehensive answers to why a PHP mailer might not be working properly.

Footer

The footer contains a few social links, which you may want to change. In order to do so, check out the brand icons availabe on Font Awesome.

Callouts

There are two callouts sections that are included with Vitality: the full callout, and the email subscribe callout (which is set up to work with MailChimp).

Full callout section - changing the background image

The best and easiet way to change the background image on the full callout section is by replacing the dist/img/bg-callout.jpg file with a new image (with an identical name and format). If your image has a different file format (for example, .gif, .png, etc.) you will need to change the file name in the theme's CSS file.

Signup callout section - MailChimp integration

The signup/subscribe callout section is set up to work with MailChimp! In order to make the form subscribe users to your MailChimp mailing list, you will need to change the form action of the signup form. You will see the form section in the HTML laid out as follows:

The above form action will need to be replaced by a form action to use your form. To find this, login to your MailChimp account and do the following:

  1. Login to your MailChimp account
  2. From your dashboard, click on 'Lists' in the top menu
  3. OPTIONAL: If you don't have a list, create one - otherwise proceed to the next step
  4. Expand the button dropdown next to the 'Stats' button, and select 'Signup forms'
  5. Select 'Embedded forms'
  6. Below the preview, you will see a markup window that says 'Copy/paste onto your site'. The only thing you need form here is the form action! Grab the form action, and paste it into the form action on your theme's HTML!

Advanced Usage

Vitality uses Gulp to automate the development environment. To install gulp, you must first install node.js globally. After node is installed, you can run npm install -g gulp to install Gulp globally.

After you have Gulp installed globally, you can install dependencies. Go to the root folder of the Vitality theme package, and run npm install to install dependencies.

Vitality has a few Gulp tasks laid out in the gulpfile.js file. They are:

  • gulp - the default build taks that runs everything
  • gulp clean - deletes the entire /dist directory for rebuilding
  • gulp vendor - copies core dependencies from node_modules to the files target destination in the /dist directory
  • gulp css - compiles the theme's CSS along with alternate color schemes - if you only want to compile the default color scheme, use gulp css:default
  • gulp js - compiles JS into the /dist/js directory
  • gulp html - compiles the HTML from src/html to the /dist directory
  • gulp img - copies images from the src/img directory into the dist/img directory
  • gulp mail - copies the src/mail directory to the dist/mail directory
  • gulp dev - compiles everything and launches a browser window for live development, with live reloading with browserSync

It is recommended that you run gulp clean, then gulp, and then gulp dev for a fresh development environment. After this, you can begin modifying the content within the src/html, src/js, and src/scss directories.

Credits

All of the images included with this theme are from https://unsplash.com/.

Feel free to use the images included with the theme for your project. For more information about Unsplash's license and terms, visit https://unsplash.com/license!

Support

If you have read through the documentation, and still have questions about working with the Vitality theme, send us an email at support@startbootstrap.com and we will be in touch as soon as possible!

Thank you for choosing Vitality!