Thank you for purchasing ProUI. If you have any questions that are beyond the scope of this documentation, please feel free to email via my user page contact form.

Thanks so much!

Changelog

FRONTEND

CHANGES
- Added: Home Full Width Video Page
- Added: Home Boxed Video Page
- Updated: Font Awesome 4.3.0 (4.2.0) - 40 new icons!
- Updated: Bootstrap 3.3.2 (3.3)
- Updated: jQuery 1.11.2 (1.11.1)
- Updated: jQuery UI 1.11.2 (1.11.1)
- Updated: Gmaps.js 0.4.16 (0.4.15)
- Updated: Modernizr 2.8.3 (2.7.1)
- Updated: Magnific Popup 1.0.0 (0.9.9)
- Updated: HTML5 Placeholder jQuery Plugin 2.1.0 (2.0.7)
- Improvement: Main menu mobile animation performance
- Improvement: Multiple lightbox galleries improvement
- Improvement: Removed 'http:' from jQuery, Gmaps API and Google Web fonts (now it will load the https or http version automatically - If you like to preview the HTML version, it is better to do it through a local/online web server)
- Fixed: Small fixes and optimizations

FILES ADDED
- less/bootstrap.less
- img/placeholders/videos/*
- index_video.php (.html)
- index_boxed_video.php (.html)

FILES REMOVED
- less/bootstrap/ [Folder]

FILES UPDATED
- css/fonts/fontawesome/* Font Awesome updated to 4.3.0
- css/bootstrap.min.css Updated to 3.3.2
- css/main.css Various updates and additions
- css/plugins.css Font Awesome updated to 4.3.0
- less/fonts/fontawesome/* Font Awesome updated to 4.3.0
- less/plugins/font_awesome.less Font Awesome updated to 4.3.0
- less/main/layout.less Google Web Font link updated
- less/main/bs_overwrite.less .media-body fix
- less/main/content.less Store menu fix
- less/main/header.less Main menu mobile animation optimized
- less/main/extras.less Main menu mobile animation optimized
- less/styles.less Bootstrap file updated
- inc/config.php Menu updated (updated in all .html files in HTML version)
- inc/template_start.php Modernizr link updated (updated in all .html files in HTML version)
- inc/template_scripts.php jQuery link updated (updated in all .html files in HTML version)
- js/helpers/gmaps.min.js Updated to 0.4.16
- js/vendor/bootstrap.min.js Updated to 3.3.2
- js/vendor/jquery-1.11.2.min.js Updated to 1.11.2
- js/vendor/modernizr-respond.min.js Updated to 2.8.3 and renamed
- js/app.js Lightbox Gallery improved + VideoBG init
- js/plugins.js Updated: jQuery UI 1.11.2, Magnific Popup 1.0.0, HTML5 Placeholder jQuery Plugin 2.1.0, Added: VideoBG.js
- about.php (.html) Gmaps link updated
- contact.php (.html) Gmaps link updated

BACKEND

CHANGES
- Added: Coming Soon Page
- Added: CKEditor In-place Editor
- Added: Bootstrap Colorpicker
- Added: Bootstrap Typeahead (for autocomplete functionality)
- Added: Working Print Button (+ function added for printing)
- Added: Option for remembering the selected color theme from the sidebar (with cookies)
- Updated: Font Awesome 4.3.0 (4.2.0) - 40 new icons!
- Updated: Bootstrap 3.3.2 (3.3)
- Updated: jQuery 1.11.2 (1.11.1)
- Updated: jQuery UI 1.11.2 (1.11.1)
- Updated: Datatables 1.10.4 (1.10.3)
- Updated: FullCalendar 2.2.6 (2.1.1)
- Updated: MomentJS 2.9.0 (2.8.1)
- Updated: Chosen 1.3.0 (1.2.0)
- Updated: Select2 3.5.2 (3.5.1)
- Updated: CKEditor 4.4.6 (4.4.5)
- Updated: Gmaps.js 0.4.16 (0.4.15)
- Updated: Modernizr 2.8.3 (2.7.1)
- Updated: Dropzone 3.12.0 (3.10.2)
- Updated: Magnific Popup 1.0.0 (0.9.9)
- Updated: HTML5 Placeholder jQuery Plugin 2.1.0 (2.0.7)
- Updated: jQuery Masked Input Plugin 1.4.0 (1.3.1)
- Improvement: Multiple lightbox galleries improvement
- Improvement: CSS Switches (+ now degrade in IE8)
- Improvement: Removed 'http:' from jQuery, Gmaps API and Google Web fonts (now it will load the https or http version automatically - If you like to preview the HTML version, it is better to do it through a local/online web server)
- Fixed: Small fixes and optimizations
- Removed: WYSIHTML5 Editor
  If you would like to keep using it, you can keep its code from 3.0 version. Plugin CSS code: css/plugins.css, Plugin JS code: js/plugins.js, Plugin Init code: js/app.js -> uiInit()

FILES ADDED
- less/plugins/bootstrap_colorpicker.less
- less/bootstrap.less
- img/jquery.colorpicker/ [Folder]
- img/placeholders/backgrounds/coming_soon_full_bg.jpg
- js/pages/readyComingSoon.js
- page_ready_coming_soon.php (.html)

FILES REMOVED
- less/bootstrap/ [Folder]
- less/plugins/wysihtml5.less

FILES UPDATED
- css/fonts/fontawesome/* Font Awesome updated to 4.3.0
- css/bootstrap.min.css Updated to 3.3.2
- css/plugins.css WYSIHTML5 Removed + Bootstrap Colorpicker added + Font Awesome updated to 4.3.0
- css/main.css Various updates, fixes and additions
- less/fonts/fontawesome/* Font Awesome updated to 4.3.0
- less/plugins/font_awesome.less Font Awesome updated to 4.3.0
- less/main/layout.less Google Web Font link updated
- less/main/pages.less .media-body fix + Coming Soon page
- less/main/extras.less Coming Soon page
- less/main/bs_overwrite.less CSS switches + Various fixes
- less/styles.less File imports updated
- inc/config.php Version + Menu updated + New option for color themes cookies (updated in all .html files in HTML version)
- inc/page_head.php Various small fixes + New option for color themes cookies (updated in all .html files in HTML version)
- inc/template_start.php Modernizr link updated (updated in all .html files in HTML version)
- inc/template_scripts.php jQuery link updated (updated in all .html files in HTML version)
- js/helpers/ckeditor/* Updated to 4.4.6 and moved in js/helpers/ folder
- js/helpers/gmaps.min.js Updated to 0.4.16
- js/vendor/bootstrap.min.js Updated to 3.3.2
- js/vendor/jquery-1.11.2.min.js Updated to 1.11.2
- js/vendor/modernizr-respond.min.js Updated to 2.8.3 and renamed
- js/plugins.js Updated: FullCalendar 2.2.6, Chosen 1.3.0, Select2 3.5.2, MomentJS 2.9.0, jQuery UI 1.11.2, Datatables 1.10.4, DropzoneJS 3.12.0, Magnific Popup 1.0.0, HTML5 Placeholder jQuery Plugin 2.1.0, jQuery Masked Input Plugin 1.4.0, Added: Bootstrap Colorpicker, Bootstrap Typeahead, jQuery Cookie, Countdown.js, Removed: WYSIHTML5 Editor
- js/app.js Various improvements and additions + WYSIHTML5 init code removed
- index.php (.html) Gmaps link updated
- index2.php (.html) Gmaps link updated
- page_comp_maps.php (.html) Gmaps link updated
- page_ready_timeline.php (.html) Gmaps link updated
- page_ready_profile.php (.html) Gmaps link updated
- page_widgets_social.php (.html) Gmaps link updated
- page_ready_invoice.php (.html) Print Button added
- page_ready_forum.php (.html) WYSIHTML5 Editor removed
- page_ready_inbox_compose.php (.html) WYSIHTML5 Editor removed
- page_ecom_product_edit.php (.html) CKEditor link updated
- page_forms_components.php (.html) CKEditor link updated + CKEditor In-place editor added + New Components added + WYSIHTML5 Editor removed
- page_icons_fontawesome.php (.html) New icons added

If you need any assistance with 3.1 version do not hesitate to contact me! :-)

EMAIL TEMPLATES

CHANGES
- Added: 30 Email Templates (the 5 main templates with the 6 new color themes)

FRONTEND

CHANGES
- Added: eCommerce Home Page
- Added: eCommerce Search Results Page
- Added: eCommerce Product List Page
- Added: eCommerce Product Page
- Added: eCommerce Product Comparison Page
- Added: eCommerce Shopping Cart Page
- Added: eCommerce Checkout Page
- Added: Form Wizard plugin
- Added: Favicon for iPhone 6 Plus
- Added: 6 new color themes in themes.css
- Updated: Bootstrap 3.3 (3.2)
- Updated: Gmaps.js 0.4.15 (0.4.14)
- Updated: less.js 2.0.0b2 (1.7.3)
- Improvement: Various small CSS improvements
- Fixed: Small fixes and optimizations

FILES ADDED
- img/placeholders/headers/photo(25 to 35).jpg Multiple Files
- img/placeholders/headers/photo(25 to 35)@2x.jpg Multiple Files
- img/placeholders/headers/store_home.jpg
- img/icon180.png
- js/pages/ecomCheckout.js
- ecom_home.php (.html)
- ecom_search_results.php (.html)
- ecom_product_list.php (.html)
- ecom_product.php (.html)
- ecom_product_comparison.php (.html)
- ecom_shopping_cart.php (.html)
- ecom_checkout.php (.html)

FILES UPDATED
- css/bootstrap.min.css Updated to 3.3
- css/plugins.css Glyphicons small fix
- css/themes.css 6 new color themes
- css/main.css Various updates and additions
- less/bootstrap/* Updated to 3.3
- less/plugins/glyphicons.less Small fix
- less/main/bs_overwrite.less .media-body fix
- less/themes.less New color themes
- less/variables.less New color themes + boxed layout width updated
- less/js/less.min.js Updated to 2.0.0b2
- inc/config.php Menu updated (updated in all .html files in HTML version)
- inc/template_start.php Renamed favicon.ico to favicon.png + icon180.png added (updated in all .html files in HTML version)
- img/favicon.png Renamed from favicon.ico to favicon.png
- js/vendor/bootstrap.min.js Updated to 3.3
- js/helpers/gmaps.min.js Updated to 0.4.15
- js/pages/contact.js Removed setting height to map container
- js/app.js Store menu functionality added
- js/plugins.js Form Wizard + jQuery UI added
- features.php (.html) Appear animation added on the main image
- jobs.php (.html) Updated .job classes (changed to .store classes)
- contact.php (.html) Height set to map container

BACKEND

CHANGES
- Added: 6 New Color Themes
- Added: Mini main sidebar with flyout menu
- Added: Horizontal Navigation
- Added: Dashboard 2 Page
- Added: eCommerce Dashboard Page
- Added: eCommerce Orders Page
- Added: eCommerce Order View Page
- Added: eCommerce Products Page
- Added: eCommerce Product Edit Page
- Added: eCommerce Customer View Page
- Added: Favicon for iPhone 6 Plus
- Added: Documentation extended with CSS Class reference
- Updated: Bootstrap 3.3 (3.2)
- Updated: Datatables 1.10.3 (1.10.2)
- Updated: FullCalendar 2.1.1 (2.0.2)
- Updated: Chosen 1.2.0 (1.1.0)
- Updated: CKEditor 4.4.5 (4.4.4)
- Updated: slimScroll 1.3.3 (1.3.2)
- Updated: MomentJS 2.8.1 (2.7.0)
- Updated: Gmaps.js 0.4.15 (0.4.14)
- Updated: jQuery UI 1.11.1 (1.10.4)
- Updated: Nprogress 0.1.6 (0.1.2)
- Updated: less.js 2.0.0b2 (1.7.3)
- Fixed: Small fixes and optimizations

FILES ADDED
- css/themes/coral.css
- css/themes/lake.css
- css/themes/forest.css
- css/themes/waterlily.css
- css/themes/emerald.css
- css/themes/blackberry.css
- less/themes/coral.less
- less/themes/lake.less
- less/themes/forest.less
- less/themes/waterlily.less
- less/themes/emerald.less
- less/themes/blackberry.less
- img/icon180.png
- js/pages/index2.js
- js/pages/ecomDashboard.js
- js/pages/ecomOrders.js
- js/pages/ecomProducts.js
- index2.php (.html)
- page_layout_static_main_sidebar_mini.php (.html)
- page_ecom_dashboard.php (.html)
- page_ecom_orders.php (.html)
- page_ecom_order_view.php (.html)
- page_ecom_products.php (.html)
- page_ecom_product_edit.php (.html)
- page_ecom_customer_view.php (.html)

FILES UPDATED
- css/themes/* All files updated to support horizontal navigation + mini sidebar
- css/bootstrap.min.css Updated to 3.3
- css/plugins.css Glyphicons small fix + FullCalendar Updated
- css/themes.css 6 new color themes
- css/main.css Various updates, fixes and additions
- less/bootstrap/* Updated to 3.3
- less/plugins/glyphicons.less Small fix
- less/plugins/full_calendar.less Updated
- less/main/bs_overwrite.less Horizontal Navigation + Contextual Colors
- less/main/extras.less Horizontal Navigation + Mini Sidebar
- less/main/pages.less Small fixes
- less/main/sidebar_nav.less Sidebar themes
- less/themes.less New color themes
- less/styles.less New color themes
- less/variables.less New color themes
- less/js/less.min.js Updated to 2.0.0b2
- inc/config.php Version + Menu updated + New variables/classes for mini sidebar (updated in all .html files in HTML version)
- inc/page_head.php New color themes + .sidebar-scroll changes (from classes to ids) + new class for hide elements in mini sidebar mode + Some demo template options removed from header (updated in all .html files in HTML version)
- inc/template_start.php Renamed favicon.ico to favicon.png + icon180.png added (updated in all .html files in HTML version)
- img/favicon.png Renamed from favicon.ico to favicon.png
- js/ckeditor/* Updated to 4.4.5
- js/vendor/bootstrap.min.js Updated to 3.3
- js/helpers/gmaps.min.js Updated to 0.4.15
- js/pages/tableDatatables.js Option names updated for the newest Datatables version
- js/plugins.js Updated: FullCalendar 2.1.1, Chosen 1.2.0, Slimscroll 1.3.3, MomentJS 2.8.1, jQuery UI 1.11.1, Nprogress 0.1.6, Datatables 1.10.3 + BS Integration
- js/app.js Removed some demo template options + Mini Sidebar support

If you need any assistance with 3.0 version do not hesitate to contact me! :-)

EMAIL TEMPLATES

CHANGES
- Added: 5 Responsive Email Templates (with 9 color variations each)
  - Product Launch
  - Account Activation
  - Welcome Email
  - Password Reset
  - Newsletter

FRONTEND

CHANGES
- Added: Jobs Page
- Added: How it works Page
- Updated: Font Awesome 4.2.0 (4.1.0)
- Updated: Gmaps.js 0.4.14 (0.4.12)

FILES ADDED
- jobs.php (.html)
- how_it_works.php (.html)

FILES UPDATED
- css/fonts/fontawesome/* All files updated with 4.2.0
- css/plugins.css Updated Font Awesome with 4.2.0
- css/main.css Jobs styles added
- less/fonts/fontawesome/* All files updated with 4.2.0
- less/plugins/font_awesome.less Updated with 4.2.0
- less/main/content.less Jobs styles added
- inc/config.php Menu updated (updated in all .html files in HTML version)
- js/helpers/gmaps.min.js Updated with 0.4.14

BACKEND

CHANGES
- Added: Files Page
- Updated: Font Awesome 4.2.0 (4.1.0)
- Updated: Datatables 1.10.2 (1.10.0)
- Updated: Select2 3.5.1 (3.4.6)
- Updated: CKEditor 4.4.4 (4.3.2)
- Updated: Gmaps.js 0.4.14 (0.4.12)
- Improvement: Created a new element for page preloader (#page-wrapper) - Removed preloader class from <body> tag
- Improvement: Scroll was added on user header dropdown on mobiles (when header set as top fixed)
- Fixed: Datepicker in modals
- Fixed: Various small CSS fixes

FILES ADDED
- js/pages/readyFiles.js
- page_ready_files.php (.html)

FILES UPDATED
- css/fonts/fontawesome/* All files updated with 4.2.0
- css/plugins.css Updated Font Awesome with 4.2.0 + Datepicker fix
- css/main.css Various fixes and optimizations. Also, additions for Files Page
- less/fonts/fontawesome/* All files updated with 4.2.0
- less/plugins/font_awesome.less Updated with 4.2.0
- less/plugins/datepicker.less Datepicker fix
- less/main/bs_overwrite.less Small additions
- less/main/extras.less Small additions
- less/main/layout.less Small additions
- less/main/pages.less Small additions
- less/main/content.less Small additions
- less/main/sidebar_nav.less Small additions
- inc/config.php Version + Menu updated (updated in all .html files in HTML version)
- inc/page_head.php Added new #page-wrapper element for preloader class (updated in all .html files in HTML version)
- inc/page_footer.php Added #page-wrapper close tag (updated in all .html files in HTML version)
- inc/template_start.php HTML open tag conditional comments fixed + Removed preloader class from body (updated in all .html files in HTML version)
- js/ckeditor/* Updated with 4.4.4
- js/helpers/gmaps.min.js Updated with 0.4.14
- js/plugins.js Updated: Select2 3.5.1, Datatables 1.10.2 + BS Integration
- js/app.js pageLoading() function updated for #page-wrapper element
- page_icons_fontawesome.php (.html) 40 new icons added
- page_ui_preloader.php (.html) Updated code in preview preloader button for #page-wrapper element

If you need any assistance with 2.2 version do not hesitate to contact me! :-)

FRONTEND

CHANGES
- Added: Full Width Parallax Page
- Added: Boxed Parallax Page
- Added: Helpdesk Page
- Added: LessCSS Support
  LessCSS files are now available in case you would like to use LessCSS instead of CSS. Many variables are available to easily customize colors or other options. If you would like to use LessCSS, then please have a look at the LessCSS section of this documentation.
- Added: PHP Version
- Improvement: JS Code Optimizations (CountTo and Animations on element appear are now initiliazed with 'data' attributes)
- Updated: Bootstrap 3.2 (3.1.1)
- Updated: jQuery 1.11.1 (1.11.0)

FILES ADDED
- /img/placeholders/parallax/ Folder with images for the parallax pages
- /less Folder with LessCSS Files
- index_parallax.php (.html)
- index_boxed_parallax.php (.html)
- helpdesk.php (.html)

FILES REMOVED
The functionality of CountTo and Animation on element appear moved into a generic block of code in js/app.js. Now the functionality is triggered through 'data' attributes.
- js/pages/team.js
- js/pages/portfolioSingle.js
- js/pages/features.js
- js/pages/index.js

FILES UPDATED
- css/bootstrap.min.css Updated to 3.2 version
- css/main.css Parallax code added
- js/vendor/jquery.min.1.11.1.js Updated to 1.11.1 version
- js/vendor/bootstrap.min.js Updated to 3.2 version
- js/pages/about.js Removed CountTo code
- js/app.js Added new code in uiInit() (CountTo and Animation on element appear functionality)
- about.php Added data attributes to the counters
- features.php Removed features.js script + added new data attributes to counters and animation elements + small sign up form fix
- portfolio_single.php Removed portfolioSingle.js script + added new data attributes to animation elements
- team.php Removed team.js script + added new data attributes to animation elements
- index.php Removed index.js script + added new data attributes to counters and animation elements + small sign up form fix
- index_alt.php Removed index.js script + added new data attributes to counters and animation elements + small sign up form fix
- index_boxed.php Removed index.js script + added new data attributes to counters and animation elements + small sign up form fix
- index_boxed_alt.php Removed index.js script + added new data attributes to counters and animation elements + small sign up form fix

BACKEND

CHANGES
- Added: Widgets Links
- Added: Page Preloader
- Added: Tasks Page
- Added: Tickets Page
- Added: Clickable Form Wizard
- Added: New CSS3 Animations
- Added: Main Sidebar Menu Auto Scrolling (when a submenu opens/closes)
- Updated: Bootstrap 3.2 (3.1.1)
- Updated: jQuery 1.11.1 (1.11.0)
- Updated: Datatables 1.10.0 (1.9.4)
- Updated: Full Calendar 2.0.2 (1.6.4)
- Updated: Flot Charts 0.8.3 (0.8.2)
- Updated: Dropzone.js 3.10.2 (3.8.4)
- Updated: less.js 1.7.3 (1.7.0)

FILES ADDED
- js/pages/readyTasks.js
- js/pages/readyTickets.js
- page_ui_preloader.php (.html)
- page_widgets_links.php (.html)
- page_ready_tasks.php (.html)
- page_ready_tickets.php (.html)

FILES UPDATED
- css/bootstrap.min.css Updated to 3.2 version
- css/main.css Various additions for the new features
- css/plugins.css CSS3 Animations + Datatables + Full Calendar
- less/bootstrap/ Updated to 3.2 version
- less/main/bs_overwrite.less Small additions
- less/main/layout.less Small additions
- less/main/pages.less Small additions
- less/main/extras.less Small additions
- less/main/content.less Small additions
- less/plugins/datatables.less Small additions
- less/plugins/full_calendar.less Small additions
- less/plugins/css3_animations.less Small additions
- less/js/less.min.js Updated to 1.7.3 version
- inc/config.php Main menu and version updated. Also updated in all .html pages (HTML version). Added new variables for enabling/disabling Page preloader and Menu Auto Scrolling
- inc/template_start.php Added page preloader option code and a new html top tag (if IE9). Also updated in all .html pages (HTML version)
- inc/template_scripts.php Updated jQuery link to 1.11.1 version. Also updated in all .html pages (HTML version)
- inc/template_head.php Added page preloader html markup and menu auto scrolling option code. Also updated in all .html pages (HTML version)
- js/vendor/jquery.min.1.11.1.js Updated to 1.11.1 version
- js/vendor/bootstrap.min.js Updated to 3.2 version
- js/pages/tablesDatatables.js Code updated for DataTables 1.10.0 version
- js/pages/formWizard.js Updated with clickable wizard code
- js/pages/compCalendar.js Small fix for Full Calendar 2.0.2 version
- js/plugins.js Added: MomentJS (used by the new Full Calendar), Updated: Dropzone 3.10.2, Flot Charts 0.8.3, Datatables 1.10.0 + BS Integration, Full Calendar 2.0.2
- js/app.js Additions for the new features (page preloader + Menu Auto Scrollig), Datatables Integration, Optimizations
- page_forms_wizard.php (.html) Clickable form wizard was added
- page_comp_animations.php (.html) Added new CSS3 Animations
- index.php (.html) Updated top Widgets to Widgets Links

If you need any assistance with 2.1 version do not hesitate to contact me! :-)

2.0 Update May 16, 2014

CHANGES
- Added: Frontend Template (HTML)
- Updated: Font Awesome 4.1.0 (4.0.3) 71 new icons were added
- Updated: Gmaps.js 0.4.12 (0.4.9)

FILES UPDATED
- css/fonts/fontawesome/* All files updated with 4.1.0
- css/plugins.css Updated Font Awesome with 4.1.0
- less/fonts/fontawesome/* All files updated with 4.1.0
- less/plugins/font_awesome.less Updated with 4.1.0
- js/helpers/gmaps.min.js Updated with 0.4.12
- page_icons_fontawesome.php (.html) New icons were added

If you need any assistance with 2.0 version do not hesitate to contact me! :-)

1.4 Update May 1, 2014

CHANGES
- Added: Chat Page
- Added: Alternative Lock Screen
- Added: Alternative Login Page
- Added: Fullscreen Background Login Page
- Added: Reminder Pass Section (in all login pages)
- Added: Form Validation (in all login pages' forms)
- Added: Draggable & Sortable Blocks
- Improvement: jQuery local import (security improved by replacing unescape with decodeURI)
- Improvement: Login JS code
- Fixed: Small sidebars scrolling issue

FILES ADDED
- /img/placeholders/backgrounds Folder with fullscreen backgrounds for the new pages
- js/pages/uiDraggable.js
- js/pages/readyChat.js
- login_alt.php (.html)
- login_full.php (.html)
- page_ready_lock_screen_alt.php (.html)
- page_ready_chat.php (.html)
- page_ui_draggable_blocks.php (.html)

FILES UPDATED
- css/main.css Alternative login + Full background image + Draggable blocks + Chat page + Small Fixes
- less/main/bs_overwrite.less Small fixes
- less/main/pages.less Alternative login + Full background image + Chat page
- less/main/extras.less Alternative login + Draggable blocks + Chat page
- less/main/content.less Draggable blocks
- inc/config.php Main menu and version updated. Also updated in all .html pages (HTML version)
- inc/template_scripts.php Updated local jQuery import. Also updated in all .html pages (HTML version)
- js/pages/login.js Code improved and form validation added
- js/plugins.js Added: jQuery UI Sortable plugin
- js/app.js Small sidebars scroll fix
- login.php (.html) Reminder pass section added

If you need any assistance with 1.4 version do not hesitate to contact me! :-)

1.3 Update April 9, 2014

CHANGES
- Added: LessCSS Support
  LessCSS files are now available in case you would like to use LessCSS instead of CSS. Many variables are available to easily customize colors or various options such as sidebars’ width when they are fully visible or partial. If you are not interested in LessCSS, then you can just delete /less folder from your project. If you would like to use LessCSS, then please have a look at the LessCSS section of this documentation.
- Added: Growl Notifications
- Added: Select2 Plugin Support
- Added: Form Wizard with Progress Bars
- Added: CSS Print Styles
- Improvement: Sliders (contextual styles and arrow key support added)
- Improvement: Simple WYSIWYG Editor (improved functionality)
- Improvement: Fancy Color Theme (main highlight color updated)
- Updated: BS Datepicker 1.3.0
- Updated: BS WYSIHTML5 0.2.9 (0.0.2)
- Updated: BS Slider 3.0.0 (2.0.0)
- Updated: slimScroll 1.3.2 (1.3.0)
- Fixed: Nprogress z-index issue
- Fixed: CSS opacity styles for IE8
- Fixed: Glyphicons cloud upload/download icons reversed

FILES ADDED
- /less Folder with files for LessCSS support. If you would like to use LessCSS, then please have a look at the LessCSS section of this documentation.
- /img/jquery.select2 Folder with assets for Select2 plugin

FILES UPDATED
- css/themes/* All theme files updated with Select2 support. Fancy + Amethyst themes had small color updates
- css/main.css Print styles and small fixes
- css/plugins.css Select2 styles added and Glyphicons-Nprogress-Timepicker-Slider updated with small additions/fixes
- css/themes.css Fancy theme main highlight color updated
- js/pages/formsWizard.js Added JS code for Progress Bars Wizard functionality
- js/pages/uiProgress.js Added JS code with Growl Notifications examples
- js/plugins.js Added: BS Growl + Select2, Updated: slimScroll + BS Slider + BS Datepicker + BS WYSIHTML5
- js/app.js Select2 Initialization and small additions - main variables are now initialized in uiInit()
- page_forms_components.php (.html) Select2 example + Contextual Sliders
- page_forms_wizard.php (.html) Wizard with Progress Bars added
- page_ui_progress_loading.php (.html) Growl Notifications added

If you need any assistance with 1.3 version do not hesitate to contact me! :-)

1.2 Update March 13, 2014

CHANGES
- Added: PSDs Files
  - 01. ProUI - Logo (Updated)
  - 02. ProUI - Color Themes
  - 03. ProUI - Login + Register
  - 04. ProUI - Error Pages
  - 05. ProUI - Dashboard
  - 06. ProUI - Statistics Widgets
  - 07. ProUI - Social Widgets
  - 08. ProUI - Media Widgets
  - 09. ProUI - UI Kit (+ Full Header + Alternative Sidebar)
  - 10. ProUI - Forms
  - 11. ProUI - Charts
- Added: New Widgets
  - New Statistics Widgets
  - New Social Widgets
  - New Media Widgets
- Added: Contacts Page
- Added: eLearning Pages
  - Courses
  - Course - Lessons
  - Course - Lesson Page
- Added: Interactive Blocks (you can now add interactive controls to a block to toggle its content, toggle it fullscreen or hide it)
- Added: Extensive Plugins Guide (added to documentation)
- Improvement: Chat Input Auto Focus (when opening sidebar's chat window)
- Updated: Dropzone 3.8.4 (3.7.1)
- Updated: Chosen 1.1.0 (1.0.0)

FILES ADDED
- page_ready_contacts.php (.html)
- page_ready_elearning_courses.php (.html)
- page_ready_elearning_course_lessons.php (.html)
- page_ready_elearning_course_lesson.php (.html)

FILES UPDATED
- css/main.css Some small additions
- inc/config.php Main menu updated! Also updated in all .html pages (HTML version)
- js/plugins.js Updated Chosen and Dropzone plugin
- js/app.js Interactive block functionality and chat input improvement were added
- page_ui_grid_blocks.php (.html) Interactive block example was added!
- page_widgets_stats.php (.html) New widgets were added!
- page_widgets_social.php (.html) New widgets were added!
- page_widgets_media.php (.html) New widgets were added!

If you need any assistance with 1.2 version do not hesitate to contact me! :-)

1.1 Update February 19, 2014

CHANGES
- Added: Powerful and Flexible Layout (2 sidebars with many available options)
- Added: Layout JS Functions (for controlling sidebars)
- Added: Right Sidebar (added to layout options)
- Added: Fixed Footer (added to layout options)
- Added: No Sidebars (added to layout options)
- Added: Animated sidebar transitions in large screens (added to layout options)
- Added: Fully control default sidebars’ mode (partial or full) and default visibility (added to layout options)
- Added: Chat User Interface (in right sidebar with demo functionality)
- Added: Alerts Style (for right sidebar)
- Added: Horizontal Main Menu in Header (multi level menu, themed with all colors and fully responsive)
- Added: Top Loading Bar (themed with all colors)
- Added: Lock Screen Page
- Updated: Page Content Auto Adjust (now it always fills the empty space if there is not enough content)
- Updated: Register Page (you can now link directly to it)
- Updated: Bootstrap 3.1.1 (3.1.0)
- Updated: Favicons
- Fixed: FullCalendar Buttons (now work great with all color themes)
- Fixed: Chosen plugin (now works great with all color themes)

FILES ADDED
- img/placeholders/headers/lock_header.jpg
- page_ready_lock_screen.php (.html)
- page_ui_horizontal_menu.php (.html)
- page_layout_*.php (.html) 13 new layout files were added to demostrate various layouts!

FILES UPDATED
- css/themes/* All files updated in this folder
- css/bootstrap.min.css Updated to 3.1.1
- css/plugins.css Nprogress plugin styles added
- css/main.css Many changes and additions for the new layout, horizontal menu and various other changes
- img/icon*.png All favicons were updated
- inc/config.php New options were added and main menu updated! Main menu updated in all .html pages (HTML version)
- inc/page_head.php Page Container new classes/comments, Header content and sidebars’ toggle buttons were updated! Also the right sidebar was added! These changes applied to all .html files (HTML version)!
- js/pages/login.js You can now go directly to register form by appending #register to the login file (eg: login.html#register)
- js/pages/uiProgress.js Added top loading bar functionality
- js/vendor/bootstrap.min.js Updated to 3.1.1
- js/plugins.js Added Nprogress plugin
- js/app.js Many fixes and updates to support the new layout features and chat demo functionality
- page_ui_progress_loading.php (.html)
- page_ui_navigation_more.php (.html)

If you need any assistance with 1.1 version do not hesitate to contact me! :-)

1.0 Release February 5, 2014

Versions

ProUI comes in 2 different versions! This way you can use the version that fits you best! Let's have a look.

PHP Version

This is the main version of ProUI. PHP is used for the following features:

Templating
Common code used only once and included in each page (files in /inc folder)
Main Navigation Auto Creation
In the /inc/config.php file you can alter the $primary_nav[] array accordingly and the main navigation will be auto created for you on the fly
Variables
In the /inc/config.php file you can also set some variables that are used to change the available template features such as active theme color, header color, fixed header & sidebar and even more
Demo tasks
Some code used for demonstration purposes, eg creating table rows with dummy content

HTML Version

Since 3.1 update, the 'http:' part has been removed when including jQuery, Gmaps API and Google Web fonts. This change was made, so that the correct version to be auto loaded based on your server configuration (using SSL or not). If you would like to preview the HTML version, it is better to load it through a local/online web server and not directly from the file system (in such case, the previous resources won't be loaded).

This version has all the features as the previous one, except from the PHP features mentioned above, since all PHP code was removed. You can use this version if you plan on using other server-side scripting language (eg ASP or Ruby) for your project.

Bootstrap Framework

Bootstrap is one of the most popular front-end frameworks at the moment and is full of features. It is easy to use and it offers a large variety of CSS as well as Javascript components.

ProUI was built on top of this framework and it extends it to a large degree featuring modern design, widgets, many ready to use pages as well as integration of many popular jQuery plugins such as FullCalendar, Datatables and Flot Charts. It has its own unique, modern and fresh style and supports all of the features the Bootstrap framework has to offer.

If you are unfamiliar with the framework, its official website will help you out a lot but if you just want to start quickly, you can easily replicate any feature or component I already present in ProUI. What is vital to know, is that the two files the framework consists of (required for ProUI), are the following.

/css/bootstrap.min.css (unaltered, original framework)
/js/vendor/bootstrap.min.js (unaltered, original framework)

The above files include all the features the framework has, except for the default Glyphicons set. Those were not included because Glyphicons PRO ($59) and Font Awesome were used (superior, font-based icon solutions).

HTML Structure

ProUI layout is clean and simple but at the same time powerful and flexible. To get started quicky, you can use the blank page (page_ready_blank.php), created for this reason.

There are many available options you can set, such as header/sidebar position (fixed or static), footer position (fixed or static), partial hoverable sidebars and even more. If you are using the PHP version, you don't have to alter the classes directly since you can just set these options from the /inc/config.php file.

<!-- Body -->
<!-- In the PHP version you can set the following options from inc/config file -->
<body>
    <!-- Page Wrapper -->
    <!--
    Available classes:

    'page-loading'      enables page preloader
    -->
    <div id="page-wrapper">
        <!-- Page Container -->
        <!-- In the PHP version you can set the following options from inc/config file -->
        <!--
        Available #page-container classes:

        '' (None)                                       for a full main and alternative sidebar hidden by default (> 991px)

        'sidebar-visible-lg'                            for a full main sidebar visible by default (> 991px)
        'sidebar-partial'                               for a partial main sidebar which opens on mouse hover, hidden by default (> 991px)
        'sidebar-partial sidebar-visible-lg'            for a partial main sidebar which opens on mouse hover, visible by default (> 991px)
        'sidebar-mini sidebar-visible-lg-mini'          for a mini main sidebar with a flyout menu, enabled by default (> 991px + Best with static layout)
        'sidebar-mini sidebar-visible-lg'               for a mini main sidebar with a flyout menu, disabled by default (> 991px + Best with static layout)

        'sidebar-alt-visible-lg'                        for a full alternative sidebar visible by default (> 991px)
        'sidebar-alt-partial'                           for a partial alternative sidebar which opens on mouse hover, hidden by default (> 991px)
        'sidebar-alt-partial sidebar-alt-visible-lg'    for a partial alternative sidebar which opens on mouse hover, visible by default (> 991px)

        'sidebar-partial sidebar-alt-partial'           for both sidebars partial which open on mouse hover, hidden by default (> 991px)

        'sidebar-no-animations'                         add this as extra for disabling sidebar animations on large screens (> 991px) - Better performance with heavy pages!

        'style-alt'                                     for an alternative main style (without it: the default style)
        'footer-fixed'                                  for a fixed footer (without it: a static footer)

        'disable-menu-autoscroll'                       add this to disable the main menu auto scrolling when opening a submenu

        'header-fixed-top'                              has to be added only if the class 'navbar-fixed-top' was added on header.navbar
        'header-fixed-bottom'                           has to be added only if the class 'navbar-fixed-bottom' was added on header.navbar

        'enable-cookies'                                enables cookies for remembering active color theme when changed from the sidebar links
        -->
        <div id="page-container" class="sidebar-partial sidebar-visible-lg sidebar-no-animations">
            <!-- Alternative Sidebar -->
            <div id="sidebar-alt">
                Alternative Sidebar Content
            </div>
            <!-- END Alternative Sidebar -->

            <!-- Main Sidebar -->
            <div id="sidebar">
                Main Sidebar Content
            </div>
            <!-- END Main Sidebar -->

            <!-- Main Container -->
            <div id="main-container">
                <!-- Header -->
                <!-- In the PHP version you can set the following options from inc/config file -->
                <!--
                Available header.navbar classes:

                'navbar-default'            for the default light header
                'navbar-inverse'            for an alternative dark header

                'navbar-fixed-top'          for a top fixed header (fixed sidebars with scroll will be auto initialized, functionality can be found in js/app.js - handleSidebar())
                    'header-fixed-top'      has to be added on #page-container only if the class 'navbar-fixed-top' was added

                'navbar-fixed-bottom'       for a bottom fixed header (fixed sidebars with scroll will be auto initialized, functionality can be found in js/app.js - handleSidebar()))
                    'header-fixed-bottom'   has to be added on #page-container only if the class 'navbar-fixed-bottom' was added
                -->
                <header class="navbar navbar-default">
                    Header Content
                </header>
                <!-- END Header -->

                <!-- Page Content -->
                <div id="page-content">
                    Main Content
                </div>
                <!-- END Page Content -->

                <!-- Footer -->
                <footer>
                    Footer Content
                </footer>
                <!-- END Footer -->
            </div>
            <!-- END Main Container -->
        </div>
        <!-- END Page Container -->
    </div>
    <!-- END Page Wrapper -->
</body>
<!-- END Body -->

CSS Files and Structure

If you are planning on using CSS, then you can freely remove /less folder from your project without further changes. If you would like to use LessCSS, then please skip this section and have a look at the next one!

Below, you can see the CSS files along with their description.

/css/fonts/
Folder that contains the fonts used in /css/plugins.css by Glyphicons PRO and Font Awesome
/css/themes/
Folder that contains all the available themes. Just include the one of your choice after the main.css and before the themes.css. To create your own, simply copy-paste one of the existing, give it a new name and alter the colors to match your preference. If you would like the new color to be available for individual elements, add your new color theme to the themes.css file, the same way I did (check the file). If you are using the PHP version remember that you can set an active theme from the /inc/config.php file.
- amethyst.css
- autumn.css
- blackberry.css
- coral.css
- emerald.css
- fancy.css
- fire.css
- flatie.css
- forest.css
- lake.css
- modern.css
- night.css
- spring.css
- waterlily.css
/css/bootstrap.min.css
The Bootstrap framework in its original form, unaltered.
/css/plugins.css
Styles used for the following plugins. Their original style is altered to match with ProUI design.
- Font Awesome
- Glyphicons PRO
- FullCalendar
- Dropzone.js
- Chosen
- Datepicker for Bootstrap
- Bootstrap Colorpicker
- PRISM.js
- Magnific Popup CSS
- Datatables
- Easy Pie Chart
- CSS3 ANIMATION CHEAT SHEET
- Bootstrap Timepicker
- jQuery Tags Input
- Slider for Bootstrap
- Nprogress
/css/main.css
This is the main stylesheet of ProUI. The styles for the layout, ProUI elements, as well as the overwrite and extension of Bootstrap styles can be found here. Below, the sections of the file are presented.
- MAIN LAYOUT
- HEADER
- SIDEBARS/NAVIGATION
- MAIN CONTENT
- PAGES
- BOOTSTRAP OVERWRITE/EXTEND STYLES
- HELPERS
- THEMES
- RESPONSIVE
- RETINA
- PRINT
/css/themes.css
This is the themes stylesheet. You must include it last, after all other stylesheets. The classes included in this file can be used to alter the color, the background color or the border color of an element individually. It contains main colors of all the available themes.

In the main stylesheet I have commented the code the following way, so that you can navigate and find the section you want easily. I also added some shortcodes for each section at the beginning, so that you can search them in the file and find them fast.

/*
=================================================================
(#shortcode) SECTION
=================================================================
*/

