Call Us: +7.906.229.2627
Follow Us:
HTML5 template

Docs - PI Theme structure

PI theme has 6 colorschemes. So root folder consists from 6 folder (each for one of 6 colorschemes) that contain all scripts,3dParty scripts,styles,html,img used by each colorscheme and images folder, we decide to move some images to the build root, in order to decrease build archive size.

PI theme colorsheme folder consist from css/js/html components, in order to make website loads faster you should decide what components you need to load on your website or even on each pages. If you need low components quantity on your website ,you can create your own global.css and insert all css what you need. The same thing related to JS.

!!! You have to decrease files quantity on your website as much as possible, because it takes time for the web server to process each file request

Some of our customers complained about big amount of css/js files they need to connect, so we decided to merge as much as we can into global.css and files. Of course we are not so crazy to merge all css/js files. We have chosen some files that are frequently used on different websites and merge them into global files.

See below what's inside global.css and

This page contains information about css/js files content. 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 what's going on there.

PI Theme uses 3dParty scripts too, like isotope. They located in 3dParty folder


Our theme is based on bootstrap, but it doesn't contain bootstrap itself. Just reduced version of bootstrap. We did it in order to reduce not used code loading. We have build ~400 websites by far, and it's often that people want bootstrap, but use only grid, or buttons, or menu. It's not eficient.

Bootstrap components that are included in our bootstrap build:

  • Modals component
  • Transition detection component
  • Components animation component

Files that you need to connect always

Order should be exact the same as shown here

  • CSS - connect them in the header
  • 3dParty/fontello/css/fontello.css (read about reducing fontello size here Icons)
  • 3dParty/bootstrap/css/bootstrap.min.css
  • styles/global.css
  • styles/typo.css
  • JS - connect them in the footer
  • 3dParty/jquery-1.11.0.min.js
  • 3dParty/jquery.easing.1.3.js
  • 3dParty/bootstrap/js/bootstrap.min.js
  • 3dParty/jquery.scrollTo.min.js
  • scripts/

CSS files short description:

  • global.css Main CSS file that include often used CSS, CSS for each page. It includes files listed below:
    • reset.css
    • main.css
    • responsive.css
    • grid.css
    • galleries.css
    • helpers.css
    • section.css
    • header-rows.css
    • fixed-header.css
    • menu.css
    • menu-mobile.css
    • scrollTopArrow.css
    • loader.css
    • dropcaps.css
    • dividers.css
    • lists-icon-boxes.css
    • buttons.css
    • forms.css
    • alert-boxes.css
    • images.css

    Previously we had style.css that included files listed below:

    • reset.css
    • global.css
    • responsive.css
    • grid.css
    • section.css
    • header-rows.css
    • fixed-header.css
    • typo.css
    • dividers.css
    • lists-icon-boxes.css
    • buttons.css
    • forms.css
    • menu.css
    • menu-mobile.css
    • social.css
  • accordion.css CSS for accordion component
  • alert-boxes.css CSS for alert-box component
  • animations.css CSS for some conponents that have show/hide animation, like alert-box (after click on close buton)
  • boxes.css CSS for box component
  • buttons.css button styles
  • counters.css counter styles
  • dividers.css divider styles
  • dropcaps.css dropcap styles
  • fixed-header.css fixed-header styles
  • forms.css forms styles
  • galleries.css special grid for galleries
  • global.css contain global modification styles
  • google-maps.css google maps styles
  • grid.css main grid (bootstrap like)
  • header-rows.css header sections styles
  • images.css images styles, images captions, overlays etc.
  • lists-icon-boxes.css lists and icon boxes styles
  • loader.css load progress styles
  • menu.css menu and sub menu styles
  • menu-mobile.css mobile menu styles
  • page-nav.css navigation styles
  • portfolio.css portfolio styles
  • pricing-tables.css pricing table styles
  • reset.css CSS to make every element default styles the same in major browsers
  • responsive.css classes to control element visibility and other styles on different screen resolutions
  • section.css CSS for main theme blocks - sections
  • shadows.css CSS shadows
  • slider.css slider component styles
  • social.css social links component styles
  • tables.css table styles
  • tabs.css tab styles
  • testimonials.css testimonial styles
  • tooltips.css tooltip styles
  • typo.css typography styles

JS files short description

