Thank you for purchasing Star Travel template!
This documentation will give you an understanding of how Star Travel is structured and guide you in performing common functions. If you require further assistance not covered in this documentation, please contact me at hello@iamabdus.com
Thank you so much!
You will see the following folder structure. If you want to build simple HTML and CSS based website, please use Static HTML version. Dev Environment folder contains SCSS files if you want to use Sass as a css preprocessor to build your app.
Star Travel template is based on Bootstrap Framework (version: 3) (http://getbootstrap.com/docs/3.3/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Below is a sample coding structure:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body class="body-wrapper">
<div class="main-wrapper">
<header class="header">
...
</header>
<section>
<div class="container">
...
</div>
</section>
<footer>
...
</footer>
</div>
</body>
</html>
Star Travel has both fixed and static header types
Fixed light header is Default header. If you want to use fixed Dark Header, you have to replace class name lightHeader with darkHeader in <nav> element.
<nav class="darkHeader"> </nav>
For static light header you need to add following class in the <body> and <nav>.
And for static dark replace classname static-light with classname "darkHeader".
<body class="static">
<nav class="static-light">
</nav>
</body>
The template supports two different layout modes, Boxed & Wide Layout .
The Wide one is the default option, if you want to use the Boxed version, add the class name bodyColor wrapper from the <body> and layout style will be changed to wide version.
<body class="bodyColor wrapper">
This part of the documentation will explain how to change the current Color Scheme of your site, You simply need to include an existing color scheme or change the HEX Color Code in the css/default.css and include inside <head>
<head>
<link rel="stylesheet" href="css/default.css" id="option_color">
</head>
To change default color, go to this foldercss/default.css and open default.css.Change the HEX Color Code whatever you want like: color: #ff891e;
You will find 4 more existing color schemes in css directory. To use them just replace css/default.css with css/green.css.css inside <head>. You can use all available color options in the same way shown below:
<head>
<link rel="stylesheet" href="css/color-option2.css" id="option_color">
</head>
This part of the documentation will help you to customize preloader
Underneath the <body> tag you can find preloader mark-up. You can apply any custom styles of preloader as you want by customizing css in style.css. You can also use gif images.
Follow the steps below to apply preloader
Step-1: Add preloader markup.
<body id="body" class="">
<div id="preloader" class="loader-wrapper">
</div>
Step-2: Copy the following javascript code in custom.js
setTimeout(function(){
$('body').addClass('loaded');
}, 3000);
This will add a class loaded in the <body> element after the loader finishes loading. By default loader time is set for 3 seconds, you can increase or decrease it in the function above.
Step-3: body containes some style properties until the preloader loads. You need to overwrite the properties when the loaded class added. Copy the following css and paste it in style.css
#preloader {
/* Apply any css style properties for loader. */
}
/* Hide the preloader when finishes loading */
.loaded {
#preloader {
opacity: 0;
visibility: hidden;
@include transition(all 0.7s ease-out);
}
}
If you wish to add/change the site fonts, please go to the head of your html file and replace this url
/* GOOGLE FONT */
after in the css file you need to change the font-family property of the elements. Star Travel uses two different font family. To change the default fonts go to css file and change the font-family of the elements as shown
/* body element */
body {
font-family: 'Montserrat', sans-serif;
}
Step-1: Download Node.js and install into your computer.
Step-2: Open terminal in the project root directory.
Step-3: Then run the following command accordingly into terminal:
//install gulp-cli globally
$ npm install gulp-cli -g
//install devDependencies
$ npm install
//run project
$ gulp
- this will fire default gulp task which includes: launching BrowserSync, build all html files, javascript minification, sass compilation and lanching watch task. BrowserSync will create dev server and sync your browser with your code editor.
| Folder / File name | Description |
|---|---|
| Main folder | Folder contains _reset.scss and _common.scss files. Most basic styles and commonly used classes. Also container all pages scss files |
| partials folder | This folder contains helper Sass files namely: _variables.scss, _mixins.scss, _media-query.scss. |
| elements folder | All elements used accross the template and their styles scss are placed in this folter |
| style.scss | Main Sass file that imports all other files and is compiled to style.min.css. |
Step 1: Installation - The first step is to download, install and launch Koala. This is what you should see the first time you launch Koala.
Step 2: Adding a project - Now all you have to do is locate your Sass project folder, and drag it into the window. Koala will then list every Sass file it can find.
Step 3: Compiling - Now all you have to do is select any listed Sass file and press compile. Koala will then compile your file and produce a normal CSS file using the same name. That’s it! No complications. No typing commands in a console. Just drag, select and click.
Conclusion - There are many other Sass compilers out there, some even more powerful and many times faster. Unfortunately many of these are either paid or are non GUI based. They are neither straight forward nor user friendly to Sass newbies. If you are new to Sass, you should try Koala first then the rest later. But I must warn you, once you go Koala there is no going back.