Documentation

Guide to get started with Locus - Photography One Page Bootstrap 5 Template.

File Structure

  • dev All template files with unminified CSS / JS. Use this doc if you don't wish to use Node.js / Gulp / SASS.
  • dist All template distribution files like HTML / CSS / JS that have been processed (compiled / minified) from src doc using Node.js / Gulp.
  • src All template source files like HTML / SCSS / CSS / JS that are then processed (compiled / minified) to dist doc.
    • src/assets/js Contains main theme.js and JS vendor files. If you don't wish to use all included plugins and scripts, just remove unwanted vendor JS files from src/assets/js/vendor then remove unwanted functions from src/assets/js/theme.js and recompile.
    • src/assets/css Contains CSS vendor files. If you don't wish to use all included plugins, just remove unwanted vendor CSS from src/assets/css/vendor and recompile.
    • src/assets/scss Contains all project SCSS files that are compiled and minified in dist/assets/css doc.
  • package.json Includes the list of dependencies to install from npm.
  • gulpfile.js Configuration file for Gulp library. It contains all tasks to perform with Gulp. Learn more about it from official Gulp documentation.

Installation

This step aims for advanced users who want to speed up development process and is optional. You can still use plain HTML / CSS / JS to customize Locus. Files you need are located in dev folder.

If you'd like to speed up development process with Node.js / Gulp / SASS, then follow these steps:

  1. Install Node.js if you don’t have it yet.
  2. Run npm install gulp-cli -g command, if you haven't already installed Gulp CLI previously.
  3. Unzip the template package and in the root project folder locus, go to your command line and run npm install. This will install the npm packages listed in the package.json file.
  4. You should now have the project files set up and all the npm packages installed.

Gulp Commands

  • gulp This command will fire default gulp task which includes: creating dist folder, launching BrowserSync, merging vendor libraries, JS minification, SASS and HTML compilation and starting watch task.
  • gulp serve This command will launch watch task and BrowserSync. It will watch changes of your HTML / SCSS / CSS / JS files and automatically compile them.
  • gulp build:dist This will create dist which includes all template files with minified CSS / JS.
  • gulp build:dev This will create dev which includes all template files with unminified CSS / JS.

When you want to kill the server just hit Control + C

Light version

To turn your pages to light version make sure to use style-light.css on all HTML pages.

Theme Colors

To change the theme color, add color CSS file you wish to use inside the head tag, right after style.css link, in all your HTML pages.
Available color options: blue.scss, green.scss, pink.scss, purple.scss, red.scss, yellow.scss.

Changing Primary Color

To change the primary color to a custom color, open src/assets/scss/user-variables.scss and assign your custom color value to $primary and recompile.

Scroll Animations

You can add animations to elements to show them by scrolling. For plugin usage and documentation please visit scrollCue.js docs

Contact Form

Recipients

Specify recipient e-mail addresses by filling $fromEmail and $sendToEmail options in assets/php/contact.php. These email addresses will receive all form inquires/messages.

Settings

You can change email subject, fields and alert messages that are shown for success/errors in assets/php/contact.php. Pay attention to comments for explanations.

SMTP

If your email provider requires SMTP authentication, you can enable it in assets/php/contact.php. Pay attention to comments for explanations.

reCAPTCHA

You can add reCAPTCHA to your contact form in 3 easy steps:

  1. First create your reCAPTCHA v2 type site key and secret key via Google reCAPTCHA
  2. Then enable reCAPTCHA option in assets/php/contact.php and enter your secret key.
  3. Then add the reCAPTCHA field on your form's HTML code before the submit button and enter your site key inside the data-sitekey attribute.

© 2023 Locus. All rights reserved.