-
Welcome
Thank you for purchasing our template.
We are happy that you are one of our customers and we assure you won't be disappointed. We do our best to produce top notch templates with great functionality, premium designs and readable code.
This documentation has been written to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly.
If you have any questions that are beyond the scope of this documentation, please feel free to email, via my user page contact form http://themeforest.net/user/indonez
Package contents
The zip file contains which is everything you need to get started.
-
dist ~ all template distribution files like HTML/CSS/JS/PHP
-
documentation ~ contains all documentation files regarding the template
-
psd ~ contains an editable psd file used in this template
-
src ~ all source files that are processed (compiled/minified) to dist folder
-
.npmrc ~ npm config file
-
blockit-config.json ~ blockit builder config file
-
package.json ~ includes the list of dependencies to install from npm
-
package-lock.json ~ this locks any installed dependencies to a specific version number
Browser support
Changelog
v2.0.0Integrates Blockit Builder for easy editing Update UIkit to ver 3.16.17 Improves utilities.js to inline with new update Refactors sass structure files following changes to UIkit v1.0.1Update UIkit framework to latest version 3.0.0 beta 40 Remove swiper slider, change with UIkit slideshow component Remove jquery stock ticker (due the yahoo finance api discontinue), change with static content Add white background to UIkit accordion content (.uk-accordion-content) v1.0.0Initial files for ver 1.0.0 -
-
Getting started
Please follow below steps to install and setup all prerequisites
This step aims for users who want to speed up development process and is optional. You can still use plain HTML/CSS/JS to customize. Files you need are located in dist folder
Install node.js
If node is not installed on your machine, you can go to the official nodejs.org website, and choose the version depending on your operating system
Download node.jsDependencies installation
To setup the template and start installing project dependencies, open command line/terminal in the root template folder and run
# Install all the dependencies needed npm install
Npm commands
There are several commands that you can use in the development process using this template
# Command to compile source files from src to dist npm run build # Command to run Blockit Builder npm run blockit
-
Blockit Builder
Blockit Builder is an exclusive tool from Indonez that makes it easy for you to customize HTML templates quickly and easily. You can run this tool with the command below in your terminal.
npm run blockit
Some basic menus in Blockit and their use
Pages
Add an HTML page dynamically and easily. just named, drag and drop every sections do you like.
Navigation
Create your website navigation, choose the name you like and then direct the link to the page.
Posts
Starting to become a blog writer is as easy as typing whatever you like, let us create the code for you.
Components
Set and customize the components used to match and complement the needs of the site you want.
Settings
Find more settings here, you can personalize the website according to your wishes easily & quickly.
Change contact form email target
To change the target email that you use on the contact form, please go to components > contact in Blockit Builder, then replace the existing email with your target email
Change google map location
To change the location of the google map, make sure the location is already registered on the google map, then follow these steps
-
Please go to components > contact in Blockit Builder
-
Open Google Maps and search for the address/company you want to show
-
Once the location has been marked by the search, go into the "Share" option found directly below the locations image.
-
Inside share you will find two tabs, open the "embed a map" tab. This display should now show you a copy of what your embedded map will look like on your website.
-
click the ‘copy html’ button and paste it in "Map location" input form, then save components
-
-
SCSS customization
To make changes to this step, it is recommended that you have sufficient knowledge of SCSS or CSS
This template uses UIkit 3 as a front-end framework, so you can implement everything in the UIkit 3 documentation in this template.
To do advanced customization using SCSS, you can go to the src > assets > scss folder. The following is an explanation of each scss folder configured by Indonez for easy and fast development
-
blockit ~ contains blockit sections style components
-
mixins ~ contains custom UIkit 3 mixins for this theme
-
theme ~ various style includes color,default variables and custom style used in this theme
-
utilities ~ contains utilities style used in this theme
-
variables ~ contains custom UIkit 3 variable for this theme
-
vendors ~ vendor style like fontawesome
-
main.scss ~ the entry point for the style.css file, everything is organized here
-
uikit.scss ~ UIkit 3 library entry point that used in this theme
At the main.scss file entry point you can see what scss files are needed in making this template, you can explore each file referred to by this file.
// Theme fonts @import "theme/fonts"; // Theme colors @import "theme/colors"; // Theme global @import "theme/global"; // UIkit @import "uikit.scss"; // Blockit @import "blockit/blockit"; // Vendors @import "vendors/vendors"; // Utilities @import "utilities/utilities"; // Theme custom @import 'theme/custom';
-
-
Javascript configuration
If you want edit some configuration for homepage slideshow you can open config-theme.js in src/assets/js and there also available some component options that you can change.
//----------- 1. Slideshow ----------- theme_slideshow: function() { UIkit.slideshow('.in-slideshow', { autoplay: true, autoplayInterval: 8000, pauseOnHover: false, animation: 'slide', minHeight: 480, maxHeight: 700 }); }, //---------- 2. Mobile nav button ----------- theme_mobilenav: function() { new MobileNavbar({ addonButtons: true, // options to use addon buttons, set it "false" if you won't use addon buttons buttons: [ { name: 'Log in', // custom button name url: 'signin.html', // custom button url type: 'primary', // button type (default, primary, secondary, danger, text) icon: 'sign-in-alt' // button icon, you can use all icons from here : https://fontawesome.com/icons?d=gallery&s=solid&m=free }, ] }).init(); },
-
Sources & credits
Fonts
CSS framework & Icons
- UIkit 3 - https://getuikit.com
- Font Awesome - https://fontawesome.com/icons
Image assets
- Businessmen blurred background - https://www.freepik.com/free-photo/...
- Businesswoman listening to her client - https://www.freepik.com/free-photo/...
- Smiling businessman holding a sketch - https://www.freepik.com/free-photo/...
- Reading adult person entrepreneur job - https://www.freepik.com/free-photo/...
- Couple training in the morning - https://www.freepik.com/free-photo/...
- Executives planning work at meeting - https://www.freepik.com/free-photo/...
- Businessman profile looking to the left - https://www.freepik.com/free-photo/...
Mockup assets
- The New MacBook Psd Mockup - https://www.pixeden.com/psd-mock-up-templates/the-new-macbook-psd-mockup
- iPhone 7 Psd Mockup Vector - https://www.pixeden.com/psd-mock-up-templates/iphone-7-psd-mockup-vector