Documentation
Getting Started
Thank you so much for purchasing our item from Bedo Tech.
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
Thestyle.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;
}
Source & Credits
Images:
- Unsplash - https://unsplash.com/
Scripts:
- Lozad - https://apoorv.pro/lozad.js/