Getting Started

Welcome

Thank you for purchasing Ewave HTML 5 template. If you have any questions that are beyond the scope of this help file, please send me a message to my Themeforest profile. Thanks so much! The HTML code is 100% responsive and adaptive to different devices. The code is valid and cross browser on each modern browsers. It used the HTML5 and CSS3 technics.

In this user guide you will find all required information to get your site up and running: starting from Template installation and setup, to usage of different post types, page templates and shortcodes.

In Ewave we use mobile first approach it means CSS3 styles for mobile devices loading faster desktop devices.

Short introduction

This template has built on HTML 5, CSS3/SASS technologies. We don't use any html/css frameworks, that's why Ewave as html project faster then other. All HTML CSS/SaSS, JS files located in the src directory. Also we use JavaScript, Jquery as JavaScript framework, NodeJs, NPM & Bower packages. This Template is a responsive layout with one columns. The general template structure is the same throughout the template.

All pages has preloading placeholder. All content will be shown, after total page loading.

In demo version our team use best images service Unsplash all images belong to that service we just use it for demonstration goal. We give Template with images placeholders with sizes instead of images, We respect all authors rights what it comes images.

Project Structure

Project separated into application and distribution sides:

• You can find side for developers in src folder
• Distribution side, located in dist folder
• src folder contain all sources for your work (HTML5, SASS, CSS3, JS, icons fonts)
  • assets
    • fonts - contains general fonts Free FontAwesome 5 icons.
    • i - contains general icons for project.
      • favicon - contains icons for favicon.
    • js - contains all general JavaScript scripts.
      • main.js main JavaScript file.
      • libs - contains JavaScript libraries which are not included NPM or Bower.
    • sass - contains all sass styles which will be translated into css.
      • base-blocks - contains all basic blocks sass styles.
        • header - contains project header sass styles.
        • forms - contains project forms sass styles.
      • base-elements - contains all basic elements sass styles.
      • fontawesome - contains all fontawesome sass styles.
      • libs - contains all CSS/SASS libs which are not included NPM or Bower.
      • pages - contains all sass styles for each of particular page.
      • widgets - contains all sass styles for each of particular widget.
      • _animations.sass - included all sass animations.
      • _blocks.sass - included all sass files from folder blocks.
      • _default.sass - contain all default sass styles.
      • _elements.sass - included all sass files from folder elements.
      • _helpers.sass - contain all helpers sass styles.
      • _mixins.sass - contain all sass mixins for project.
      • _reset.sass - contain all sass styles for reseting default brousers styles.
      • _reset.sass - contain all sass styles for reseting default brousers styles.
      • _responsive.sass - contain all responsive break points and sass styles.
      • _vars.sass - contain all sass variables.
      • _vars.sass - contain all sass variables.
      • _widgets.sass - included all sass files from folder widgets.
      • style.sass - general sass file which collect all sass files which name starts from underscore.
    • templates - general template for all project pages.
      • base-blocks - collect all html base blocks templates.
      • base-elements - collect all html base elements templates.
      • header - collect all html templates which included into header.
      • widgets - collect all html widgets templates.
      • _comments.html - template for comments.
      • _header-home.html - header home page template.
      • _header-home.html - header template for all inner templates.
      • _preloader.html - template for preloader.
  • about-us.html template for page About us.
  • blog-single-left.html template for page Blog single with left sidebar.
  • blog-single-right.html template for page Blog single with right sidebar.
  • blog-single-right.html template for page Blog single with right sidebar.
  • blog.html template for page Blog.
  • contact.html template for page Contact.
  • elements.html template for page Elements.
  • gallery.html template for page Blog Gallery.
  • index.html template for Home page.
  • model-single.html template for page Model single.
  • models.html template for page Models.
• dist folder contain all compiled and production ready files (HTML5, CSS3, JS, fonts, icons)
  • assets
    • css - all css styles
      • style.css
      • style.min.css
      • style.min.css.map
    • fonts - contains general fonts Roboto, Arctic, FontAwesome icons.
    • i - contains general images for project.
      • favicon - contains icons for favicon.
    • js - contains all general JavaScript scripts.
      • main.js main JavaScript file.
      • main.min.js main JavaScript file.
      • libs - contains JavaScript libraries which are not included NPM or Bower.
  • about-us.html template for page About us.
  • blog-single-left.html template for page Blog single with left sidebar.
  • blog-single-right.html template for page Blog single with right sidebar.
  • blog-single-right.html template for page Blog single with right sidebar.
  • blog.html template for page Blog.
  • contact.html template for page Contact.
  • elements.html template for page Elements.
  • gallery.html template for page Blog Gallery.
  • index.html template for Home page.
  • model-single.html template for page Model single.
  • models.html template for page Models.
• root directory folder contain all files for developing Template (JS, JSON, .gitignore, .md)
  • package.json describes basic dependencies of project.
  • gulpfile.js contains js tasks for fast front-end developing.
  • bower.json contains library dependencies.

Ewave use additional technologies:

• NodeJS
• NPM
• Bower
• GulpJS

