When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.
First, you must download and install node.js. NPM stands for node packaged modules and is a way to manage development dependencies through Node.js.
Download the Node.js source code or a pre-built installer for your platform, and start developing, you can download it from nodejs.org
You can check it in your terminal window using these commands node --version and
npm --version.
GulpJS is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
Navigate to the root main/directory,default
Then use $ npm i command (install node js)
$ gulp command (for run project)
NPM use the package.json file and automatically install the required local dependencies listed in it.
dependencies are : gulp, browser-sync, gulp-autoprefixer, gulp-livereload, gulp-pug, gulp-sass, livereload
We have added all necessary gulp task in gulpfile.js, for more details about plugin refer this link https://gulpjs.com/plugins/
Go to Gulpfile.js
proxy: "localhost/Your project name"
In Friendbook theme, google fonts have been used. google fonts are open source and easy to use. Friendbook have used following fonts:
you can use different google fonts. following are the steps
In Friendbook theme, we have used 3 colors or 3 styles. following are the colors:
from above you need to choose any color and set that css to your html pages in your head(see below) and delete or remove othere files.
<!-- Theme css -->
<link id="change-link" rel="stylesheet" type="text/css" href=../assets/css/style-1.css">
every style has different dark style which you need to change so for example you are using style.css, it has dark.css with it, if you are using style-1.css it has dark-1.css so remove other style/dark.css. other than that you need to make changes in 2 other place. one in the header dark button. if you are using style-1 than made following changes and if you are using style-2 than replace 1 with 2
<li class="header-btn custom-dropdown">
<a id="dark-1" class="main-link" href="javascript:void(0)">
<i class="icon-light stroke-width-3 iw-16 ih-16" data-feather="moon"></i>
</a>
<a id="light-1" class="main-link d-none" href="javascript:void(0)">
<i class="icon-light stroke-width-3 iw-16 ih-16" data-feather="sun"></i>
second you need to change in theme setting. if you remove theme setting section than don't follow this step.if you are using style1.css than button will be dark-button-1. if you are using style.css than dark.css as same with style-2
<div class="rtl-btn h-cls">
<div class="dark-button-1">Dark</div>
</div>
Friendbook have mainly used FontAwesome Icons. FontAwesome icons available in FontAwesome.com/icons, other icons are available
in assets/images/icon
how to use FontAwesome font
for example:
<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->
how to use Feather Icon
for example:
<i data-feather="circle"></i>
how to use Theme Icon
how to use Animated Weather Icon
how to use Emoji/weather Icon
If you want RTl theme, changes are below:
<!-- Add class rtl in body tag -->
<body class="rtl">
If you want Dark theme, changes are below:
<!-- Replace style.css with dark.css -->
<link id="change-link" rel="stylesheet" type="text/css" href="../assets/css/dark.css">
Skeleton screen is a low fidelity UI into which information is gradually loaded. It gives users a visual cue that the content is being loaded into each UI element.
Skeleton Screen when used as the feature in the product make people perceive that app/website is loading fast. Improved perceived performance not only provide good UX but also helps in increasing conversion ratio.
there is a loader section in starting of html pages. you can remove it by just delete that section.
<!-- loader start -->
<div class="pre-loader">
...
</div>
<!-- loader end -->
If you use image as background than add class ".bg-img" in image and add below class in parent.
Friendbook have used route map for for travel sharing and used normal map with custom style for location sharing.
Google Map
<!-- map js -->
<script src="https://maps.googleapis.com/maps/api/js?key=your_api"></script>
<script src="../assets/js/custom_map.js"></script>
<!-- custom map style js -->
<script src="../assets/js/custom_iframe.js"></script>
RTL and pages link button are for demo purpose only, following is the steps to remove that buttons:
without this plugins and products, our theme will be incomplete.