electro

- Start
- Included Files
- Technology
- Customization
- Sources and Credits

Copyright Ibrahim Ibn Dawood 2019
made with the Documenter v2.0

# Electro v2.0

## Responsive eCommerce Theme

- Created: 10-Dec-2019
- Latest update: 10-Dec-2019
- By: Ibrahim Ibn Dawood
- Email: support@transvelo.freshdesk.com
- Demo: http://transvelo.github.io/electro-html/home

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)

- 404.html
- about.html
- blog-full-width.html
- blog-v1.html
- blog-v2.html
- blog-v3.html
- cart.html
- checkout.html
- contact-v1.html
- contact-v2.html
- compare.html
- faq.html
- home-v2.html
- home-v3-full-color-bg.html
- home-v3.html
- home-v4.html
- home-v5.html
- home-v6.html
- home-v7.html
- index.html
- my-account.html
- product-categories-4-column-sidebar.html
- product-categories-5-column-sidebar.html
- product-categories-6-column-full-width.html
- product-categories-7-column-full-width.html
- shop-3-columns-sidebar.html
- shop-4-columns-sidebar.html
- shop-5-columns-sidebar.html
- shop-6-columns-full-width.html
- shop-7-columns-full-width.html
- shop-full-width.html
- shop-grid-extended.html
- shop-grid.html
- shop-left-sidebar.html
- shop-list-view-small.html
- shop-list-view.html
- shop-right-sidebar.html
- shop.html
- single-blog-post.html
- single-product-extended.html
- single-product-fullwidth.html
- single-product-sidebar.html
- store-directory.html
- terms-and-conditions.html
- track-your-order.html
- wishlist.html

#### 1.2 Images

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

- logo.png,logo.svg – Template sample logos in SVG format (Scalable Vector Graphics) and png format as a fallback for browsers not supporting SVG
- fav-icon.png – Template sample logo icon for display in browser tabs and address bars

#### 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:

- `css` - CSS files
- `fonts` - Icon fonts files
- `img` - Images
- `js` - JavaSscript files
- `scss` - Sass files
- `svg` - SVG files
- `vendor` - Third-party libraries

### 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/`

- `_user-variables.scss` - Variables file for customizing or overriding Bootstrap core and Electo elements/components that have been tied to variables.
- `_user.scss` - Create a new style in here.

##### 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.

- PSD Design by bcube
- HTML code by Ibrahim Ibn Dawood
- Bootstrap by Twitter
- Animate.css by Daniel Eden
- echo by toddmotto
- Font Awesomeby Dave Gandy

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