Docs - Theme structure

Home / Doc / Theme Structure

It is recommended that you keep minimal number of files on the website to improve the performance.

We have merged some frequently used, logically and functionally connected css / js files into global files to reduce the file count.

This page contains information about the content of css/js files. Other docs pages have HTML code examples with CSS/JS scripts they need to work properly, CSS classes to control element view and CSS classes and data attributes used by JS.

Please see detailed documentation for any component if you have any troubles with understanding them.

Bootstrap

Our theme is based on Bootstrap framework. Bootstrap components that are included in our bootstrap build:

  • Modals component
  • Transition detection component
  • Components animation component

Below are the files that you must always connect

master.css must be defined in this css

  • CSS - Always connect them in the header
  • http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic
  • All css define in master.css css like E.X. @import url("../css/theme.css");

  • JS - Always connect them in the Footer
  • js/jquery-1.11.2.js
  • js/fuction.js
  • js/bootstrap.js
  • js/modernizr.js
  • js/backtotop.js

CSS files short description:

master.css is the main CSS file that is used by every page and it includes CSS styles that are used often. It includes files listed below:

  • animation.css - CSS for some conponents that have show/hide animation, like fadein (page load & scroll animation)
  • themes.css - CSS for theme component
  • bootstrap.css - CSS style
  • font-awesome.css - CSS for icon component
  • stickyheader.css - CSS for header component
  • res-menu.css - CSS for mobile menu component
  • slick.css - CSS for each slider example
  • slick-theme.css - CSS for each slider theme example
  • full-thumb-slider-hover-effect.css - CSS for center mode slider example and hover effect
  • hover.css - CSS for hover effects
  • backtotop.css - CSS for bottom to top scroll
  • accordian.css - CSS for accordian component
  • tooltip-viewport.css - CSS for tooltip component
  • easy-responsive-tabs.css - CSS for responsive tabs component
  • mega-dropdown.css - CSS for mega menu header component
  • portfolio.css - CSS for filter portfolio component
  • bootstrapValidater.css - CSS for Validation
  • settings.css - CSS for each slider Revolution example
  • layers.css - CSS for each slider Revolution example
  • navigation.css - CSS for each slider Revolution example

JS files along with their short descriptions are provided below:

  • jquery-1.11.2.js contains jquery global component
  • fuction.js - contains all function component
  • bootstrap.js - contains bootstrap component
  • modernizr.js - contains globle component
  • slick.js - contains slick slider component
  • stickyheader.js - contains sticky header component
  • mega-dropdown.js - contains mega dropdown component
  • backtotop.js - contains click to scroll top component
  • parallax.js - contains parallax effect component
  • animation.js - contains animation component
  • counter.js - contains counter component
  • number-counter.js - contains counter component
  • tooltip-viewport.js - contains tooltip-vieport component
  • ie10-viewport-bug-workaround.js contains internet explorer component
  • accordian.js - contains accordion component
  • easyResponsiveTabs.js - contains easyResponsiveTabs component
  • jquery.popup.leanModa.min.js - contains popup model component
  • jquery.portfolio.js - contains filter portfolio component
  • jquery.p-gallery.js - contains like grid layout component
  • BoostrapValidater.js - form Validation bootstrap component
  • formValidation.js - form Validation component
  • js/revoluation/jquery.themepunch.tools.min.js - Contains of Slider Revolution component
  • js/revoluation/jquery.themepunch.revolution.min.js - Contains of Slider Revolution component
  • js/revoluation/revolution.extension.actions.min.js - Contains of Slider Revolution component
  • js/revoluation/revolution.extension.carousel.min.js - Contains of Slider Revolution component
  • js/revoluation/revolution.extension.kenburn.min.js - Contains of Slider Revolution component
  • js/revoluation/revolution.extension.layeranimation.min.js - Contains of Slider Revolution component
  • js/revoluation/revolution.extension.migration.min.js - Contains of Slider Revolution component
  • js/revoluation/revolution.extension.navigation.min.js - Contains of Slider Revolution component
  • js/revoluation/revolution.extension.parallax.min.js - Contains of Slider Revolution component
  • js/revoluation/revolution.extension.slideanims.min.js - Contains of Slider Revolution component
  • js/revoluation/revolution.extension.video.min.js - Contains of Slider Revolution component
  • js/revoluation/revoluationfunction.js - Contains of Slider Revolution component
Top