/* Sub section 1 */
selector {
}

/* Sub section 2 */
selector {
}

/*
=================================================================
(#shortcode) SECTION
=================================================================
*/

/* Sub section 1 */
selector {
}

/* Sub section 2 */
selector {
}

If you would like to edit a specific section of ProUI, simply find the appropriate label in /css/plugins.css or /css/main.css files and change it to your own needs. Even better, I would suggest creating and including in the template a new CSS file named custom.css and apply your style overwrites there. This way, it will be easier for you to update the template's files when I release an updated version.

CSS Classes Reference

Here you can find a quick reference to many useful CSS classes available in ProUI. For more details, you can have a look at the official Bootstrap CSS guide at http://getbootstrap.com/css/

CLASS	DESCRIPTION
LAYOUT
	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
`.visible-xs`
`.visible-sm`
`.visible-md`
`.visible-lg`
`.hidden-xs`
`.hidden-sm`
`.hidden-md`
`.hidden-lg`
`.pull-left`	Floats the element left
`.pull-right`	Floats the element right
`.clearfix`	Clears all floats in the element
`.content-float`	Puts margin (right or left + bottom) in floated child elements (with `.pull-left` or `.pull-right` classes). Useful for paragraphs with floated images.
`.center-block`	Centers a block element with a specific width inside its container.
Text
`.text-*`	Aligns the text (available options: `left` `center` `right` `justify`)
`.h1`	Adjusts text to match with `<h1>` tag
`.h2`	Adjusts text to match with `<h2>` tag
`.h3`	Adjusts text to match with `<h3>` tag
`.h4`	Adjusts text to match with `<h4>` tag
`.h5`	Adjusts text to match with `<h5>` tag
`.h6`	Adjusts text to match with `<h6>` tag
Color Themes Replace `*` with: `default` `amethyst` `autumn` `blackberry` `coral` `emerald` `fancy` `fire` `flatie` `forest` `lake` `modern` `night` `spring` `waterlily`
`.themed-color`	Sets the text color to the main color of the active theme
`.themed-color-dark`	Sets the text color to the main dark color of the active theme
`.themed-color-*`	Sets the text color to the main color of a specific theme
`.themed-color-dark-*`	Sets the text color to the main dark color of a specific theme
`.themed-border`	Sets the border color to the main color of the active theme
`.themed-border-dark`	Sets the border color to the main dark color of the active theme
`.themed-border-*`	Sets the border color to the main color of a specific theme
`.themed-border-dark-*`	Sets the border color to the main dark color of a specific theme
`.themed-background`	Sets the background color to the main color of the active theme
`.themed-background-dark`	Sets the background color to the main dark color of the active theme
`.themed-background-*`	Sets the background color to the main color of a specific theme
`.themed-background-dark-*`	Sets the background color to the main dark color of a specific theme
Contextual Colors
`.text-primary`	Sets the text color to the main color of the active theme. Can be used on `<a>` elements.
`.text-warning`	Sets the text color to an orange one. Can be used on `<a>` elements.
`.text-danger`	Sets the text color to a red one. Can be used on `<a>` elements.
`.text-info`	Sets the text color to a blue one. Can be used on `<a>` elements.
`.text-success`	Sets the text color to a green one. Can be used on `<a>` elements.
`.text-muted`	Sets the text color to a grey one. Can be used on `<a>` elements.
`.text-light`	Sets the text color to white. Can be used on `<a>` elements.
Helpers
`.push`	Pushes the element by adding a bottom margin (15px).
`.push-bit`	Pushes the element by adding a bottom margin (10px).
`.remove-margin`	Removes the margin from an element.
`.remove-padding`	Removes the padding from an element.
`.visible-lt-ie10`	Makes the element visible only in IE9.
`.hidden-lt-ie10`	Hides the element in IE9.

