SLE - simplicity and lack of exces

Getting Started

Thank you so much for purchasing our item from TemplateMonster.

Package structure

After HTML Website Template package extracting you'll see the following files structure:

build folder - all finished files will be added to this folder after compilation, it is also called the production folder, i.e. the result of the work. The build folder will contain subfolders. They will be created automatically at compilation, so I did not specify them in the structure ( Important! Before executing the "gulp build" command, the folder build must be created in the project's root if it does not exist. ).
app folder - the source files of the project will be stored here. In general, there can be a lot of files in the child folders, depending on the size of the project. Each file types are then merged into a common file and copied to the production folder. At the root is the file index.html and other *.html.
CSS, js, images, fonts files you can find in app or build folder
CSS files you can find in build/assets/css folder or app/assets/scss folder with sources
JS files you can find in build/assets/js folder or app/assets/js folder with sources
Fonts you can find in build/assets/fonts folder or app/assets/fonts folder with sources

HTML Structure

HTML Website Template .html pages structure is built on the following principle:

<!DOCTYPE html>
<html lang="en">
<head>
						
   <!-- Your Title, Description, Stylesheets -->
						
</head>
<body>

   <main class="main"> 

      <header class="header">
         ......
      </header>
						
      <article class="main-body">

         <div class="bread-crumbs">
            ......
         </div>
							  
         <div class="section">
            ......
         </div>
						
      </article>
						
      <footer class="footer">
          ......
      </footer>

      <div class="lines">
         ......
      </div>

      <div class="preloader active"><div></div></div>

      <div class="cursor hide"></div>

      <div class="grained-bg"><canvas id="grained-bg"></canvas></div>

      <div class="cookie-message-outer">
         ......
      </div>

      <div class="go-to-top crs">
         ......
      </div>

      <nav class="spf main-menu">
         ......
      </nav> 
							
   </main>
						
<!-- JavaScript -->
</body>
</html>

CSS Structure

The style.css file contains all of the specific stylings for the page. The file structure is built on the following principle:

/*
0. Root
1. Reset
1.1 Grid
2. Content
   2.1 Fonts
   2.2 Base
   2.3 Tables
   2.4 Typography
3. Layouts
   3.1 Header
   3.2 Section
   3.3 Footer
4. Components
   4.1 Preloader
   4.2 Lines
   4.3 Buttons
   4.4 Forms
   4.5 Popup
   4.6 Tabs
   4.7 Accordions
   4.8 Breadcrumbs
   4.9 Pagination
   4.10 Rating
   4.11 Slider
   4.12 Socials
   4.13 Cursor
   4.14 Grained background
5. General
6. Sections
   6.1 Intro
   6.2 Intro slider
   6.3 Image items
   6.4 Items of numbers
   6.5 Icon items
   6.6 Team
   6.7 News
   6.8 Contacts
   6.9 Marquee
   6.10 Brand in numbers
   6.11 Testimonials
   6.12 Brands
   6.13 Pricing
   6.14 Seo
7. Cookie
8. Media
*/

JS Structure

The *.js structure is built on the following principle:

(function() {

   "use strict";
										  
   const app = {
												
      init: () => {

         app.setUpListeners();

         .....	

      },

      setUpListeners: () => {

         .....

      },

      .....
												 
   }
										 
   app.init();
										 
}());

Template customization

Change logo

The logo container can be found in the header container - <header>

<!-- Begin logo --> 
<a class="logo h-amin crs" href="./" title="SLE">
   <img src="assets/img/logo.svg" width="160px" height="32px" alt="SLE"/>
</a><!-- End logo -->

Configuring the color scheme and typography

The style.css file contain root variables that you can change depending on your requirements.

:root {
   --font-family: "Source Sans Pro";
   --font-size: 16px;
   --font-weight: 400;
   --font-style: normal;
   --line-height: 1.5;
   --heading-font-family: "Montserrat";
   --heading-font-weight: 700;
   --heading-line-height: 1.3;
   --additional-font-family: "Playfair Display";
   --accent: #DB3700;
   --background: #ffffff;
   --text-primary: #151515;
   --link: #3267B5;
   --border: #474747;
   --placeholder: #6F6F76;
   --error: #E02D00;
   --gutter-x: 2rem;
   --gutter-y: 2rem;
}

Form settings

How to edit form?

Open assets/form/handle.php file.

<?php
							
$subject = "Contact form";
$from_name  = "SLE";
$from_email = "example@mail.com";
$to_email   = $from_email;
							
...

Line 3: $subject = "Contact form"; by default.
or
In the *.html file find form tag and find name="form_subject" in input tag and change the subject. Unique for each form.
Line 4: $from_name = "SLE"; the name of the project.
Line 5: $from_email = "example@mail.com"; admin email.
Line 6: $to_email = $from_email default, but you can change that.
Recommended to use the name="Name" and name="Email" attributes for the name and email fields in input.

Cookie

How to edit cookie?

The cookie container can be found in the main container - <main class="main">

<div class="cookie-message-outer">
   ......
</div>

You can edit the heading and message.

You can also change cookie settings.

Open assets/js/custom.js file.

(function() {

   "use strict";

   const app = {

      .....
	  
      //=== Cookie ===\\
      COOKIE_DISPLAYED: false,
      COOKIE_NAME: 'sle-cookie',
      COOKIE_DURATION: 2000,
      COOKIE_EX_DAYS: 30,

      .....

   }

   app.init();

}());

For cookies to be displayed on the website, you need to set the variable COOKIE_DISPLAYED to true.

Carousel settings

HTML Website Template uses Flickity plugin for implementing the carousel. You can find more detailed instructions on the Flickity plugin website.

UI Elements

Go to UI Elements page.

Source & Credits

Images:

Unsplash - https://unsplash.com/

Scripts:

Lozad - https://apoorv.pro/lozad.js/
GSAP - https://greensock.com/gsap/
Pristine - https://pristine.js.org/
Flickity - https://flickity.metafizzy.co/

Documentation