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:

CSS files you can find in assets/css folder
JS files you can find in assets/js folder
Fonts you can find in assets/fonts folder

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="preloader active"><div></div></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
2. Content
    2.1 Fonts
    2.2 Base
    2.3 Tables
    2.4 Typography
3. Layouts
    3.1 Grid
    3.2 Gutters
    3.3 Header
    3.4 Section
    3.5 Footer
4. General
5. Components
    5.1 Preloader
    5.2 Lines
    5.3 Buttons
    5.4 Tabs
    5.5 Accordions
    5.6 Breadcrumbs
    5.7 Socials
6. Sections
    6.1 Intro
    6.2 Items of numbers
    6.3 Icon items
    6.4 Contacts
    6.5 Brands
7. 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" 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;
}

Documentation