LESS Files and Structure

If you are planning on using LessCSS, then you can freely remove /css folder from your project but you will also have to replace the following HTML markup - found in the <head> tag (PHP version: in template_start.php - HTML version: in .html files)..

<!-- Stylesheets -->
<!-- Bootstrap is included in its original form, unaltered -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Related styles of various icon packs and plugins -->
<link rel="stylesheet" href="css/plugins.css">

<!-- The main stylesheet of this template. All Bootstrap overwrites are defined in here -->
<link rel="stylesheet" href="css/main.css">

<!-- Include a specific file here from css/themes/ folder to alter the default theme of the template -->

<!-- The themes stylesheet of this template (for using specific theme color in individual elements - must included last) -->
<link rel="stylesheet" href="css/themes.css">
<!-- END Stylesheets -->

..with this one:

<!-- LessCSS -->
<!-- All styles imported in styles.less -->
<link rel="stylesheet/less" href="less/styles.less">

<!-- LessCSS Parser - Great for development - Pre-compiled CSS recommended for production -->
<script src="less/js/less.min.js"></script>
<!-- END LessCSS -->

Reminder

Have in mind that in case you decide to use LessCSS, the JS parser won't work on IE8. Also, you will have to change the active color theme from /less/styles.less file. Changing it from PHP variables (in PHP version) or from the color preview buttons (in sidebar, under user info) won't work!

