Finapp

Welcome

Introduction

You don't need any introduction to use this theme. This is HTML, Css, Javascript template designed for mobile devices.

Getting Started

Theme Files

HTML Files

• app-xxxxx.html - app pages.
• component-xxxxx.html - component pages.

Css Files

• style.css - Css file (I do not recommend to edit styles on this file. Edit the sass files then compile.)
• src/ - Plugins and Bootstrap css files.

Javascript Files

• base.js - Main javascript file.
• lib
  • jquery-3.4.1.min.js - Jquery 3.4.1
  • bootstrap.min.js - Bootstrap.js
  • popper.min.js - Popper.js
• plugins
  • owl.carousel.min.js - Owl Carousel

Sass Files

• _body.scss - Body tag and some global settings
• _variables.scss - Colors
• _font.scss - Font settings
• _blocks.scss - Blocks
• style.scss - Style Sass and included all sass files.
• _ui.scss - UI Sass included all ui sass files.
• layout/
  • _header.scss - Header
  • _bottomMenu.scss - Bottom menu
  • _content.scss - Content
  • _footer.scss - Footer
  • _sidebar.scss - Sidebar / Sidemenu
• ui/
  • All files in sass/ui/ - These files are ui files

Getting Started

Includes

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 javascript files bottom on index.html codes

Getting Started

Compiling Sass File

After you edit sass files, just compile style.scss to style.css. No need others.

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 assets/sass/style.scss to assets/css/style.css. (You can edit the source map after compile)

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

Editing

Colors

• $colorPrimary - Main theme color
• $colorSecondary - Secondary color
• $colorSuccess - Success color
• $colorDanger - Danger color
• $colorWarning - Warning color
• $colorInfo - Info color

Editing

Font

1. Find any font in Google Fonts and copy the import url
2. Open the assets/sass/_font.scss
3. Change the import url (line 1) (If you use google font)
4. Change the $fontFamily value.
5. Compile the sass files.

Do not forget to update font weights if your new font are different from the current weights.

Editing

Header

You can view the styles on component-appheader.html.

Editing

Bottom Menu

You can view the styles on component-appbottommenu.html.

Sources

Images

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

All illustrations are from drawkit.io and used for demo purpose and not include in the purchase packages.

Sources

Icons

This template mainly use Ionicons v5 and also supporting the Ionicons v4.
You can view all the icons on the Ionic website.

Sources

Fonts

Poppins from Google Fonts.

Sources

Plugins

Need Help?

Support

• Reach us on support tab.