Getting started

This framework is a set of components based on HTML, Javascript and CSS and it's the core of your website or template. It include a set of external plugins and the layout is based on the Bootstrap 4 grid system. If you bought a template from Themeforest you just need to edit it as for your needs, please check the next section for details about the design and colors customization. To start creating a new web project from scratch use the starting template, use the Blueprint template included in the purchase or create a new page by follow the below instructions. For any inqury you can contact us at support@schiocco.com.

Download starting page Blueprint template Premium templates

Design and colors

Customize existing design

If you bought a premium template from Themeforest and you want to customize the design edit the skin.css file, it's into the root template folder. The skin.css file is the only file you must edit and must be placed always after all the other css files. You can change all the colors of the template by editing the code lines on at the start of the skin.css file, you will see there the Colors section.

New design

If you're creating your project from scratch, to create the design include the skin.css file into your page after any other css file. You can get the skin.css file from the /css/ folder or from the link below. The CSS inside the skin.css file overwrite the core design. It's recommended to move the skin.css file outside the framework folder in order to update the framework without lost your customization. 

<link rel="stylesheet" href="themekit/css/skin.css">
Download skin.css

Required resources

Every page must include the following resources in the same order.

Type Resources
CSS 
<link rel="stylesheet" href="themekit/css/bootstrap-grid.css">
<link rel="stylesheet" href="themekit/css/style.css">
JS 
<script src="themekit/scripts/jquery.min.js"></script>
<script src="themekit/scripts/main.js"></script>
Other resources Most of projects require also a icons set and the script <script src="themekit/scripts/imagesloaded.min.js"></script> to render correctly the images inside the page. Most of projects use also a customized design, see the design section below for more details.

Page structure

Every page must use the following code structure.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="description" content="">
    <script src="themekit/scripts/jquery.min.js"></script>
    <script src="themekit/scripts/main.js"></script>
    <link rel="stylesheet" href="themekit/css/bootstrap-grid.css">
    <link rel="stylesheet" href="themekit/css/style.css">
</head>
<body>
    <div id="preloader"></div>
    <!-- NAVIGATION MENU -->
    <nav>
        
    </nav>
    <!-- HEADER -->
    <header>
        
    </header>
    <!-- MAIN CONTENT -->
    <main>
        <!-- SECTIONS -->
        <section>
            <!-- COLUMNS -->
            <div class="row">
                <div class="col-lg-6">
                    <!-- COMPONENTS OR CONTAINERS -->
                </div>
                <div class="col-lg-6">
                    <!-- COMPONENTS OR CONTAINERS -->
                </div>
            </div>
        </section>
        <section>
            <!-- COLUMNS -->
        </section>
    </main>
    <!-- FOOTER -->
    <footer>

    </footer>
</body>
</html>
Global CSS
Global JS