Usage

It is highly recommended to use LessCSS only for development. When it is ready for production, a minified CSS should be exported and included for best performance. If you would like to learn more about using Less, you could check out its official page at http://lesscss.org/usage/

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. Less support was added in ProUI mainly for providing useful variables, so it's easier to update main aspects of the template, and also for providing a more modular approach.

Below, you can see the files along with their description in the /less folder:

/less/js/
Folder that contains Less to CSS JS parser. It was added here for consistency. This way, if someone isn't interested in LessCSS, he would have to only remove the /less folder.
/less/fonts/
Folder that contains the fonts used in /less/plugins/font_awesome.less and /less/plugins/glyphicons.less by Font Awesome and Glyphicons PRO.
/less/plugins/
Folder that contains styles of various plugins. Their original style is altered to match with ProUI design.
/less/main/
Folder that contains all main styles of the template.
/less/themes/
Folder that contains all the available color themes. Each file contains predefined variables with the colors of each theme. A file can be imported in /less/styles.less to change the active color theme by overwriting the default variables which are set in /less/variables.less.
/less/bootstrap.less
Folder that contains the Bootstrap framework (Compiled CSS version).
/less/variables.less
This is the variables file. From here you can set various variables to easily change the colors or other template options.
/less/themes.less
This is the themes file. It contains classes that can be used to alter the color, the background color or the border color of an element individually. It contains main colors of all the available themes.
/less/styles.less
This is the only Less file that needs to be included in the template since it imports all required files. Here you can import a separate color theme file from /less/themes/ folder, to overwrite the default color variables and change the active color theme.

