Thank you for purchasing AppUI. 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
- Updated: jQuery 2.2.0 (2.1.4)
- Updated: Bootstrap 3.3.6 (3.3.5)
- Updated: FontAwesome 4.5.0 (4.4.0) - 20 new icons!
- Updated: Magnific Popup 1.0.1 (1.0.0)
- Updated: Gmaps.js 0.4.22 (0.4.21)
- Updated: HTML5 Placeholder jQuery Plugin 2.3.1 (2.1.3)
- Fixed: Small fixes and optimizations

FILES UPDATED
- css/fonts/fontawesome/* Updated to 4.5.0
- css/bootstrap.min.css Bootstrap 3.3.6
- css/plugins.css FontAwesome + Magnific Popup
- css/main.css Small fixes
- inc/template_scripts.php jQuery link updated + updated to all .html pages
- js/vendor/jquery-2.2.0.min.js Updated to 2.2.0
- js/vendor/bootstrap.min.js Updated to 3.3.6
- js/plugins/gmaps.min.js Updated to 0.4.22
- js/plugins.js Updated: HTML5 Placeholder jQuery Plugin 2.3.1, Magnific Popup 1.0.1
- contact.php (.html) ?sensor=true not required when including Gmaps API
- ui.php (.html) Modal Tabs markup

BACKEND

CHANGES
- Updated: jQuery 2.2.0 (2.1.4)
- Updated: Bootstrap 3.3.6 (3.3.5)
- Updated: FontAwesome 4.5.0 (4.4.0) - 20 new icons!
- Updated: Magnific Popup 1.0.1 (1.0.0)
- Updated: Gmaps.js 0.4.22 (0.4.21)
- Updated: HTML5 Placeholder jQuery Plugin 2.3.1 (2.1.3)
- Updated: FullCalendar 2.6.0 (2.4.0)
- Updated: MomentJS 2.11.0 (2.9.0)
- Updated: DataTables 1.10.10 (1.10.9)
- Updated: Bootstrap Datepicker 1.6.0 (1.4.1)
- Updated: Bootstrap Slider 6.0.17 (5.2.1)
- Updated: JS Cookie 2.1.0 (2.0.3)
- Updated: CKEditor 4.5.6 (4.5.4)
- Updated: SlimScroll 1.3.8 (1.3.3)
- Updated: DropzoneJS 4.2.0 (4.0.1)
- Updated: Select2 4.0.1 (4.0.0)
- Fixed: Small fixes and optimizations

FILES UPDATED
- css/fonts/fontawesome/* Updated to 4.5.0
- css/bootstrap.min.css Bootstrap 3.3.6
- css/plugins.css FontAwesome + Magnific Popup + FullCalendar + BS Datepicker
- css/main.css Small fixes
- inc/config.php Version updated + updated to all .html pages
- inc/template_scripts.php jQuery link updated + updated to all .html pages
- js/vendor/jquery-2.2.0.min.js Updated to 2.2.0
- js/vendor/bootstrap.min.js Updated to 3.3.6
- js/plugins/ckeditor Updated to 4.5.6
- js/plugins/gmaps.min.js Updated to 0.4.22
- js/plugins.js Updated: HTML5 Placeholder jQuery Plugin 2.1.3, Magnific Popup 1.0.1, FullCalendar 2.6.0, MomentJS 2.11.0, DataTables 1.10.10, Bootstrap Datepicker 1.6.0, Bootstrap Slider 6.0.17, JS Cookie 2.1.0, DropzoneJS 4.2.0, Select2 4.0.1, CKEditor 4.5.6
- page_app_social.php (.html) ?sensor=true not required when including Gmaps API
- page_comp_maps.php (.html) ?sensor=true not required when including Gmaps API
- page_ready_timeline.php (.html) ?sensor=true not required when including Gmaps API
- page_ui_icons_fontawesome.php (.html) 20 new icons added
- page_ui_navigation_more.php (.html) Modal Tabs markup
- page_app_estore.php (.html) Modal Tabs markup

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

FRONTEND

CHANGES
- Added: Get Started Version
- Updated: FontAwesome 4.4.0 (4.3.0) - 66 new icons!
- Updated: jQuery Validation 1.14.0 (1.13.1)
- Updated: CountTo 1.2.0 (1.0.0)
- Updated: Gmaps.js 0.4.21 (0.4.18)
- Updated: HTML5 Placeholder jQuery Plugin 2.1.3 (2.1.2)

FILES UPDATED
- css/fonts/fontawesome/* Updated to 4.4.0
- css/plugins.css FontAwesome 4.4.0
- js/plugins/gmaps.min.js Updated to 0.4.21
- js/plugins.js Updated: HTML5 Placeholder jQuery Plugin 2.1.3, CountTo 1.2.0, jQuery Validation 1.14.0

BACKEND

CHANGES
- Added: Get Started Version
- Added: eStore Page - Checkout Modal
- Updated: FontAwesome 4.4.0 (4.3.0) - 66 new icons!
- Updated: jQuery Validation 1.14.0 (1.13.1)
- Updated: CountTo 1.2.0 (1.0.0)
- Updated: Gmaps.js 0.4.21 (0.4.18)
- Updated: HTML5 Placeholder jQuery Plugin 2.1.3 (2.1.2)
- Updated: FullCalendar 2.4.0 (2.3.2)
- Updated: DataTables 1.10.9 (1.10.7)
- Updated: Bootstrap Datepicker 1.4.1 (1.4.0)
- Updated: Bootstrap Colorpicker 2.3.0 (2.2.0)
- Updated: Bootstrap Slider 5.2.1 (4.10.1)
- Updated: JS Cookie 2.0.3 (2.0.2)
- Updated: CKEditor 4.5.4 (4.4.7)

FILES UPDATED
- css/fonts/fontawesome/* Updated to 4.4.0
- css/plugins.css FontAwesome 4.4.0
- inc/config.php Version updated
- js/plugins/ckeditor Updated to 4.5.4
- js/plugins/gmaps.min.js Updated to 0.4.21
- js/plugins.js Updated: HTML5 Placeholder jQuery Plugin 2.1.3, CountTo 1.2.0, jQuery Validation 1.14.0, FullCalendar 2.4.0, DataTables 1.10.9, Bootstrap Datepicker 1.4.1, Bootstrap Colorpicker 2.3.0, Bootstrap Slider 5.2.1, JS Cookie 2.0.3
- page_ui_icons_fontawesome.php (.html) 66 new icons added
- page_app_estore.php (.html) Checkout modal

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

FRONTEND

CHANGES
- Updated: jQuery 2.1.4 (2.1.3)
- Updated: Bootstrap 3.3.5 (3.3.4)
- Updated: Gmaps.js 0.4.18 (0.4.17)
- Updated: HTML5 Placeholder jQuery Plugin 2.1.2 (2.1.1)
- Fixed: Small fixes and optimizations

FILES UPDATED
- css/bootstrap.min.css Updated to 3.3.5
- css/main.css Small fixes
- inc/template_scripts.php Updated jQuery links (updated in all .html files in HTML version)
- js/vendor/jquery-2.1.4.js Updated to 2.1.4
- js/vendor/bootstrap.min.js Updated to 3.3.5
- js/plugins/gmaps.min.js Updated to 0.4.18
- js/plugins.js Updated: HTML5 Placeholder jQuery Plugin 2.1.2

BACKEND

CHANGES
- Added: Tickets Page
- Added: Contacts Page
- Updated: jQuery 2.1.4 (2.1.3)
- Updated: Bootstrap 3.3.5 (3.3.4)
- Updated: FullCalendar 2.3.2 (2.3.1)
- Updated: DataTables 1.10.7 (1.10.5)
- Updated: Select2 4.0.0 (3.5.2)
- Updated: jQuery Tags Input Plugin 1.3.6 (1.3.3)
- Updated: Bootstrap Colorpicker 2.2.0 (2.1.0)
- Updated: Bootstrap Slider 4.10.1 (3.0.0)
- Updated: Gmaps.js 0.4.18 (0.4.17)
- Updated: JavaScript Cookie 2.0.2 (1.4.1)
- Updated: HTML5 Placeholder jQuery Plugin 2.1.2 (2.1.1)
- Fixed: Small fixes and optimizations

FILES ADDED
- js/pages/readyTickets.js
- page_ready_tickets.php (.html)
- page_ready_contacts.php (.html)

FILES REMOVED
- img/jquery.select2/*

FILES UPDATED
- css/themes/* Select2 fixes
- css/bootstrap.min.css Updated to 3.3.5
- css/plugins.css Bootstrap Slider + Select2
- css/main.css Small fixes
- inc/config.php Version + Menu updated (updated in all .html files in HTML version)
- inc/template_scripts.php Updated jQuery links (updated in all .html files in HTML version)
- js/plugins/gmaps.min.js Updated to 0.4.18
- js/vendor/jquery-2.1.4.js Updated to 2.1.4
- js/vendor/bootstrap.min.js Updated to 3.3.5
- js/app.js Small fixes
- js/plugins.js Updated: Full Calendar 2.3.2, Select2 4.0.0, Datatables 1.10.7, Bootstrap Colorpicker 2.2.0, HTML5 Placeholder jQuery Plugin 2.1.2, jQuery Tags Input Plugin 1.3.6, JavaScript Cookie 2.0.2, Bootstrap Slider 4.10.1

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

FRONTEND

CHANGES
- Updated: Bootstrap 3.3.4 (3.3.2)
- Updated: Gmaps.js 0.4.17 (0.4.16)
- Updated: HTML5 Placeholder jQuery Plugin 2.1.1 (2.1.0)
- Fixed: Small fixes and optimizations

FILES UPDATED
- css/bootstrap.min.css Updated to 3.3.4
- css/main.css Small fixes
- js/plugins/gmaps.min.js Updated to 0.4.17
- js/vendor/bootstrap.min.js Updated to 3.3.4
- js/plugins.js Updated: HTML5 Placeholder jQuery Plugin 2.1.1

BACKEND

CHANGES
- Added: Forum Page (Categories, Topics, Discussion)
- Added: Login 2 Page
- Added: Icon Search functionality (Font Awesome + Glyphicons Pro)
- Added: Vertical Pricing Tables
- Added: 2 New Widgets
- Updated: Bootstrap 3.3.4 (3.3.2)
- Updated: jQuery UI 1.11.4 (1.11.2)
- Updated: FullCalendar 2.3.1 (2.2.6)
- Updated: DataTables 1.10.5 (1.10.4)
- Updated: DropzoneJS 4.0.1 (3.12.0)
- Updated: Chosen 1.4.2 (1.3.0)
- Updated: Bootstrap Colorpicker 2.1.0 (2.0.0)
- Updated: Bootstrap Datepicker 1.4.0 (1.3.0)
- Updated: CKEditor 4.4.7 (4.4.6)
- Updated: Gmaps.js 0.4.17 (0.4.16)
- Updated: HTML5 Placeholder jQuery Plugin 2.1.1 (2.1.0)
- Improvement: Invoice Page Improved
- Improvement: Extra Pages Menu Categorized
- Fixed: Small fixes and optimizations

FILES ADDED
- img/placeholders/layout/login2_full_bg.jpg
- page_ready_forum.php (.html)
- page_ready_login2.php (.html)

FILES UPDATED
- css/bootstrap.min.css Updated to 3.3.4
- css/plugins.css FullCalendar + DropzoneJS
- css/main.css Small fixes and optimizations
- inc/config.php Version + Menu updated (updated in all .html files in HTML version)
- js/plugins/ckeditor/* Updated to 4.4.7
- js/plugins/gmaps.min.js Updated to 0.4.17
- js/vendor/bootstrap.min.js Updated to 3.3.4
- js/pages/uiIcons.js Icon search functionality
- js/plugins.js Updated: FullCalendar 2.3.1, Chosen 1.4.2, jQuery UI 1.11.4, Datatables 1.10.5, DropzoneJS 4.0.1, Bootstrap Colorpicker 2.1.0, Bootstrap Datepicker 1.4.0, HTML5 Placeholder jQuery Plugin 2.1.1
- page_forms_components.php (.html) Color values at BS Colorpicker
- page_ui_icons_fontawesome.php (.html) Icon search input
- page_ui_icons_glyphicons_pro.php (.html) Icon search input
- page_ready_invoice.php (.html) Design Improved
- page_ready_pricing_tables.php (.html) Vertical Pricing Tables Added
- page_ui_widgets.php (.html) 2 new widgets added

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

BACKEND

CHANGES
- Added: Toggle Menu
- Added: Live + Mixed Charts
- Added: CKEditor In-place Editor
- Added: Bootstrap Colorpicker
- Added: Bootstrap Typeahead (for autocomplete functionality)
- Added: Working Print Button (+ function added for printing + CSS Print Styles)
- Updated: Font Awesome 4.3.0 (4.2.0) - 40 new icons!
- Updated: Bootstrap 3.3.2 (3.3.1)
- Updated: jQuery 2.1.3 (2.1.1)
- Updated: jQuery UI 1.11.2 (1.11.1)
- Updated: jQuery Validation Plugin 1.13.1 (1.13.0)
- 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: Dropzone 3.12.0 (3.10.2)
- 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: Magnific Popup 1.0.0 (0.9.9)
- Updated: HTML5 Placeholder jQuery Plugin 2.1.0 (2.0.7)
- 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
- img/jquery.colorpicker/ [Folder]

FILES UPDATED
- css/fonts/fontawesome/* Font Awesome updated to 4.3.0
- css/bootstrap.min.css Updated to 3.3.2
- css/plugins.css Bootstrap Colorpicker/Typeahead added + Font Awesome updated to 4.3.0
- css/main.css Various updates, fixes and additions
- inc/config.php Version updated (updated in all .html files in HTML version)
- inc/page_header.php Added a fix to sidebars' toggle buttons (updated in all .html files in HTML version)
- inc/template_scripts.php jQuery link updated (updated in all .html files in HTML version)
- js/plugins/ckeditor/* Updated to 4.4.6
- js/plugins/gmaps.min.js Updated to 0.4.16
- js/vendor/bootstrap.min.js Updated to 3.3.2
- js/vendor/jquery-2.1.3.min.js Updated to 2.1.3
- 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 Validation Plugin 1.13.1, Added: Bootstrap Colorpicker, Bootstrap Typeahead
- js/app.js Various improvements and additions
- page_app_social.php (.html) Gmaps link updated
- page_comp_maps.php (.html) Gmaps link updated
- page_ready_timeline.php (.html) Gmaps link updated
- page_ready_invoice.php (.html) Print Button added
- page_forms_components.php (.html) CKEditor In-place editor added + New Components added
- page_ui_navigation_more.php (.html) Toggle menu added
- page_ui_icons_fontawesome.php (.html) New icons added
- page_comp_charts.php (.html) New charts added

FRONTEND

CHANGES
- Added: Boxed/Full Width Layout option
- Added: UI Page Alerts + Buttons + Forms + Navigation + Popover + Tooltips + Modals
- Added: Page Scroller
- Updated: Font Awesome 4.3.0 (4.2.0) - 40 new icons!
- Updated: Bootstrap 3.3.2 (3.3.1)
- Updated: jQuery 2.1.3 (2.1.1)
- Updated: jQuery Validation Plugin 1.13.1 (1.11.1)
- Updated: Gmaps.js 0.4.16 (0.4.15)
- Updated: Magnific Popup 1.0.0 (0.9.9)
- Updated: HTML5 Placeholder jQuery Plugin 2.1.0 (2.0.7)
- 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
- ui.php (.html)
- page_scroller.php (.html)

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 + Page Scroller
- inc/config.php Menu updated + Boxed layout option added (updated in all .html files in HTML version)
- inc/page_head.php Boxed layout option added (updated in all .html files in HTML version)
- inc/template_scripts.php jQuery link updated (updated in all .html files in HTML version)
- js/plugins/gmaps.min.js Updated to 0.4.16
- js/vendor/bootstrap.min.js Updated to 3.3.2
- js/vendor/jquery-2.1.3.min.js Updated to 2.1.3
- js/app.js Lightbox Gallery improved + vPageScroll init + Ripple Button function
- js/plugins.js Updated: jQuery validation 1.13.1, Magnific Popup 1.0.0, HTML5 Placeholder jQuery Plugin 2.1.0, Added: vPageScroll
- contact.php (.html) Gmaps link updated

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

BACKEND

CHANGES
- Improvement: Sidebars performance Both on mobile and desktop
- Updated: Bootstrap 3.3.1 (3.2)
- Fixed: Small fixes and optimizations

FILES UPDATED
- css/plugins.css FullCalendar visual bug fix
- css/bootstrap.min.css Updated to 3.3.1
- css/main.css New .push classes + Sidebars performance improved
- inc/config.php Version updated
- js/vendor/bootstrap.min.js Updated to 3.3.1
- js/pages/uiTables.js New Datatables option names
- js/app.js Updated handleSidebar()

FRONTEND

CHANGES
- Added: Main menu dropdown functionality
- Added: Magnific Popup plugin
- Added: Blog
- Added: Blog Post
- Added: Portfolio
- Added: Project
- Added: Team
- Added: FAQ
- Added: Jobs
- Added: Search Results
- Improvement: Main menu sidebar performance On mobile
- Updated: Bootstrap 3.3.1 (3.2)
- Fixed: Small fixes and optimizations

FILES ADDED
- img/placeholders/photos/*
- img/placeholders/headers/*
- blog.php (.html)
- blog_post.php (.html)
- team.php (.html)
- portfolio.php (.html)
- project.php (.html)
- faq.php (.html)
- jobs.php (.html)
- search_results.php (.html)

FILES UPDATED
- css/plugins.css Magnific popup added
- css/bootstrap.min.css Updated to 3.3.1
- css/main.css Various additions for the new pages, fixes and optimizations
- inc/config.php Version updated + Main menu (Also updated in all .html files)
- inc/page_head.php Main menu auto generation updated for dropdown support (Also main menu html markup updated in all .html files)
- js/vendor/bootstrap.min.js Updated to 3.3.1
- js/plugins.js Magnific popup added
- js/app.js uiInit() -> Magnific popup init
- index.php (.html) Small markup change in action buttons (in header)

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

EMAIL TEMPLATES

CHANGES
- Added: 5 email templates with the new color theme (classy)

FRONTEND

CHANGES
- Added: Frontend Template
  - Welcome
  - Features
  - Pricing
  - Contact

PSD Files

CHANGES
- Added: PSD UI Kit

BACKEND

CHANGES
- Added: Form Wizard with Validation
- Added: New color theme: Classy
- Added: New light themed main sidebar
- Added: Option for remembering active color theme (with cookies)
- Added: Documentation extended with CSS Class reference
- Improvement: Dashboard
- Improvement: Social Net
- Improvement: User Profile
- Improvement: Various small CSS improvements (widgets, blocks & checkboxes)
- 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.3)
- 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)
- Fixed: Removed WYSIWYG Editor for Bootstrap (various bugs including Android issues)
- Fixed: Small fixes and optimizations

FILES ADDED
- css/themes/classy.css

FILES UPDATED
- css/themes/* All included files updated to support light themed sidebar + FullCalendar 2.1.1 plugin
- css/plugins.css FullCalendar styles updated, WYSIWYG styles removed, small fixes to Glyphicon styles
- css/main.css Various additions for the new features + improvements + small fixes
- css/themes.css Classy theme styles added
- inc/config.php Version updated and new options added (light sidebar + cookies)
- inc/template_start.php Renamed from favicon.ico to favicon.png. Also updated in all .html pages (HTML version)
- inc/page_head.php Added light sidebar option + cookies option. Also updated in all .html pages (HTML version)
- inc/page_sidebar.php Small improvements + Color themes list updated. Also updated in all .html pages (HTML version)
- img/favicon.png Renamed from favicon.ico to favicon.png
- js/pages/readyDashboard.js Added widget stats
- js/pages/compWizard.js Added wizard with validation
- js/plugins/gmaps.min.js Updated with the new version
- js/plugins/ckeditor/* Updated with the new version
- js/plugins.js Added jQuery Cookie, Removed WYSIWYG for Bootstrap, Updated Datatables + Chosen + Slimscroll + FullCalendar + MomentJS + jQuery UI
- js/app.js Updated colorThemePreview() + handleSidebar() + pageLoading() + uiInit()
- index.php (.html) Improved
- page_ready_profile.php (.html) Improved
- page_app_social.php (.html) Improved
- page_forms_wizard.php (.html) Added wizard with validation
- page_forms_components.php (.html) Removed simple WYSIWYG editor example

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

EMAIL TEMPLATES

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

BACKEND

CHANGES
- Added: Select2 in Form Components
- Added: New Statistics Widgets
- Added: To-do List in Components
- Added: Tree View Lists in Components
- Added: User Profile Page
- Added: Projects View in Search Results Page
- Added: Favicon for iPhone 6 Plus
- Fixed: Small fixes and optimizations

FILES ADDED
- img/jquery.select2/*
- img/jquery.easytree/*
- img/icon180.png
- js/pages/compTodo.js
- js/pages/compTree.js
- js/pages/uiWidgets.js
- page_comp_todo.php (.html)
- page_comp_tree.php (.html)
- page_ready_profile.php (.html)

FILES UPDATED
- css/themes/* All included files updated to support Select2 plugin
- css/plugins.css Select2 + EasyTree styles, small fixes to Timepicker and Chosen
- css/main.css Various additions for the new features + small fixes
- inc/config.php Main menu and version updated. Also updated in all .html pages (HTML version)
- inc/template_start.php Added link for the iPhone 6 Plus favicon. Also updated in all .html pages (HTML version)
- inc/page_sidebar.php Added Color Themes Preview. Also updated in all .html pages (HTML version)
- inc/page_sidebar_alt.php Removed Color Themes Preview. Also updated in all .html pages (HTML version)
- js/plugins.js Added Select2 + Easy Tree
- js/app.js Select2 Init + User Gallery Init (Magnific popup)
- page_forms_components.php (.html) Added Select2 plugin example
- page_app_email.php (.html) Updated modal position (moved out of #page-wrapper for fixing a bug)
- page_app_estore.php (.html) Updated modal position (moved out of #page-wrapper for fixing a bug)
- page_ui_widgets.php (.html) Added New Statistics Widgets
- page_ready_search_results.php (.html) Added Projects View

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

1.1 Update August 30, 2014

CHANGES
- Added: eStore Page
- Added: Article Page
- Added: Timeline Page
- Added: New Widgets
- Added: Chat Component in Social Net Page
- Added: Sortable/Nestable Lists
- Added: Static Fixed Width Layout
- Updated: Font Awesome 4.2.0 (4.1.0) 40 new icons!
- Fixed: Small fixes and optimizations

FILES ADDED
- js/pages/compNestable.js
- js/pages/readyTimeline.js
- page_layout_static_fixed_width.php (.html)
- page_app_estore.php (.html)
- page_ready_article.php (.html)
- page_ready_timeline.php (.html)
- page_comp_nestable.php (.html)

FILES UPDATED
- css/fonts/fontawesome/* All included files, updated to 4.2.0 version
- css/plugins.css Font Awesome 4.2.0 updated + Nestable plugin added
- css/main.css Various additions for the new features + small fixes
- inc/config.php Main menu and version updated. Also updated in all .html pages (HTML version). Added new variables for enabling/disabling fixed width layout
- inc/template_start.php Appended .min to the url of modernizr plugin. Also updated in all .html pages (HTML version)
- inc/page_head.php Added code for fixed width layout variable functionality
- js/vendor/modernizr-2.8.3.min.js Added .min to its name
- js/pages/appSocial.js Added Chat Component functionality code
- js/plugins.js Added: Nestable plugin
- page_ui_icons_fontawesome.php (.html) Added 40 new icons
- page_app_social.php (.html) Added Chat Component
- page_ui_widgets.php (.html) Added New Widgets

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

1.0 Release August 16, 2014

Versions

AppUI 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 AppUI. 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 2.2 update, the 'http:' part has been removed when including 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.

AppUI 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 AppUI. What is vital to know, is that the two files the framework consists of (required for AppUI), 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 FontAwesome were used (superior, font-based icon solutions).

HTML Structure

AppUI 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 (.html), created for this reason.

There are many available options you can set, such as header/sidebar position (fixed or static), mini or full sidebar 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 -->
<body>
    <!-- Page Wrapper -->
    <!-- In the PHP version you can set the following options from inc/config file -->
    <!--
        Available classes:

        'page-loading'      enables page preloader
    -->
    <div id="page-wrapper" class="page-loading">
        <!-- Preloader -->
        <div class="preloader">
            Preloader Content
        </div>
        <!-- END Preloader -->

        <!-- Page Container -->
        <!-- In the PHP version you can set the following options from inc/config file -->
        <!--
        Available #page-container classes:

        'sidebar-light'                                 for a light main sidebar (You can add it along with any other class)

        'sidebar-visible-lg-mini'                       main sidebar condensed - Mini Navigation (> 991px)
        'sidebar-visible-lg-full'                       main sidebar full - Full Navigation (> 991px)

        'sidebar-alt-visible-lg'                        alternative sidebar visible by default (> 991px) (You can add it along with any other class)

        '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

        'fixed-width'                                   for a fixed width layout (can only be used with a static header/main sidebar layout)

        'enable-cookies'                                enables cookies for remembering active color theme when changed from the sidebar links (You can add it along with any other class)
        -->
        <div id="page-container" class="header-fixed-top sidebar-visible-lg-full">
            <!-- 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 main sidebar 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 main sidebar 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-inverse navbar-fixed-top">
                    Header Content
                </header>
                <!-- END Header -->

                <!-- Page Content -->
                <div id="page-content">
                    Main Content
                </div>
                <!-- END Page Content -->
            </div>
            <!-- END Main Container -->
        </div>
        <!-- END Page Container -->
    </div>
    <!-- END Page Wrapper -->
</body>
<!-- END Body -->

CSS Files and Structure

Below, you can have a look at 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
- classy.css
- creme.css
- flat.css
- passion.css
- social.css
/css/bootstrap.min.css
The Bootstrap framework in its original form, unaltered.
/css/plugins.css
Styles used for the following icon packs and plugins. Their original style is altered to match with AppUI design.
- Font Awesome
- Glyphicons PRO
- FullCalendar
- Dropzone.js
- Chosen
- Datepicker for Bootstrap
- Magnific Popup CSS
- Datatables
- Easy Pie Chart
- CSS3 ANIMATION CHEAT SHEET
- Bootstrap Timepicker
- jQuery Tags Input
- Slider for Bootstrap
- Nestable
- Select2
- Easy Tree
- Select2
- Bootstrap Colorpicker
- Bootstrap Typeahead
/css/main.css
This is the main stylesheet of AppUI. The styles for the layout, AppUI 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
- 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 AppUI, 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 css/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 of many useful CSS classes available in AppUI. 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.
`.content-float-hor`	Puts margin (only right or left) 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.
`.border-*`	Adds a light border to the element (available positions: `top` `right` `bottom` `left`)
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` `classy` `social` `amethyst` `flat` `creme` `passion`
`.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-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-dark`	Sets the text color to a dark one based on the active theme. Can be used on `<a>` elements.
`.text-light`	Sets the text color to white. Can be used on `<a>` elements.
`.text-dark-op`	Sets the text color to a dark one with opacity based on the active theme. Can be used on `<a>` elements. Great on light backgrounds for a perfect match.
`.text-light-op`	Sets the text color to white with opacity. Can be used on `<a>` elements. Great on dark backgrounds for a perfect match.
Helpers
`.push`	Pushes the element by adding a bottom margin (15px).
`.push-bit`	Pushes the element by adding a bottom margin (10px).
`.push-top`	Pushes the element by adding a top margin (15px).
`.push-bit-top`	Pushes the element by adding a top 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.

JavaScript

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

/js/plugins/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/plugins/gmaps.min.js
Required for Google Maps functionality, must be included along with the Google Maps API to use the maps, please check the Google Maps components page
/js/vendor/bootstrap.min.js
JavaScript components of Bootstrap framework
/js/vendor/jquery-2.2.0.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-2.8.3.min.js
Modernizr, a browser feature detection library
/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 are 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 AppUI 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 AppUI 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-2.8.3.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.10

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.6.0

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/

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

Version

1.0.1

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 Image Lightbox
$('[data-toggle="lightbox-image"]').magnificPopup({type: 'image', 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>

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

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>

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

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.22

JavaScript

js/plugins/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/plugins/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/

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.8

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/

CountTo is a jQuery plugin that will count up (or down) to a target number at a specified speed.

Version

1.2.0

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

To initialize the plugin on a div with id example-timer, you can use the following example JS code (it will count up to 100):

$(function(){
    $('#example-timer').countTo({
        to: 100,
        speed: 1000,
        refreshInterval: 25
    });
});

Documentation

For advanced usage & examples, you can have a look at https://github.com/mhuggins/jquery-countTo

Nestable is a jQuery plugin that enables to drag & drop hierarchical lists with mouse and touch compatibility.

Version

1.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 the following list

<div class="dd">
    <ol class="dd-list">
        <li class="dd-item" data-id="1">
            <div class="dd-handle">Item 1</div>
        </li>
        <li class="dd-item" data-id="2">
            <div class="dd-handle">Item 2</div>
        </li>
        <li class="dd-item" data-id="3">
            <div class="dd-handle">Item 3</div>
            <ol class="dd-list">
                <li class="dd-item" data-id="4">
                    <div class="dd-handle">Item 4</div>
                </li>
                <li class="dd-item" data-id="5">
                    <div class="dd-handle">Item 5</div>
                </li>
            </ol>
        </li>
    </ol>
</div>

you can use the following JS code:

$(function(){
    $('.dd').nestable();
});

Documentation

For advanced usage & examples, you can have a look at https://github.com/dbushell/Nestable

EasyTree is a small and lightweight JS Menu system designed to be easy to set up but still have a rich set of features and be capable of more complex scenarios.

Version

1.0.1

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.easytree/*

This plugin uses the images included in this folder.

Usage

You can enable it on the following list..

<div id="easy-tree">
    <ul>
        <li><a href="http://www.easyjstree.com" target="_blank">Home</a></li>
        <li class="isFolder isExpanded" title="Bookmarks">
            Folder 1
            <ul>
               <li><a href="http://www.google.com" target="_blank">Go to Google.com</a></li>
            </ul>
        </li>
        <li>
            Node 1
            <ul>
                <li>Sub Node 1</li>
                <li>Sub Node 2</li>
                <li>Sub Node 3</li>
            </ul>
        </li>
        <li>Node 2</li>
    </ul>
</div>

..by running the following code:

// Initialize EasyTree
$('#easy-tree').easytree();

Documentation

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

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

Version

3.3.6

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

4.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.

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.4.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.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

4.0.1

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.5.6

JavaScript

js/plugins/ckeditor/

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

Usage

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

<script src="js/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.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.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.6.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}).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 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/v1.4.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

6.0.17

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.14.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 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

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.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

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 https://github.com/xoxco/jQuery-Tags-Input

Helper Plugins

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

Version

2.3.1

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/

JS Cookie is a simple, lightweight JavaScript API for handling cookies.

Version

2.1.0

JavaScript

js/plugins.js

Plugin's JavaScript code is included in this file.

Usage

You can save a cookie by using the following code:

Cookies.set('name', 'value');

You can retrieve a value from a cookie by using the following code:

Cookies.get('name'); // => "value"

Online

For more info, you can have a look at https://github.com/js-cookie/js-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).
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.
Favicons
If you would like to auto create your favicons from your image/logo, you can use the free service at http://realfavicongenerator.net

Retina

AppUI 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 AppUI 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.

<!-- Body -->
<body>
    <!-- Page Container -->
    <div id="page-container">
        <!-- Header -->
        <header>
            Header Content
        </header>
        <!-- END Header -->

        <!-- Sections -->
        <section class="site-section site-section-top site-section-light themed-background-dark-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
CSS3 Animation Cheat Sheet

Fonts
Google Web Fonts (Lato)

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

Images
Picjumbo
GraphicBurger

Scripts
jQuery
jQuery UI
Modernizr
Flot Charts
Datatables
FullCalendar
MomentJS (used by FullCalendar plugin)
Dropzone.js
Chosen
Slimscroll
Retina.js
Datepicker for Bootstrap
jQuery Validation
Magnific Popup
Easy Pie Charts
Bootstrap Timepicker
Form Wizard
jQuery Sparkline
HTML5 Placeholder jQuery Plugin
jQuery Tags Input
Boostrap Slider
Gmaps.js
Bootstrap-growl
CKEditor
CountTo
v1.1
Nestable
v1.2
Select2
Easy Tree
v2.0
JavaScript Cookie
jQuery Appear
v2.2
Bootstrap Colorpicker
Bootstrap Typeahead
vPageScroll

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

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