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>
Design
Now that the page is ready you may want to create and apply your design. To do it include the following file skin.css on top, after the style.css file and after any other css file. The CSS inside the skin.css file will overwrite and enrich the core design of the framework. 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