Javascript

Below, you can see the Javascript files along with their description.

/js/helpers/ckeditor/*
Required for using the CKEditor on a textarea. This folder contains all plugin's related files. You just have to include the ckeditor.js file in the page you would like to use it. You can check the form components page where I've icluded an example
/js/helpers/excanvas.min.js
Required for the Flot and Easy Pie Charts to work correctly in IE8 (loaded only in IE8 - include it in the pages you use charts)
/js/helpers/gmaps.min.js
Required for Google Maps functionality, must be included along with the Google Maps API to use the maps
/js/vendor/bootstrap.min.js
Javasript components of Bootstrap framework
/js/vendor/jquery-1.11.2.min.js
The popular Javascript library that greatly reduces the amount of code you must write. This is the local file and is only included in case the version from google apis cannot be loaded for some reason (eg working local without a network connection available)
/js/vendor/modernizr-respond.min.js
Modernizr, a browser feature detection library and
Respond.js, enabling responsive CSS code on browsers that do not natively support it (IE8)
/js/plugins.js
All Javascript plugins minimized and included in a single file. If you are not planning on using most of the plugins throughout your app, it is recommended to remove the plugins that you don't need (if you do, make sure you also remove plugin related code from js/app.js and css/plugins.css or code in a page that is used). Furthermore, if for example you only going to use a plugin in one page, it's better to remove it, put it in a seperate file and include only in the page you need it. This way you won't load a plugin you won't use in most pages.
/js/app.js
Initialization of various plugins as well as Javascript code used in ProUI features such as main navigation and sidebar functionality
/js/pages/*
Here you will find all the Javascript files used in various pages throughout the template. They contain code used only in specific pages. This way the JS code is completely separated from the HTML Markup.

There are a lot of examples in ProUI but you can check out their websites where you could find more examples. At last, all Javascript files are included at the bottom of the page (/inc/template_scripts.php for the PHP version), except from the /js/vendor/modernizr-respond.min.js which needs to be loaded in the <head> tag (/inc/template_start.php for the PHP version).

Various Plugins

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

Version

1.10.4

Javascript

js/plugins.js

Plugin's javascript code as well as Bootstrap pagination integration code are included in this file.

js/app.js

Plugin's Bootstrap integration code is included in this file. It needs to be called before plugin's initialization. Please check usage below.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Images

img/jquery.datatables/*

This plugin uses the images included in this folder.

Usage

To initialize the plugin on a table with id example-datatable, you need the following JS code:

$(function(){
    /* Initialize Bootstrap Datatables Integration */
    App.datatables();

    /* Initialize Datatables */
    $('#example-datatable').dataTable();

    /* Add placeholder attribute to the search input */
    $('.dataTables_filter input').attr('placeholder', 'Search');
});

