Ajari - E-learning Mobile App Template
This documentation is last updated on 04 January 2024
Thank you for purchasing this HTML template.
Sass Compile -
1.- Install Node.js
To compile Sass via the command line first, we need to install node.js. The easiest way is downloading it from the official website nodejs.org open the package and follow the wizard.
2.- Initialize NPM
NPM is the Node Package Manager for JavaScript. NPM makes it easy to install and uninstall third party packages. To initialize a Sass project with NPM, open your terminal and CD (change directory) to your project folder.
npm init
Once in the correct folder, run the command npm init. You will be prompted to answer several questions about the project, after which NPM will generate a package.json file in your folder.
3.- Install Node-Sass
Node-sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install node-sass run the following command in your terminal: npm install node-sass
npm install node-sass
4.- Write Node-sass Command
Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this: In the scripts section add an scss command
"scripts": {
"sass": "node-sass --watch scss/main.scss css/style.css"
},
5.- Run the Script
To execute our one-line script, we need to run the following command in the terminal: npm run sass
npm run sass
6.- Other Option
--source-map
"sass": "node-sass --watch scss/main.scss css/style.css --source-map css/style.css.map"
Apk Generated -
Here are all the steps one more time:
-
1. Make sure phonegap/cordova is installed
$ npm install -g phonegap cordova -
2. Install template
$ cordova create MyAppName --template=phonegap-template-vue-f7-blank -
3. Run in browser
$ npm run dev -
4. Add Android platform
$ phonegap platform add android -
5. Install Android Studio
-
6. Set Android PATH
Check for SDK path in studio, then do:
$ export ANDROID_HOME=~/Library/Android/sdk $ export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
Make sure to add this to file
~/.bash_profile!! -
7. Install Gradle
$ brew install gradle 8. Create android virtual device
- Open Android Studio
- Click in menu bar tools -> AVD Manager
- Create new AVD
- Select system image
9. Run on emulator
$ cordova run android10. Enable USB debugging on device
- Settings > About Phone > Build number > Tap it 7 times to become developer;
- Settings > Developer Options > USB Debugging.
11. Run on device
cordova run android --device
Folder Directories -
Here we create a directory structure for your HTML project, you can organize your files and folders in a way that makes a proper sense for your project's structure.
-
images
This folder contains all the images of Ajari template.
-
fonts
This folder font files for various template features.
-
css
This folder contains all the CSS files of Ajari template.
-
js
This folder has all javascript files for various template features.
-
scss
Scss File
Theme Features -
Dark Theme
The template includes a design variation specifically tailored for a darker color scheme. Dark mode is an interface style that uses dark colors for the background, text, and other elements, as opposed to the traditional light mode that uses light colors. Dark mode is often favored for its reduced eye strain, especially in low-light environments.
<html lang="en" class="dark">
Color Theme
So many color option available
<html lang="en" class="color-theme-red">
HTML File -
- xhtml
- css
- fonts
- img
- js
- pages
- scss
- index.html
Credits -
Several key elements and technologies contribute to the development of the site. Here's a list of elements and technologies that credited:
-
Framework7
-
Font awesome
-
Google Fonts
-
Line Awesome
Our Products -
Here we provide a listing of our feature-rich products that absolutely suits your standard
HTML Structure -
Head Structure
The head section of an HTML file typically contains metadata and links to external resources. Here's a basic structure of the head section in our HTML files:
Footer Essentials
Footer Essentials contain scripts and functions such as jquery, bootstrap js, custom js and swiper js etc.
Do You Need Help To Customization
After Purchase A Template...
You Will Start Customizing According Your Requirement
BUT What If You Don't Know
SOLUTION IS HIRE DexignZone
Hire Same Team For Quality Customization
- In Order To Ensure Your Website Is Live, We Will Customize
The Template According To Your Requirements And Upload It to the Server.
Version History - #back to top
v1.1 - 04 January 2024
- Framework7 v8.3.0 Updated for Improved Performance.
- Design issues resolved for improved visual aesthetics and functionality.
- General stability improvements for a smoother user experience.
v1.0 - 15 April 2021
- New - Created & Upload Ajari