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 Rica theme, google fonts have been used. google fonts are open source and easy to use. Rica have used following fonts:
you can use different google fonts. following are the steps
Rica 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 -->
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:
<!-- Add class dark in body tag -->
<body class="dark">
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="skeleton_loader">
...
</div>
<!-- loader end -->
If you use image as background than add class ".bg-img" in image and add below class in parent.
First you need to add following js: "assets/js/360view.js" than add
folliwing html structure
<a-scene>
<a-assets>
<img id="panorama" alt="" src="image_path" crossorigin />
</a-assets>
<a-sky src="#panorama" rotation="0 -90 0"></a-sky>
</a-scene>
First you need to add following js: "assets/js/jquery.vide.min.js"
than add folliwing html structure
<div id="block" style="width: 100%; " data-vide-bg="video_path" data-vide-options="position: left, loop: true">
Rica have used 4 maps which is google map, leaflet map, here map & bing map. following are the maps which used for map box.
Google Map
<!-- map js -->
<script src="https://maps.googleapis.com/maps/api/js?key=your_api"></script>
<script src="../assets/js/listing-hotel.js"></script>
<script src="../assets/js/infobox.js"></script>
Leaflet Map
<!-- map js -->
<script src="../assets/js/leaflet.js"></script>
<script src="../assets/js/leaflet-info.js"></script>
Here Map
<!-- map css -->
<link rel="stylesheet" type="text/css" href="../assets/css/here-maps-ui.css" />
<!-- map js -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<script type="text/javascript" src="../assets/js/here-map-info.js"></script>
Microsoft Bing Map
<!-- map js -->
<script src="../assets/js/bing-info.js"></script>
<script type='text/javascript' src='https://www.bing.com/maps/sdk/mapcontrol?key=your_api&callback=loadMapScenario' async defer></script>
If you remove RTL setting button, please remove the code from html file(bottom of the page) and add class "one-setting" along with "theme-setting" class and remove Theme setting js from script.js file(only rtl js).
<!-- Add class one-setting -->
<div class="theme-setting one-setting">
without this plugins and products, our theme will be incomplete.