Documentation

For advanced usage & examples, you can have a look at http://datatables.net/

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

Version

2.2.6

Javascript

js/plugins.js

Plugin's javascript code is included in this file. Also some jQuery UI components are included (jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.resizable.js) along with MomentJS plugin for supporting plugin's advanced features.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

To initialize the plugin on a div with id calendar (with example events), you need the following JS code:

$(function(){
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });
});

Documentation

For advanced usage & examples, you can have a look at http://arshaw.com/fullcalendar/

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.

Version

Not available

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

To enable the plugin, just use the following markup (always make sure you encoded the HTML entities inside the code tags):

HTML

<pre class="line-numbers"><code class="language-markup">
HTML code..
</code></pre>

CSS

<pre class="line-numbers"><code class="language-css">
CSS code..
</code></pre>

Javascript

<pre class="line-numbers"><code class="language-javascript">
Javascript code..
</code></pre>

PHP

<pre class="line-numbers"><code class="language-php">
PHP code..
</code></pre>

Online

For more info, you can have a look at http://prismjs.com/

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

Version

1.0.0

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize single image lightbox
$('[data-toggle="lightbox-image"]').magnificPopup({type: 'image', image: {titleSrc: 'title'}});

// Initialize image gallery lightbox
$('[data-toggle="lightbox-gallery"]').magnificPopup({
    delegate: 'a.gallery-link',
    type: 'image',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        arrowMarkup: '<button type="button" class="mfp-arrow mfp-arrow-%dir%" title="%title%"></button>',
        tPrev: 'Previous',
        tNext: 'Next',
        tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
    },
    image: {titleSrc: 'title'}
});

You can enable the lightbox on a single image by using the following markup:

<a href="url/to/small/img/" data-toggle="lightbox-image">
    <img src="url/to/large/img/" alt="image">
</a>

You can enable the gallery lightbox on multiple images by using the following markup:

<div class="gallery" data-toggle="lightbox-gallery">
    <a href="url/to/small/img/" class="gallery-link" title="Image Info">
        <img src="url/to/large/img/" alt="image">
    </a>
    <a href="url/to/small/img/" class="gallery-link" title="Image Info">
        <img src="url/to/large/img/" alt="image">
    </a>
</div>

Documentation

For advanced usage & examples, you can have a look at http://dimsemenov.com/plugins/magnific-popup/

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Version

