Introduction

Install Node Js

Open Project Folder and Right click. "Git Bash here"

npm run compile:sass

Enjoy!

HTML Files

All html pages are categorized by type.

• app-.....html : application page
• page-.....html : basic pages
• component-.....html : component

CSS File

We are using Sass to be more organised on CSS. You can edit Unic with sass files in scss folder. You can find the style css file in assets/css/style.css.

Also bootstrap folder has been moved to the sass folder scss/bootstrap

• style.scss : Main sass file.

Sass Files

With power of sass this template is really organised. sass path : scss

• Components : This folder is important, you can rapidly build modern websites.

  CSS Components packed with classes like flex, padding-20, text-center, and position that can be composed to build any design, directly in your markup.

• _custom.scss :Import bootstrap. and Theme settings. Change colors and other variables.
• sections/
• _authentications.scss : Authentications
• _account.scss : account Items
• _beginning.scss : Intro Items
• _blog.scss : blog Items
• _botoom-navigation.scss : Bottom Navigation
• _cards.scss : Cards
• _collectibles.scss : collectibles
• _header.scss : Header
• _listview.scss : Listview
• _modal.scss : modals
• _noUiSlider.scss : Range Slider
• _fallback.scss : Fallback page
• _seller.scss : Sellers
• _about.scss : About
• _stories.scss : Stories
• _support.scss : Support
• _other.scss : Other Items
• components/
• _mixins.scss : includes animation, and so others
• others/
• _global.scss : Global body settings
• _darkMode.scss : Dark mode edits.
• _support_browsers.scss : Browsers support

Javascript Files

Path assets/js

• custom.js : base javascript file for all features.

Path assets/vendor

• Each library includes itself

CSS Files

assets/css/style.css - All sass files compiled to this. This is the only css file theme using.

Javascript Files

You can take a look at javascript files bottom of the HTML page.

First time on Sass?

Learn more about sass : Sass official website.

How to compile sass files for beginners?

You can use apps to compile sass files to css files.

One of the best of them is Koala. It is free and open-source. Koala App

Download the app and compile scss to assets\css. (You can edit the source map after compile)

You can check the other apps for compile in the applications section. https://sass-lang.com/install

• Open scss/_custom.scss
• Edit color variables.
• Compile style.scss to the path (assets/css)

variables are clear

1. Find a font in Google Fonts and copy the import url
2. Open the assets/css/sass/pages/_globalpage.scss
3. Change the body { font: { family: 'Poppins', sans-serif; } }
4. Compile the sass files.

PWA Ready

This template is PWA Ready. This means users can add to the home screen and use it as an app.

Edit First

First of all, edit your theme colors and app icons.

You can find all the app icons in images/favicon path.

Theme Color

In manifest.json file, you will see theme_color and background_color. Edit these hex color codes what you like.

After that, edit the metatag color code. You can find it in head tag of html pages.
meta name="theme-color" content="#ffffff"

Do not forget to update cache name (CACHE_NAME) after updating the REQUIRED_FILES. Example: cache-version-3.0 to cache-version-3.0.1

Usage examples

You can find dozens of practical, detailed, and working examples of service worker usage on

Images

Some images are from unsplash.com and used for demo purpose and not include in the purchase packages.

Illustration

All illustrations are paid from UI8 and include in the purchase packages.

This template uses and "remix icon" You can check all the icons.

Poppins on Google Fonts

How can you contact to us?

• You can contact us from the support tab of the template.
• Feel free to ask anything about our template.