Thank you for purchasing Hosco!

We hope you will enjoy it!

If you have any questions that are beyond the scope of this documentation, please feel free to contact us via our Support System and our support team will be glad to help you out.

- Created: December 2020

- Last update: December 2020

- By: Adveits

Template structure

• You can find all files in app folder
• In app folder you will see dist and src folders
• dist folder contain all compiled and ready to use files
• src folder contain all sources for your work
• CSS, js, images, fonts, icons files you can find in assets folder
• CSS files you can find in dist/assets/css folder or src/assets/sass folder with sources
• JS files you can find in dist/assets/js folder or src/assets/js folder with sources
• Fonts you can find in assets/fonts folder
• You can find all UI elements in ui.html file

Template features

• Professional and creative design
• Free Google fonts
• Clean typography
• Vector icons
• HTML5 & CSS3
• Bootstrap 4 framework
• Fully responsive pages
• Ajax forms
• Compile SASS with Gulp
• W3C validated code
• Clean & Friendly code
• Easy to customize
• Easy to find the files name, folder, layers, groups
• All files are well commented

Scripts

• JQuery 1.12.4
• Bootstrap 4
• Bootstrap 4 custom file input
• Animate.css
• Masonry
• Swiper
• Malihu scrollbar
• Custom

Fonts

• Poppins

Icons

• Font Awesome
• Flaticon

Graphic source

• Unsplash
• Pexels
• Freepik

Please note: Photos in the preview image are used for display purposes and are not included.

How to edit template (for users)

Better way to use sources in src folder, but if you don't know all technologies you can simply edit dist files.

Images: Upload your image to assets/img/ folder. Open index.html file and find img tag. Change the url to your image path.

Background: Background of elements can be changed by using different background classes in .html files. These classes described in ui.html documentation.

Texts: All texts can be changed in .html files.

Watch ui.html file to see how you can change buttons color, sizes etc.

How to edit template (for developers)

If you want to edit some html, css, js files, best way to use sources in src folder. You need node.js, gulp installed.

1. Open cmd and go to the projects folder
2. Run npm i to install all gulp dependencies
3. Run gulp to clean dist folder, dist the new project, run local server and start watching changes
   1. Run gulp dist to dist project
   2. Run gulp watch to watch changes
   3. Run gulp html:build to dist only html files
   4. Run gulp css:build to dist only css files
   5. Run gulp fonts:build to dist only fonts
   6. Run gulp icons:build to dist only icons
   7. Run gulp image:build to dist only images
   8. Run gulp clean to delete dist folder

How to work with html

• Find src folder which includes all .html files.

How to change css

• To change css open src/assets/sass folder
• style.scss - main file which import all files
• Blocks files you can find in blocks folder
• Components files you can find in components folder
• Content files you can find in content folder
• Layout files you can find in layout folder
• Utilities files you can find in utilities folder

• You can change colors, padding of global components in _variables.scss file. File is well documented.
• You can change fonts globally in _font.scss file. File is well documented.
• You can change font-size, line-height and all of typography parameters in content/_typography.scss. File is well documented.
• Some of the default Bootsrap variables are rewritten in _bootstrap-style-rewrite.scss. Your own values can be defined. File is well documented.

Watch ui.html file to see how you can change buttons color, sizes etc.

How to change js

• To change js open src/assets/js folder
• main.js - main file which import all components
• All files you can find in components folder

Google Maps

Google Maps API key integration

1. Open src/contacts.html files.
2. Search string "callback=initMap".
3. You should fine line in the picture below.
4. Between „key“ and „=initMap“ enter your Google Maps API key.

Add Markers

1. Open src/contacts.html file.
2. Find function initMap() and locate variable address. Image below.
3. Write your custom addresses in this array.

Contacts

If you have any questions or need customization, please contact us via our Support System. We will help you as soon as possible!

Support Link: https://store.adveits.com/my-account/tickets/