0.8.3

Javascript

js/plugins.js

Plugin's javascript code is included in this file. The included flot plugins are: pie, resize, stack & time.

Usage

It has to be initialized directly in the page where you would like to create your charts. You can see usage examples in js/pages/compCharts.js

If you are planning on supporting IE8, don't forget to include the replacement for canvas (the same way I did where I used charts):

<!-- Remember to include excanvas for IE8 chart support -->
<!--[if IE 8]><script src="js/helpers/excanvas.min.js"></script><![endif]-->

Documentation

For advanced usage & examples, you can have a look at http://www.flotcharts.org/

Easy Pie Chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices.

Version

1.2.5

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Easy Pie Chart
$('.pie-chart').easyPieChart({
    barColor: $(this).data('bar-color') ? $(this).data('bar-color') : '#777777',
    trackColor: $(this).data('track-color') ? $(this).data('track-color') : '#eeeeee',
    lineWidth: $(this).data('line-width') ? $(this).data('line-width') : 3,
    size: $(this).data('size') ? $(this).data('size') : '80',
    animate: 800,
    scaleColor: false
});

You can create a pie chart by using the following markup:

<div class="pie-chart" data-percent="30" data-size="130">
    <span>30%</span>
</div>

If you are planning on supporting IE8, don't forget to include the replacement for canvas (the same way I did where I used charts):

<!-- Remember to include excanvas for IE8 chart support -->
<!--[if IE 8]><script src="js/helpers/excanvas.min.js"></script><![endif]-->

Documentation

For advanced usage & examples, you can have a look at http://rendro.github.io/easy-pie-chart/

Sparkline generates small inline charts directly in the browser using data supplied either inline in the HTML, or via javascript.

Version

2.1.2

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

It has to be initialized directly in the page where you would like to create your charts. You can see usage examples in js/pages/compCharts.js

If you are planning on supporting IE8, don't forget to include the replacement for canvas (the same way I did where I used charts):

<!-- Remember to include excanvas for IE8 chart support -->
<!--[if IE 8]><script src="js/helpers/excanvas.min.js"></script><![endif]-->

Documentation

For advanced usage & examples, you can have a look at http://omnipotent.net/jquery.sparkline/

Gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

Version

0.4.16

Javascript

js/helpers/gmaps.min.js

Plugin's javascript code is included in this file.

Usage

Before using this plugin, you will have to include Google Maps API and the plugin itself in your page:

<!-- Google Maps API + Gmaps Plugin, must be loaded in the page you would like to use maps -->
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/helpers/gmaps.min.js"></script>

Then you can use it to create your maps. You can see usage examples in js/pages/compMaps.js

Documentation

For advanced usage & examples, you can have a look at http://hpneo.github.io/gmaps/

Nprogress allows you to easily create top loading bars.

Version

0.1.6

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

It has to be initialized directly in a page and it is great for ajax calls. You can see usage examples in js/pages/uiProgress.js

If you would like to use it for all your pages (to show until the page loads) you can add the following line at the beginning of js/app.js:

NProgress.start();

..and the following lines at the end of js/app.js:

$(window).load(function(){ NProgress.done(); });
$(window).unload(function(){ NProgress.start(); });

It will appear after all previous code is loaded and will finish after the page has completely loaded.

Documentation

For advanced usage & examples, you can have a look at http://ricostacruz.com/nprogress/

slimScroll transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

Version

1.3.3

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

To initialize the plugin on a div with id example-scroll, you need the following JS code:

$(function(){
    $('#example-scroll').slimScroll({
        height: '300px'
    });
});

Documentation

For advanced usage & examples, you can have a look at http://rocha.la/jQuery-slimScroll

Bootstrap-growl is a simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.

Version

1.1.0

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

It has to be initialized directly in a page. You can see a usage example in js/pages/uiProgress.js

In general, the code along with all the available options for creating a notification, is the following:

$.bootstrapGrowl("Your message!", {
    ele: 'body', // which element to append to
    type: 'success', // ('success', 'info', 'warning', 'danger')
    offset: {from: 'top', amount: 20}, // 'top', or 'bottom'
    align: 'right', // ('left', 'right', or 'center')
    width: 250, // (integer, or 'auto')
    delay: 4000, // in ms
    allow_dismiss: true,
    stackup_spacing: 10 // spacing between consecutively stacked growls
});

Documentation

For advanced usage & examples, you can have a look at http://ifightcrime.github.io/bootstrap-growl/

Countdown.js is a simple and html agnostic date countdown plugin for jQuery

Version

2.0.4

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

To initialize the plugin on a div with class js-countdown, you need the following JS code:

$('.js-countdown').countdown('2016/12/01', function(event) {
                $(this).html(event.strftime('<div class="row">'
                        + '<div class="col-xs-6 col-sm-3 countdown-con"><div class="countdown-num">%-D</div><div class="countdown-info">DAYS</div></div>'
                        + '<div class="col-xs-6 col-sm-3 countdown-con"><div class="countdown-num">%H</div><div class="countdown-info">HOURS</div></div>'
                        + '<div class="col-xs-6 col-sm-3 countdown-con"><div class="countdown-num">%M</div><div class="countdown-info">MINUTES</div></div>'
                        + '<div class="col-xs-6 col-sm-3 countdown-con"><div class="countdown-num">%S</div><div class="countdown-info">SECONDS</div></div>'
                        + '</div>'
                ));
            });

Documentation

For advanced usage & examples, you can have a look at https://github.com/hilios/jQuery.countdown

Bootstrap plugins offer extra functionality such as modals, alerts, tooltips & popovers. All plugins can be used directly in the template.

Version

3.3.2

Javascript

js/vendor/bootstrap.min.js

Bootstrap plugins’ javascript code is included in this file.

Documentation

For usage examples of all Bootstrap plugins, you can have a look at http://getbootstrap.com/javascript/

Form Plugins

DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.

Version

3.12.0

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

To initialize the plugin on a form, you just have to add the class dropzone:

<form action="url/to/upload/script" class="dropzone"></form>

It will submit the dropped file the same way the default file upload form would.

Documentation

For advanced usage & examples, you can have a look at http://www.dropzonejs.com/

Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.

Version

1.3.0

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Images

