Template Name: HOSKON - Web Hosting Bootstrap HTML Template
Version: 1.0.0
Created On: 05 February 2021
Author: LettstartDesign
Email: support@lettstartdesign.com
HOSKON Web Hosting template comes with lots of layouts for all types of hosting templates including Cloud, Wordpress, Reseller, VPS and many more hosting templates . This templates built with SCSS and Bootstrap framework followed by best code practices. This template also support RTL version.
This template looks perfect on all major browsers, tablets, and mobile devices. All files are organized we believe it will be easy to use and edit them. This template is well organized and very easy to customize. Quick and easy to setup.
SaSS compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or SaSS, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Letstart and provide a consistent look throughout the template.
Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.
Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme email at support@lettstartdesign.com or generate ticket on our portal.
By purchasing this template, you are assured with detailed documentation along with 1 Year Premium Support by our dedicated support team and free lifetime updates from us.
After download a source package From our Store.
Install Node.js From https://nodejs.org/en/download/
After that open command promt or any other terminal and go to Package Path.
cd [root] / code /
Npm is a default package manager for the JavaScript runtime environment Node.js. If you've already then update once.
npm install --global npm@latest
To check weather is node succesfully install or not.
npm --version
For yarn package manager.
npm install --global yarn
To check weather is yarn succesfully install or not.
yarn --version
Now, run the below command(This command will install the necessary libraries in node_modules folder which is generated by this command):
npm install
Normally project will run on the localhost:3000 or it will take port accordingly and for run the project run the below command:
gulp watch or npm start
In your root folder enter the following command to install the project
dependencies:
npm install, this command will install all the template libraries inside the
node_modules folder.
npm install packagename, this command will install the package in node modules.
After unzip the downloaded pack, you'll get a SRC and DIST folder. DIST folder is compiled version of SRC. SRC is raw files using gulp you will generate the dist files. All the configuration of gulp will be in gulp file.
You can directly use the compiled DIST and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so. You need to edit in SRC files by the help of gulp it convert the SRC files into DIST files and You will able to see the changes.
You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not works fonts).
After change in any files or you add any assets like javascript, css, images. You need to upload on the server. To upload file on server open your cpanel/controlpanel or open filezilla and upload the content/assets of the Template on your server's root directory.
Once the files are done uploading go to www.yourdomainname.com/index.html
After purchasing our template extract the zip file and you will see this structure.
| File | Description |
|---|---|
plugins.min.css
|
HOSKON uses the latest bootstrap v5.0 and Other lirary css. The core plugins file is being used in all the pages. |
style.css
|
This file is containing all common styles for all the pages. |
style.rtl.css
|
In order to have RTL mode enabled, replace the reference of style.css to style-rtl.css
|
plugins.rtl.min.css
|
In order to have RTL mode enabled, replace the reference of plugins.min.css to plugins.rtl.min.css
|
| File | Description |
|---|---|
app.js
|
This is a main js file. It contains the custom JS code needed for features including
layout, sidebar, etc. to enable RTL version for sliders set window.rtl = true by default it is set to window.rtl = false
|
By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
Feather Icons: <i data-feather="facebook" class="fea"></i>
Material Design Icon: <i class="mdi mdi-eye"></i>
Box Icon: <i class="bx bx-menu"></i>
GULP is a task runner for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
How to use it:
Install all the dependencies that is required for the project like
1. npm install -gulp
2. Make gulpfile.js
3. Define task in gulpfile.js
We have already setup the gulp and defined the standard task. In case you want to add your extra task follow the below code.
gulp.task('sass', function () {
return gulp.src('baseDir/assets/scss/**/*.scss')
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest('baseDir/assets/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', gulp.series('sass', (done) => { //dependancies array
browserSync.init({
server: {
baseDir: "Folder Directory"
},
})
gulp.watch('baseDir/*.html', gulp.series(reloadBrowserSync));// reload browser if changes in js detected
gulp.watch('baseDir/assets/scss/**/*.scss', gulp.series('sass')); // after detect changes run gulp series tasks.
gulp.watch('baseDir/assets/**/*.js', gulp.series(reloadBrowserSync)); // reload browser if changes in js detected
done();
}));
We are committed to our customers and support is at up most priority. If you have any question, issue with HOSKON, please feel free to contact us via email support@lettstartdesign.com or generate ticket on our portal.