Docs - PI Theme structure
PI theme has 6 colorschemes. So root folder contains from 6 folder (each for one of 6 colorschemes) that contain all scripts/3dParty script/astyles/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 relates 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 pi.global.js files. Of course we are not so crazy to merge all css/js files. We have chosen some files that are requently used on different websites and merge them into global files.
See below what's inside global.css and pi.global.js
This page contain information about css/js files content. Other 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
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
- animations.css
- loader.css
- typo.css
- dropcaps.css
- dividers.css
- lists-icon-boxes.css
- buttons.css
- forms.css
- menu.css
- menu-mobile.css
- social.css
- scrollTopArrow.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
- accordeons.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
- pi.global.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.detectTransition.js
- pi.alert.js
- pi.init.formsBlurClasses.js
- pi.init.placeholder.js
- pi.init.jqueryScrollTo.js
- pi.scrollTopArrow.js
- pi.init.social.js
- pi.init.caption.js
- pi.init.colorbox.js
- pi.init.animations.js
- pi.accordeon.js contains accordeon 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.detectTransition.js contains transition support detection (taken from modernizr)
- 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
- pi.tab.js contains tab component
- pi.init.tab.js 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
- pi.init.map.js 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
- pi.init.social.js 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
- fontello- font contains most used icons fontello.com
- google-code-prettify- Google code styling plugin code.google.com/p/google-code-prettify/
- colorbox- lightbox plugin jacklmoore.com/colorbox/
- iCheck- jQuery plugin for checkboxes and radioboxes inputs styling fronteed.com/iCheck
- isotope- jQuery plugin for reordering and organizing elements on a page isotope.metafizzy.co
- jquery-stylish-select- jQuery plugin for select inputs styling github.com/scottdarby/Stylish-Select
- rs-plugin- famous Relolution slider, the best slider we ever saw github.com/scottdarby/Stylish-Select
- gauge.min.js- script for creating circle counters bernii.github.io/gauge.js
- inview.js- jQuery plugin for detection whether element in browser viewport or nogithub.com/protonet/jquery.inview
- jquery.gmap.min.js- jQuery plugin for google maps github.com/marioestrada/jQuery-gMap
- jquery.placeholder.js- jQuery plugin for old browsers placeholder support mths.be/placeholder
- jquery.touchSwipe.min.js- jQuery plugin for mobile devices swipe detection github.com/mattbryson/TouchSwipe-Jquery-Plugin
- jquery-1.11.0.min.js- jQuery libruary jquery.com
- requestAnimationFramePolyfill.min.js- read about new request animation frame feature here www.paulirish.com/2011/requestanimationframe-for-smart-animating
- respond.min.js- Enable old browser media queries detection github.com/scottjehl/Respond
- jquery.fitvids.js- Fix videos resizing github.com/davatron5000/FitVids.js
- tweetie.js- jQuery twitter feed plugin github.com/sonnyt/Tweetie
- jquery.easing.1.3.js- jQuery easing functions github.com/gdsmith/jquery.easing
- jquery.scrollTo.min.js- jQuery scroll helper github.com/flesler/jquery.scrollTo
- SmoothScroll.js- Enable smooth browser window scrolling gist.github.com/galambalazs/6477177