img/jquery.chosen/*

This plugin uses the images included in this folder.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Chosen
$('.select-chosen').chosen({width: "100%"});

You can enable it on a select element, just by adding the class select-chosen:

<select class="select-chosen" style="width: 250px;">
    <option value="">Choose a Country...</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    ...
    <option value="Yemen">Yemen</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
</select>

Documentation

For advanced usage & examples, you can have a look at http://harvesthq.github.io/chosen/

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Version

3.5.2

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Images

img/jquery.select2/*

This plugin uses the images included in this folder.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Select2
$('.select-select2').select2();

You can enable it on a select element, just by adding the class select-select2:

<select class="select-select2" style="width: 100%;">
    <option value="">Choose a Country...</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    ...
    <option value="Yemen">Yemen</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
</select>

Documentation

For advanced usage & examples, you can have a look at http://ivaynberg.github.io/select2

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages.

Version

4.4.6

Javascript

js/helpers/ckeditor/

All plugin's required files are included in this folder.

Usage

You have to include the file js/helpers/ckeditor/ckeditor.js to your page:

<script src="js/helpers/ckeditor/ckeditor.js"></script>

You can enable it on a textarea, just by adding the class ckeditor:

<textarea class="ckeditor"></textarea>

Online

For more info, you can have a look at http://ckeditor.com/

Bootstrap Colorpicker is plugin for adding a color picker to an input.

Version

2.0

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Images

img/jquery.colorpicker/*

This plugin uses the images included in this folder.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Bootstrap Colorpicker
$('.input-colorpicker').colorpicker({format: 'hex'});
$('.input-colorpicker-rgba').colorpicker({format: 'rgba'});

You can enable it on an input element, just by adding a class input-colorpicker or input-colorpicker-rga:

<input type="text" id="example-colorpicker" name="example-colorpicker" class="form-control input-colorpicker">

Documentation

For advanced usage & examples, you can have a look at http://mjolnic.github.io/bootstrap-colorpicker/

Bootstrap Typeahead is a plugin for simple autocomplete use cases.

Version

Not available

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Typeahead - Example with countries
var exampleTypeheadData = ["Afghanistan","Albania","Algeria","...","Zambia","Zimbabwe"];
$('.input-typeahead').typeahead({ source: exampleTypeheadData });

You can enable it on an input element, just by adding the class input-typeahead:

<input type="text" id="example-typeahead" name="example-typeahead" class="form-control input-typeahead" autocomplete="off" placeholder="Search Countries..">

Documentation

For advanced usage & examples, you can have a look at https://github.com/bassjobsen/Bootstrap-3-Typeahead

Bootstrap Datepicker is a simple datepicker component for Twitter Bootstrap.

Version

1.3.0

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Datepicker
$('.input-datepicker, .input-daterange')
    .datepicker({weekStart: 1});
$('.input-datepicker-close')
    .datepicker({weekStart: 1})
    .on('changeDate', function(e){ $(this).datepicker('hide'); });

You can enable a simple datepicker on a text input, just by adding the class input-datepicker:

<input type="text" class="form-control input-datepicker" data-date-format="mm/dd/yy">

You can enable a simple datepicker which closes on date selection, just by adding the class input-datepicker-close:

<input type="text" class="form-control input-datepicker-close" data-date-format="mm/dd/yy">

You can enable a date range picker, just by using the following markup:

<div class="input-group input-daterange" data-date-format="mm/dd/yyyy">
    <input type="text" class="form-control text-center" placeholder="From">
    <span class="input-group-addon"><i class="fa fa-angle-right"></i></span>
    <input type="text" class="form-control text-center" placeholder="To">
</div>

Documentation

For advanced usage & examples, you can have a look at http://bootstrap-datepicker.readthedocs.org/en/1.3.0/

Bootstrap Timepicker is a simple timepicker component for Twitter Bootstrap.

Version

0.2.5

Small custom improvements were made for BS3 support.

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Timepicker
$('.input-timepicker')
    .timepicker({minuteStep: 1,showSeconds: true,showMeridian: true});
$('.input-timepicker24')
    .timepicker({minuteStep: 1,showSeconds: true,showMeridian: false});

You can enable it on a text input, just by adding the class input-timepicker:

<input type="text" class="form-control input-timepicker">

You can enable it 24-hour format timepicker, just by adding the class input-timepicker24:

<input type="text" class="form-control input-timepicker24">

Documentation

For advanced usage & examples, you can have a look at http://jdewit.github.io/bootstrap-timepicker/

Slider for Bootstrap is a simple component for adding sliders to your forms.

Version

3.0.0

Small custom improvements were made for vertical slider + arrow support.

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Slider for Bootstrap
$('.input-slider').slider();

You can enable it on a text input, just by using the following markup (you can adjust the attributes to your own preferences):

<input type="text" class="form-control input-slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="20" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show">

For more slider examples, you can check out the forms components page.

Documentation

For advanced usage & examples, you can have a look at https://github.com/seiyria/bootstrap-slider

jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.

Version

1.11.1

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

It has to be initialized directly in the page where your form is. You can see usage examples at js/pages/formsValidation.js

Documentation

For advanced usage & examples, you can have a look at http://jqueryvalidation.org

Form Wizard can be used to create wizard like page flows for forms without having to reload the page in between wizard steps.

Version

3.0.7

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

It has to be initialized directly in the page where your form is. You can see usage examples at js/pages/formsWizard.js

Documentation

For advanced usage & examples, you can have a look at http://www.thecodemine.org

Masked Input allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates, phone numbers, etc).

Version

1.4.0

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

It has to be initialized directly in the page where your form is. You can see usage examples in js/pages/formsValidation.js

Online

For more info, you can have a look at http://digitalbush.com/projects/masked-input-plugin

jQuery Tags Input Plugin will turn your tag list into an input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags!

Version

1.3.3

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

CSS

css/plugins.css

This plugin uses CSS styles which are included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Tags Input
$('.input-tags').tagsInput({ width: 'auto', height: 'auto'});

You can enable it on a text input, just by using the class input-tags

<input type="text" class="input-tags">

Online

For more info, you can have a look at http://xoxco.com/clickable/jquery-tags-input

Helper Plugins

HTML5 Placeholder jQuery Plugin enables the input placeholder feature on older browsers (eg IE8-9).

Version

2.1.0

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

This plugin has already been initialized in js/app.js : uiInit() with the following code:

// Initialize Placeholder
$('input, textarea').placeholder();

It will run automatically if the browser does not support the placeholder attribute.

Online

For more info, you can have a look at http://mths.be/placeholder

Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

Version

1.1.0

Small custom improvements were made.

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

This plugin is auto initialized and replaces images automatically if a retina screen is used. You just have to provide additional - double the pixels - images (and appending '@2x' to their name) along with your original images.

Online

For more info, you can have a look at http://retinajs.com/

jQuery Cookie is a simple, lightweight jQuery plugin for reading, writing and deleting cookies.

Version

1.4.1

Javascript

js/plugins.js

Plugin's javascript code is included in this file.

Usage

// Create Cookie
$.cookie('name', 'value');

// Read Cookie
$.cookie('name');

Online

For more info, you can have a look at https://github.com/carhartl/jquery-cookie

Quick Tips

Mobile First
The default CSS styles work great in mobiles. The responsive CSS code alter the styles in larger resolutions.
Border-Box
The Bootstrap framework make use of the border-box CSS model. That means that if you want to alter the width of an element with CSS, you can do it without worrying about the padding or the border size of that element (they will be adjusted to the width you will set).
IE8
ProUI plays nice with IE8. Almost everything will work correctly and the design won't break! If you are planning on supporting it, have in mind that you won't be able to use gmaps geolocation & street view. Also the Syntax Highlighting won't work but the code will be displayed just fine. I worked hard to make sure that the design will degrade gracefully and will still be enjoyable by IE8 users.
User Avatars
All avatars used in the online demo are not available for commercial use, so I couldn't include them in the final package (they can only be used for demostration). If you would like them for mockup purposes, you can either replace the images in img/placeholders/avatars/ folder with avatars from uifaces.com or you can contact me to send you the ones I've used in the online demo (also from uifaces.com). Have in mind that they can only be used for demo purposes (mockup or online).
User Names
All user names used in the template are fictional and only used for demostration. They were randomly generated at uinames.com, so if you are in need of random names for your mockups it is a great choice.

Retina

ProUI is retina ready! This means that it looks crystal clear on retina displays found on high-end mobile or other devices. If such display is available, the high resolution images will be served. If you add extra images and you want to have a retina ready interface, just add along with the original images (in the same folder), the same images with double pixels and append the text @2x to their original name. They will automatically be served if necessary! Just have a look at /img/placeholders/photos folder for examples. You only have to use the default image in your project. The high res image (@2x) will be served automatically if needed.

Frontend Template

Since 2.0 update, a fully responsive frontend template is included in ProUI package and comes in both, PHP & HTML versions. It follows backend's file structure and features its own simple HTML structure. It should be relative simple and straightforward to be used. If not, please let me know how I can assist. Also, LessCSS support was added in 2.1 update and to use it, you just have to follow the same instructions as with the backend.

<!-- Body -->
<body>
    <!-- Page Container -->
    <!-- 'boxed' class for a boxed layout -->
    <div id="page-container">
        <!-- Header -->
        <header>
            Header Content
        </header>
        <!-- END Header -->

        <!-- Sections -->
        <section class="site-section site-section-light site-section-top themed-background-default">
            Section Content Top
        </section>

        <section class="site-content site-section">
            Section Content 1
        </section>

        <section class="site-content site-section">
            Section Content 2
        </section>

        ...
        <!-- END Sections -->

        <!-- Footer -->
        <footer class="site-footer site-section site-section-light">
            Footer Content
        </footer>
        <!-- END Footer -->
    </div>
    <!-- END Page Container -->
</body>
<!-- END Body -->

Source and Credits

I've used the following frameworks, fonts, icons, images and scripts as listed. My thanks goes to all the authors!

Frameworks
Bootstrap 3.3.2
CSS3 Animation Cheat Sheet

Fonts
Google Web Fonts (Open Sans)

Icons
Glyphicons 1.8.1 (PRO License acquired - for use with this template)
Font Awesome 4.3.0

Images
Picjumbo

Scripts
jQuery
jQuery UI
Modernizr
Respond.js
Flot Charts
Datatables
FullCalendar
Dropzone.js
Chosen
Slimscroll
Retina.js
Datepicker for Bootstrap
jQuery Validation
Prism.js
Magnific Popup
Easy Pie Charts
Bootstrap Timepicker
Form Wizard
jQuery Sparkline
HTML5 Placeholder jQuery Plugin
Masked Input plugin for jQuery
jQuery Tags Input
Boostrap Slider
CKEditor
Gmaps.js
1.1
Nprogress
1.3
Select2
Bootstrap-growl
LESS.js
2.1
MomentJS (used by FullCalendar plugin)
3.1
Countdown.js
jQuery Cookie
Bootstrap Colorpicker
Bootstrap Typeahead

Misc
Uifaces.com (avatars used on online demo for template demostration purposes only)
Uinames.com (randomly generated names used for template demostration purposes only)

Frontend Template Specific
CountTo
jQuery Appear
3.1
jQuery VideoBG
Videos
mazwai.com

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Have a nice day and happy coding!

pixelcave