Folder & HTML Structure CSS, Fonts & Javascripts Header Background Credits

# Thank You!

Thank you for purchasing Options - Admin Template. This documentation will help you understand basic structure of the template. If you have any questions that are beyond the scope of this help file, you can create support ticket at https://salttechno.ticksy.com/ or email us on support@themesease.com.

Created on: 19-Apr-2017 Version: 1.0

#### For Quicker Support:

We have dedicated team for support. For quicker response, we request you to use online ticket system at https://salttechno.ticksy.com/. Email support & comment on ThemeForest might take some extra time for turnaround.

#### Folder & HTML Structure

'Options' is a responsive Admin Site-Template. So, you will need all .html files & supporting .css, .js, .php files with some images. 'documentation' folder contains help document and other files are actual template files. Structure of your folder would look like following image.

- All .html files are in the root directory.
- Separate folders are created for .css, .js, .scss files, for fonts & for images.
- All fonts other than web-fonts are located in fonts folder.
- All third party plugins or libraries are located in respective folders.

###### What do you need to upload to server?

You will need to upload .html files along with supporting folders provided with this theme. Uploading complete HTML folder (provided with your download) would make it easy for you to setup the theme as shown on demo link.

##### HTML Structure

We are using Bootstrap framework. So, basic HTML structure is same as it is used in Bootstrap.

Following is the basic structure of home page. You can change it as per your need.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <!-- Bootstrap & Other CSS files -->
        </head>
        <body>
            <header>
                <!-- Logo & social links in .container -->
                <nav>
                    <!-- Navigation Links -->
                </nav>
            </header>

            <section>
                <!-- page content -->
            </section>

            <div>
                <!-- Footer -->
            </div>
            <!-- Bootstrap, jQuery & other js files -->
        </body>
    </html>

#### CSS, Fonts & Javascripts

All plugins / vendor css files are in folder named 'css'. Our theme's main.css file is generated via Sass. main.scss, bootstrap-sass, bourbon are stored in another folder named 'sass'. main.scss file is complied to save as main.css in css folder. We also compress the css file and save it in main.min.css file.

    <!-- ========== COMMON STYLES ========== -->
    <link rel="stylesheet" href="css/bootstrap.min.css" media="screen" >
    <link rel="stylesheet" href="css/font-awesome.min.css" media="screen" >
    <link rel="stylesheet" href="css/animate.min.css" media="screen">
    <link rel="stylesheet" href="css/lobipanel/lobipanel.min.css" media="screen">

    <!-- ========== PAGE STYLES ========== -->
    <link rel="stylesheet" href="css/prism/prism.css" media="screen" > <!-- USED FOR DEMO HELP - YOU CAN REMOVE IT -->
    <link rel="stylesheet" href="css/toastr/toastr.min.css" media="screen" >
    <link rel="stylesheet" href="css/icheck/skins/line/blue.css" >
    <link rel="stylesheet" href="css/icheck/skins/line/red.css" >
    <link rel="stylesheet" href="css/icheck/skins/line/green.css" >

    <!-- ========== THEME CSS ========== -->
    <link rel="stylesheet" href="css/main.min.css" media="screen" >

We have view / edit main.scss file stored in sass folder if you are comfortable with it.

Few css or js files are required when you are using particular plugin / library.

##### Fonts

We have used single web fonts for text in this theme. 'Poppins' is used for headlines as well as body text. Following line of code used in main.scss fetches web fonts from Google.

    @import 'https://fonts.googleapis.com/css?family=Poppins:300,400,600';

You can change this template's fonts very easily & quickly using main.scss file. Add font in above line to fetch from Google. We have used two variables in scss file. `$st-body-font` is used for body font and `$st-heading-font` is used for heading font. Just replace these font names in these variables and fonts will be replaced in complete template.

We have used two different font icons for wider variety of icons. Following two lines are for these font icons:

    <link rel="stylesheet" href="css/font-awesome.min.css" media="screen" >

##### Javascripts

main.js & main.min.js files are located in folder named 'js'. This file is used for theme's common javascript functions. Other vendor js files are also in same folder and we call them in .html file before end of body tag.

    <!-- ========== COMMON JS FILES ========== -->
    <script src="js/jquery/jquery-2.2.4.min.js"></script>
    <script src="js/jquery-ui/jquery-ui.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/pace/pace.min.js"></script>
    <script src="js/lobipanel/lobipanel.min.js"></script>
    <script src="js/iscroll/iscroll.js"></script>

    <!-- ========== PAGE JS FILES ========== -->
    <script src="js/prism/prism.js"></script>
    <script src="js/waypoint/waypoints.min.js"></script>
    <script src="js/counterUp/jquery.counterup.min.js"></script>
    <script src="js/amcharts/amcharts.js"></script>
    <script src="js/amcharts/serial.js"></script>
    <script src="js/amcharts/plugins/export/export.min.js"></script>
    <link rel="stylesheet" href="js/amcharts/plugins/export/export.css" type="text/css" media="all" />
    <script src="js/amcharts/themes/light.js"></script>
    <script src="js/toastr/toastr.min.js"></script>
    <script src="js/icheck/icheck.min.js"></script>

    <!-- ========== THEME JS ========== -->
    <script src="js/main.js"></script>
    <script src="js/production-chart.js"></script>
    <script src="js/traffic-chart.js"></script>
    <script src="js/task-list.js"></script>

#### Code Toggle

We have made it easy for you to copy components' code without searching for it in .html file. Just click on 'Toggle Code' button in upper right corner to see component's code. You can just copy and paste it in your .html file.

#### Credits

- jQuery - http://jquery.com/
- Bootstrap - http://getbootstrap.com/
- animate.css - https://daneden.github.io/animate.css/
- FontAwesome - http://fortawesome.github.io/Font-Awesome/
- jQuery.Form - http://malsup.com/jquery/form/
- amCharts - https://www.amcharts.com/
- counterUp - https://github.com/bfintal/Counter-Up
- DataTables - https://datatables.net/
- CKEditor - http://ckeditor.com/
- Pixabay - https://pixabay.com