One Shop HTML Template Documentation

1. Template Structure

• - You can find all files in app folder
• - In app folder you will see build and src folders
• - build folder contain all compiled and ready to use files
• - src folder contain all sources for your work
• - CSS, js, images, fonts files you can find in assets folder
• - CSS files you can find in build/assets/css folder or src/assets/sass folder with sources
• - JS files you can find in build/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

2. 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 build files

• - Change intro background image. Upload your image to assets/i/ folder. Open style.css file and find .intro selector. In url(http://placehold.it/1980x700/333) change url value to your image path. F.e. url("../i/image.jpg")
• - Change other images. Upload your image to assets/i/ folder. Open index.html file and find img tag. Change the url to your image path.
• - All texts you can change in .html files

- How to edit countdown

• Open file build/assets/js/main.js
• Find and change 2020/04/13 15:59:59 to date which you need

3. 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 and bower installed

• 1. Open cmd and go to the projects folder
• 2. Run npm i to install all gulp dependencies
• 3. Run bower install to install all bower dependencies
• 4. Run gulp to clean build folder, build the new project, run local server and start watching changes
• 4.2 Run gulp build to build project
• 4.3 Run gulp watch to watch changes
• 4.4 Run gulp html:build to build only html files
• 4.5 Run gulp css:build to build only css files
• 4.6 Run gulp fonts:build to build only fonts
• 4.7 Run gulp image:build to build only images
• 4.8 Run gulp clean to delete build folder

How to work with html

• - Find src folder which includes all .html files.
• - You can see templates folder which includes some blocks which are used in whole template (f.e. head, end)
• - This blocks are included in all pages with //= templates/head.html construction

How to change css

• - To change css open src/assets/sass folder
• - style.scss - main file which import all blocks
• - All files you can find in blocks folder
• - You can change colors, margin, padding, sizes, font-size, background-colors in _variables.scss file. File is well documented.
• - Watch ui.html file to see how you can change buttons color and sizes. The same for alerts.
• - vendor folder contain styles for vendor libraries, f.e. normalize, animate.css, video and etc.
• - _helpers.scss file contain useful helpers
• - _mixins.scss file contain useful mixins
• - fontawesome folder contain fontawesome icons scss files

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

How to edit countdown

• Open file src/assets/js/components/countdown.js
• Find and change 2020/04/13 15:59:59 to date which you need

4. Credits

• important Template not include images which you see in demo!
• JQuery http://jquery.com/
• Animate.css https://daneden.github.io/animate.css/
• WOW.js https://github.com/matthieua/WOW
• Countdown.js https://github.com/hilios/jQuery.countdown
• ScrollSpy https://github.com/r3plica/Scrollspy
• Google Fonts https://fonts.google.com/
• FontAwesome http://fontawesome.io/
• SVG icons http://www.flaticon.com/
• Images https://unsplash.com/
• Patterns https://www.transparenttextures.com/