Electro v2.0

Responsive eCommerce Theme

Hello and thank you for purchasing this website template! Electro is the perfect high-quality solution for those who want a beautiful eCommerce website in no time. It‘s fully responsive and will adapt itself to any mobile device. iPad, iPhone, Android, it doesn‘t matter. Your content will always looks its absolute best. This documentation guides you through the main features of this template and shows you how to use and customize them. If you have any further questions just drop us a line to support@transvelo.freshdesk.com

1.Included Files

1.1 HTML Files (alphabetical order)

1.2 Images

Template images – with usage details (order of importance):

1.3 File Structures

A guide to understanding how Electro is structured and organized.

				
					Electro/
					├── assets/
					│   ├── css/
					│   ├── fonts/
					│   ├── img/
					│   ├── js/
					│   ├── scss/
					│   ├── svg/
					│   ├── vendor/
					├── html/
					│   ├── blog/
					│   ├── home/
					│   └── shop/
					│── documentation/
1.3.1 HTML

html/ is the source for HTML pages and contains HTML templates, which you see in the online demo. These HTML files can be opened easily in any browser, imported to any project, or modified to suit your needs.

1.3.2 Assets

assets/ includes all the assets that are referenced in the HTML pages.

Precompiled versions of JavaScript and CSS files are generated in their respective assets/js/ and assets/css folders to support the self-contained 'static website'.

Below given folders are used in the template:

2. Technology

Electro is based on Twitters popular front-end framework Bootstrap for fully flexible and responsive layouts. It also uses the latest web technology HTML5 for semantic content structuring and CSS3 for versatile and powerful styling options.

Read more about the used technology:

Gulp - this is the most recommended way of using Bootstrap templates.
Bootstrap Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

2.1 Gulp

Learn how to use Electro's included npm scripts to automate your time-consuming tasks in your development workflow with Gulp toolkit.

2.1.1 Tooling setup

Electro uses NPM scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.

To use our build system and run our documentation locally, you'll need a copy of Electo's source files and Node. Follow these steps and you should be ready to rock:

  1. Download and install Node.js , which we use to manage our dependencies.
  2. Download and install Gulp.js , which we use to manage our dependencies.
  3. Navigate to the root /electro directory and run npm install to install our local dependencies listed in package.json.

When completed, you'll be able to run the various commands provided from the command line.

2.1.2 Installations
Installing Node.js

If you do not have Node installed already, you can get it by downloading the package installer from Node's website. Please download the stable version of Node.js (LTS) NOT the latest.

You need to have Node.js (Node) installed onto your computer before you can install Gulp. When you're done with installing Node, you can install Gulp by using the following command in the command line:

Installing Gulp.js

Please note, first Gulp should be installed globally and for that reason -g command is used.

				
					npm install gulp-cli -g
Important

If you are using MacOS please use sudo keyword in the command because they need administrator rights to install Gulp globally.

Run Gulp
				
					gulp style

Now you can try making some changes to assets/include/scss/theme.scss and save it.

3. Customization

Take advantage of the Electro's past, current and future updates, by learning how to create your own content without changing the core styles of Electro.

3.1 How to include a typeface?

Add or change Electro typography with the following instructions.

With SASS
  1. Use the $font-family-base attribute as our typographic base applied to the <body> in _user-variables.scss file to change the current font family variable with yours. 
    						
							$font-family-base: 'Open Sans', sans-serif;
  2. Add your font stylesheet into the <head> before all other stylesheets. Like: 
    							<!-- CSS Global Compulsory --><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
With CSS
  1. Simply replace the font family font-family from <body> in theme.css tag with yours. 
    body {
	font-family: 'Open Sans', sans-serif;
}
  2. Add your font stylesheet into the <head> before all other stylesheets. Like: 
    <!-- CSS Global Compulsory -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">

3.2 SASS

Utilize our source SASS files to take advantage of variables, mixins, and more.

Whenever possible, avoid modifying Electro's core files. For SASS, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it.

3.2.1 Customizing SASS

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with these 2 files
assets/include/scss/

Note

Custom files along with Bootstrap core CSS files will be generated in to the theme.css file.

3.3 Variable defaults

Every SASS variable in Electo includes the !default flag allowing you to override the variable's default value in your own SASS without modifying either Bootstrap or Electro's source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Electro.

You will find the complete list of Electro's variables in assets/include/scss/_variables.scss.

Variable overrides within the same SASS file can come before or after the default variables. However, when overriding across SASS files, your overrides must come before you import Electro's SASS files.

Here's an example that changes the color of the template in the scss/custom/_custom-variables.scss file when importing and compiling Electro via npm:

// Your variable overrides
$Yellow: #fed700; // Primary color
$primary: $Yellow; // Primary color

5. Sources and Credits

We've used the following images, icons or other files as listed.

Once again, thank you so much for purchasing this theme. As We said at the beginning, We'd be glad to help you if you have any questions relating to this theme. No guarantees, but We'll do our best to assist. If you have a more general question relating to the themes on themeforest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Ibrahim Ibn Dawood