We have no any global file bacause we want users create their own globa.js files, in order to prevent usage of unused code. Some components consist from 1 javascript file, some consist from 2 javascript files (the other file is init script). Init scripts are scripts that add some event listeners related to components. Some functionality is only in init scripts, so for example to connect form inputs blur/focus classes it needs to connect just one pi.init.formsBlurClasses.js

  • Main JS file that include often used JS, JS for each page. It includes files listed below:
    • pi.helpers.js
    • pi.boundManager.js
    • pi.imagesLoader.js
    • pi.ddMenu.js
    • pi.init.removeLastElMargin.js
    • pi.fixedHeader.js
    • pi.mobileMenu.js
    • pi.columnFix.js
    • pi.init.submitFormFooter.js
    • pi.alert.js
    • pi.init.formsBlurClasses.js
    • pi.init.placeholder.js
    • pi.init.jqueryScrollTo.js
    • pi.scrollTopArrow.js
    • pi.init.caption.js
    • pi.init.colorbox.js
    • pi.init.animations.js

  • pi.accordion.js contains accordion compontent
  • pi.alert.js contains alert Box compontent
  • pi.boundManager.js adds some actions and events to define what is current bound (phone, tabletor desktop)
  • pi.columnFix.js adds fix for float width (sometimes elements have 100.5px end etc. width, that cause problem in some browsers)
  • pi.counter.js contains counter compontent
  • pi.init.counter.js contains counter initialization
  • pi.ddMenu.js contains droppdown menu component
  • pi.fixedHeader.js contains functionality for fixed header component
  • pi.fixedDuplicatedHeader.js contains functionality for fixed duplicated header component
  • pi.googleMapStyles.js contains custom google map styles
  • pi.helpers.js contains helpers used by other JS files
  • pi.imagesLoader.js contains images preloading component
  • pi.parallax.js contains parallax component
  • pi.init.parallax.js contains parallax initialization
  • pi.mobileMenu.js contains mobile menu component
  • pi.slider.js contains carousel/Slide Gallery component
  • pi.init.slider.js contains slider component initialization
  • contains tab component
  • contains tab initialization
  • pi.tooltip.js contains tooltip component
  • pi.init.tooltip.js contains tooltip initialization
  • pi.init.caption.js contains some actions for sliding images captions
  • pi.init.formsBlurClasses.js contains adding classes for forms input on focus/blur events
  • pi.init.iCheck.js contains iCheck jQuery plugin initialization
  • pi.init.isotope.js contains isotope jQuery plugin initialization
  • contains Google Maps jQuery plugin initialization
  • pi.init.placeholder.js contains placeholder jQuery plugin initialization
  • pi.init.prettify.js contains google code prettify plugin initialization
  • pi.init.removeLastElMargin.js removes last header row element right margin
  • pi.init.revolutionSlider.js contains revolution slider jQUery plugin initialization
  • pi.init.sectionHigh.js used in one page layouts, makes section height equal to page height
  • contains jumping socials initialization
  • pi.init.stylishSelect.js contains Stylish Select jQuery plugin initialization
  • pi.init.submitFormContact.js contains contact form submit handler initialization
  • pi.init.submitFormFooter.js contains footer form submit handler initialization
  • pi.init.submitFormSubscribe.js contains mailchimp subscription form submit handler initialization
  • pi.init.tweetie.js contains twitter feed initialization
  • pi.init.fitvids.js contains videos resizing initialization
  • pi.init.videoResize.js makes video backgrounds height equal to parent block height
  • pi.scrollTopArrow.js contains scroll top arrow initialization

Third Party components

Updating to newer versions

Updates could be difficult sometimes, because sometimes we change HTML structure or classnames, or add remove piece of code from global css or js files, if you aren't developer it's better to ask someone to help you. We can't teach HTML/CSS/JS and how to use CTRL+F everyone. We do changes in order to improve our product, we realise risks, but that's your decision update or not. And if you decide to update you need use brains. You can't just take and replace all styles and scripts, because you have updated something there. We don't know what changes you did, we don't know what version it was when you bought our theme.

But, we are ready to help. And we try to make update process more easy. We have created special folder that contain txt files with changes description. Before they were short description, but soon we will make better descriptions that would help people better.

Latest Tweet
Contact Us
  • Address: 557 Cyan Avenue, Suite 65,
    New York, CA 9008
  • Phone: (123) 456-7890
  • Email:
  • Monday - Friday: 9:00 am - 10:00 pm
    Saturday - Sunday: Closed
Say Hey

© 2014. «Aura HTML Theme». All right reserved.