Edit template (for developers)

First of all you'll need to install all npm dependencies.

1. Install NodeJs on your local machine.
2. Open project root directory in prompt (command line)
3. Tap in prompt next command npm install
   All npm dependencies will be installed.

Note! All npm dependencies contains in package.json file.

Next thing you will need to do is install bower like package manager

1. Open project root directory in prompt
2. Tap in prompt next commandnpm install -g bower
   Bower will be installed globally.
3. Install all bower dependencies, in order to do it, tap in prompt next command bower install

Note! All bower dependencies contains in bower.json file.

For fast developing we use Gulp
To start developing process run in prompt next command gulp in project root dir.

If you want to edit some html, SASS, JavaScript files, best way to use sources in src folder.

Gulp (gulpfile.js) has next tasks:

• webserver task for creating developers environment.
• html:build task for building html files in distribution folder.
• css:build task for building css from sass files in distribution folder.
• js:build task for building js file in distribution folder.
• fonts:build task for building fonts files in distribution folder.
• image:build task for moving and optimization images in distribution folder.
• json:build task for building json files in distribution folder.
• video:build task for building video files in distribution folder.
• php:build task for building php files in distribution folder.
• clean task for cleaning distribution folder.
• build main task for task with mask :build, shortly that task build distribution version of project.
• watch task for watching all developers files from src folder.
• default another name is gulp task for starting developing process.

More information about tasks you'll find in gulpfile.js

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

• Change some CSS styles. Open *.html which you need, for example index.html find head block, then find CSS styles comment next string like link href="stylesheet" .. etc, will be including CSS file. You have to change href="path/file.min.css" to href="path/file.css" in order to include normal CSS3 file style.

  For example: href="./css/index.min.css" to href="./css/index.css" for including unminified version of CSS3 file.

  Then you can open CSS file which you need for example dist/css/index.css and modify it.

  Note! Ewave project includes normal and minified CSS3 versions of files Like dist/css/index.min.css and dist/css/index.css You can switch if you need it. For what it is required? Minified version of files need for faster loading project, it is difficult to modify it, Normal CSS version good for modification but slower for loading

• Change brand name. Open *.html which you need, for example index.html find header block with class="header-brand" next find link class="logo-link" and change brand image. Just change brand text name, beacuse Ewave project use just styling text as brand name. Of course, you can paste a picture as a logo instead of a brand of text, but you may need to add some CSS styles to the file dist/css/style.css

• Add new item to main menu. Open any *.html file. At Ewave project in top header we use simple/dropdown menu. If you want edit some items of menu, just find ul with id main-menu and do what you would like. Also you can add sub menu to yours new menu item, just add ul tag with class dropdown-menu with sub element items, inside your new item menu li You should look how to build sub menu in other items sub menu All texts and icons you can change in .html files.

About widgets approach

Ewave project in general use widgets approach, it means any of widgets you can paste in any place of project. Really easy to customize any widgets (just for developers, for users you can send me a message to my Themeforest profile. for customization any widgets). In order to edit any widget you will need:

• Start Gulp server,open prompt, go to the root project and type gulp
• Open HTML 5 part of widget from /src/templates/widgets/_*-widget.html
• Open SASS part of widget from /src/sass/widgets/_*-widget.sass
• Edit HTML 5 markdown or SASS styles.

Images in Ewave project

Important! Template not include images which you see in demo! SuperbCode team respect all rights about images/icons.

You have got Ewave HTML 5 Template with images placeholders with sizes instead of images, we respect image rights. Just change images to yours.

Bower packages

List of all Bower packages you'll find at bower.json all of it located in bower_components folder.
Note! bower_components folder appear after installation bower as package manager.

How to change images for User

In order to change images you have to:

• Upload new image into /dist/assets/i
• Find image place in the *.html
• Change src path to your new image: src="./assets/i/new-image.png"
• Save changes
• Reload browser window

Some images can be located in css files like background images, for changing you have to do:

• Upload new image into /dist/assets/i
• Find background-image at code in the style.css use global find in your code editor
• Change background rule for example background:url(../i/lightbox2/prev.png) left 48% no-repeat;
• Save changes
• Reload browser window

How to change images for Developers

Ewave project in general use widgets approach, it means any of widgets you can paste in any place of project. Really easy to customize any widgets (just for developers, for users you can send me a message to my Themeforest profile. for customization any widgets). In order to edit any widget you will need:

• Start Gulp server,open prompt, go to the root project and type gulp
• Upload new image(s) to src/assets/i
• Open HTML 5 part of widget from /src/templates/widgets/_*-widget.html
• Change image path src attribute for example src="./assets/i/new-image.png"
• Save changes
• Gulp rebuild the project and reload browser window or you can relaod browser manually

NPM packages

List of all NPM packages you'll find at package.json all of it located in node_modules folder.
Note! node_modules folder appear after installation npmjs as package manager.

Any questions?

Also, our team will gladly answer all your questions that you could not find in this documentation. Just send message to Themeforest profile. Thank you for purchasing our product.