Changelog

See what's new added, changed, fixed, improved or updated in the latest Front versions.

v2.1.1 - 31 October, 2022

Enhanced Documentation
Fixed Copy to Clipboard tooltip position
Fixed Date Range Picker Predefined with Readonly example
Fixed Scrollspy Click event
Updated Bootstrap from v5.2.0 to v5.2.2

List of updated SCSS-files

  • assets/scss/front-dashboard/_variables.scss
  • assets/scss/front-dashboard/forms/_input-group-merge.scss

List of updated JS-files/folders

  • assets/vendor/hs-scrollspy
  • assets/js/hs.clipboard.js

v2.1 - 13 August, 2022

New Advanced Select (Tom Select) with validation example
Enhanced Gulp is now compatible with the latest stable NodeJS version
Enhanced Sass Numeric Operators
Fixed Soft color variables overriding issue
Updated Bootstrap from v5.1.3 to v5.2.0
Updated Bootstrap Icons from v1.8.1 to v1.9.1
Updated Chart.js from v2.9.4 to v3.8.0
Updated Chart.js-chart-matrix from v0.1.3 to v1.1.1
Updated Chart.js-plugin-datalabels from v0.7.0 to v2.0.0
Updated Clipboard from v2.0.10 to v2.0.11
Updated Datatables.net-buttons from v1.7.1 to v2.2.3
Updated Flag-icon-css from v3.5.0 to v4.1.7
Updated Flatpickr from v4.6.9 to v4.6.13
Updated Fullcalendar from v5.10.2 to v5.11.0
Updated iMask from v6.1.0 to v6.4.2
Updated jQuery Migrate from v3.3.2 to v3.4.0
Updated Jsvectormap from v1.4.4 to v1.4.5
Updated JSZip from v3.7.1 to v3.10.0
Updated Leaflet from v1.7.1 to v1.8.0
Updated PDFmake from v0.1.72 to v0.2.5
Updated Sortable from v1.14.0 to v1.15.0
Updated Tom Select from v1.7.8 to v2.1.0

List of updated SCSS-files

  • assets/scss/theme.scss
  • assets/scss/theme-dark.scss
  • assets/scss/themes/_default.scss
  • assets/scss/front-dashboard/_variables.scss
  • assets/scss/front-dashboard/accordion/_accordion.scss
  • assets/scss/front-dashboard/avatar/_avatar-group-sizes.scss
  • assets/scss/front-dashboard/avatar/_avatar-ratio.scss
  • assets/scss/front-dashboard/avatar/_avatar-sizes.scss
  • assets/scss/front-dashboard/avatar/_avatar-status.scss
  • assets/scss/front-dashboard/buttons/_button.scss
  • assets/scss/front-dashboard/buttons/_button-custom.scss
  • assets/scss/front-dashboard/buttons/_button-status.scss
  • assets/scss/front-dashboard/buttons/_button-status-sizes.scss
  • assets/scss/front-dashboard/devices/_browser.scss
  • assets/scss/front-dashboard/card/_card.scss
  • assets/scss/front-dashboard/content/_content.scss
  • assets/scss/front-dashboard/dropdown/_dropdown.scss
  • assets/scss/front-dashboard/footer/_footer.scss
  • assets/scss/front-dashboard/forms/_input-group-merge.scss
  • assets/scss/front-dashboard/forms/_form-switch.scss
  • assets/scss/front-dashboard/list/_list-group.scss
  • assets/scss/front-dashboard/list/_list-separator.scss
  • assets/scss/front-dashboard/nav/_nav.scss
  • assets/scss/front-dashboard/navbar/_navbar.scss
  • assets/scss/front-dashboard/navbar/_navbar-expand.scss
  • assets/scss/front-dashboard/navbar/_navbar-vertical-aside.scss
  • assets/scss/front-dashboard/offcanvas/_offcanvas.scss
  • assets/scss/front-dashboard/profile/_profile-cover.scss
  • assets/scss/front-dashboard/step/_step.scss
  • assets/scss/front-dashboard/step/_step-avatar.scss
  • assets/scss/front-dashboard/step/_step-avatar-sizes.scss
  • assets/scss/front-dashboard/step/_step-divider.scss
  • assets/scss/front-dashboard/step/_step-icon.scss
  • assets/scss/front-dashboard/step/_step-icon-sizes.scss
  • assets/scss/front-dashboard/step/_step-breakpoints.scss
  • assets/scss/front-dashboard/step/_step-centered.scss
  • assets/scss/front-dashboard/step/_step-inline.scss
  • assets/scss/front-dashboard/vendor/_chartjs.scss
  • assets/scss/front-dashboard/vendor/_tom-select.scss
  • assets/scss/front-dashboard/mixins/_buttons.scss

List of updated JS-files/folders

  • gulpfiles/
  • package.json
  • assets/js/hs.chartjs.js
  • assets/js/hs.chartjs-matrix.js
  • assets/js/hs.flatpickr.js
  • assets/js/hs.tom-select.js

List of updated HTML partials/ files

  • partials/layouts-components/search.html
  • partials/layouts-components/search-light.html
  • partials/layouts-components/search-light-ghost-light.html
  • partials/layouts-components/dropdown-notifications.html
  • partials/layouts-components/dropdown-notifications-ghost-light.html
  • partials/layouts-components/dropdown-apps.html
  • partials/layouts-components/dropdown-apps-ghost-light.html

Migrating to v2

Front Dashboard v2.0 is a major rewrite of the entire template. The most notable changes are summarized below, followed by more specific changes to relevant components. Hence, below are the breaking changes to bear in mind when moving from v1.x to v2.1 or any older version of Front.

The most notable improvements made in Front Dashboard v2.0

  • Bootstrap v5 - Built on top of the latest Bootstrap v5.
  • JavaScript - All HS libraries and scripts are fully re-written in vanilla JavaScript, except some third party libraries such as Datatables & Date Range Picker still comes with jQuery dependency.
  • HTML - classes and code structure optimized.
  • SCSS - all files and styled updated.
  • Headers (Navbars) - completely rewritten from scratch.

v2.0 - 13 February, 2022

New Dark Mode
New Landing Page
New Office Club Illustration package
New Button Group page
New Card options
New List options
New Navs options
New Shapes component
New Tables component
Enhanced Global font variable changed from Open Sans to Inter
Enhanced .card-body-centered changed to .card-centered and now placed next to a .card class, instead of a .card-body class
Enhanced .card-pinned class has
Enhanced .card-dropdown changed to .card-dropdown-btn and now given to the invoker
Enhanced .column-divider-* changed to .col-*-divider and now placed next to a .row class, instead of an individual .col-* class
Enhanced .divider divided to .divider-start, .divider-end and .divider-center classes
Enhanced Illustrations
Enhanced .opacity-xs class changed to .opacity-25
Enhanced .opacity class changed to .opacity-50
Enhanced .opacity-lg class changed to .opacity-75
Enhanced Default .card-header content between alignment is now controlled with .card-header-content-between class
Updated Bootstrap from 4.6.0 to v5.0.2
Updated Bootstrap from v1.7.1 to v1.8.1
Dropped Internet Explorer support
Dropped The-icon-of dropped in favor of Bootstrap Icons
Dropped HS Transform Tabs to Btn dropped in favor of HS Nav Scroller
Dropped FancyBox dropped in favor of Fslightbox
Dropped jQuery Validation dropped in favor of Bootstrap Validation
Dropped HS Unfold dropped in favor of Bootstrap Dropdowns
Dropped jvectormap plugin dropped in favor of new jsvectormap
Dropped Input Mask dropped in favor of imask.js
Dropped .content-centered-* dropped in favor of Bootstrap Center elements
Dropped .hs-nav-scroller-unfold dropped in favor of .nav-scroller-dropdown
Dropped .avatar-border classes dropped in favor of utility classes
Dropped .avatar-border-lg class
Dropped .avatar-border-dashed class
Dropped .badge-soft-* color palettes in favor of utility classes, like Bootstrap Badge
Dropped .breadcrumb-no-gutter class
Dropped .btn-pill dropped in favor of utility classes
Dropped .card-unfold class
Dropped .card-jvectormap class
Dropped .card-header-borderless class
Dropped .card-body-stretched class
Dropped .card-dashed-body class
Dropped .card-border-left class
Dropped .card-btn class
Dropped .close-light class
Dropped .nav-divider class
Dropped .nav-link-toggle class
Dropped .nav-indicator-icon class
Dropped .nav-*-down-break class
Dropped .navbar-brand-wrapper class
Dropped .navbar-brand-wrapper class in favor of .navbar-brand
Dropped .navbar-flush class
Dropped .navbar-nav-lg dropped in favor of .nav-lg
Dropped .navbar-nav-mega-menu-body class
Dropped .navbar-spacer-y class
Dropped .navbar-body class
Dropped .navbar-nav-mega-menu class
Dropped .navbar-dropdown-submenu-item-invoker class
Dropped .dropdown-menu-sm class
Dropped .dropdown-menu-lg class
Dropped .custom-select-pill class
Dropped .form-control-pill class
Dropped .input-group-pill class
Dropped .input-group-flush class
Dropped .custom-checkbox-card class
Dropped .custom-checkbox-bookmark class
Dropped .link-collapse class
Dropped .list-group-lg class
Dropped .sidebar dropped in favor of .offcanvas
Dropped .border-left-* classes
Dropped .shadow-soft dropped in favor of .shadow-sm
Dropped .table-column-right-aligned dropped in favor of .table-text-end

Renamed classes

Front v1.x Front v2.0
.avatar-4by3 .avatar-4x3
.column-divider-* .col-*-divider
.input-label-secondary .form-label-secondary
.input-group-*-down-break .input-group-*-vertical
.bg-img-hero .bg-img-start
.stats-progress .circles-chart
.list-unstyle-py-2 .list-py-2
.list-unstyle-py-4 .list-py-3
.stats-progress-info .circles-chart-content
.js-navbar-fix-moment .navbar-scrolled
.header-abs-top .navbar-absolute-top
.header-abs-top-inner .navbar-absolute-top-scroller
.header-sticky-top .navbar-sticky-top
.header-sticky-top-inner .navbar-sticky-top-scroller
.header-invisible .navbar-invisible
.header-moved-up .navbar-moved-up
.header-faded .navbar-faded
.header-section-hidden .navbar-section-hidden
.header-untransitioned .navbar-untransitioned
.header-fix-top .navbar-fix-top
.navbar-vertical-aside-toggle .navbar-toggler
.navbar-vertical-aside-toggle-short-align .navbar-toggler-short-align
.navbar-vertical-aside-toggle-full-align .navbar-toggler-full-align
.navbar-nav-wrap-content-left .navbar-nav-wrap-content-start
.navbar-nav-wrap-content-right .navbar-nav-wrap-content-end
.table-column-pl-0 .table-column-ps-0
.table-column-pr-0 .table-column-pe-0
.custom-file-btn .profile-cover-uploader
.custom-file-input .profile-cover-uploader-input
.custom-file-btn-label .profile-cover-uploader-label
.custom-checkbox-switch .form-check-switch
.custom-checkbox-card-label-stretched .form-check-select-stretched
.dz-dropzone-boxed .dz-dropzone-card
.left-0 .start-0
.right-0 .end-0
.z-index-* .zi-*

v1.2 - 29 March, 2021

Fixed Minor navbar fixes
Fixed Fixed loading country flags on account-settings.html page in build mode
Fixed button box-shadow issue on accessibility

List of important updated SCSS files:

  • src/assets/scss/front-dashboard/reboot/_accessibility.scss
  • src/assets/scss/front-dashboard/navbar/_navbar.scss
  • src/assets/scss/front-dashboard/navbar/_navbar-expand.scss
  • src/assets/scss/front-dashboard/navbar/_navbar-options.scss

List of important updated JSON files:

  • src/assets/json/flags.json

v1.1 - 3 December, 2020

New Ecommerce (11 pages)
New App Calendar page
New Referrals page
New Calendar (Fullcalendar) plugin
New Fullscreen Lightbox plugin
New Popover dark option (Now, by default it's light)
New Chartjs yearStamp option
New Checks & Switches outlined color options
New HS File Attach types of upload files
New HS Step Form slide to top option
New Utility classes
Enhanced Changed variables names in SCSS-files
Enhanced JS code comment section in the HTML-pages only
Enhanced hs.daterangepicker.js arrows called via JS-file now
Enhanced Extended utility classes
Enhanced .custom-control styles
Enhanced Documentation
Updated Bootstrap from v4.5.2 to v4.5.3
Fixed HS Nav Scroller incorrect display of arrows inside the card
Fixed HS Navbar Vertical Aside third level dropdown collapse issue
Fixed HS Unfold "Spacebar" keyboard issue on iPhone X

List of important updated SCSS files:

  • src/assets/scss/front-dashboard/_variables.scss
  • src/assets/scss/front-dashboard/avatar/_avatar-group-sizes.scss
  • src/assets/scss/front-dashboard/avatar/_avatar-ratio.scss
  • src/assets/scss/front-dashboard/avatar/_avatar-sizes.scss
  • src/assets/scss/front-dashboard/avatar/_avatar-status.scss
  • src/assets/scss/front-dashboard/buttons/_button-ghost.scss
  • src/assets/scss/front-dashboard/buttons/_button-icon-sizes.scss
  • src/assets/scss/front-dashboard/buttons/_button-custom.scss
  • src/assets/scss/front-dashboard/buttons/_button-soft.scss
  • src/assets/scss/front-dashboard/buttons/_button-sizes.scss
  • src/assets/scss/front-dashboard/buttons/_button-status-sizes.scss
  • src/assets/scss/front-dashboard/close/_close.scss
  • src/assets/scss/front-dashboard/forms/_form.scss
  • src/assets/scss/front-dashboard/forms/_custom-forms.scss
  • src/assets/scss/front-dashboard/forms/input-group/_input-group-flush.scss
  • src/assets/scss/front-dashboard/icon/_icon-sizes.scss
  • src/assets/scss/front-dashboard/page-header/_page-header.scss
  • src/assets/scss/front-dashboard/popover/_popover.scss
  • src/assets/scss/front-dashboard/profile/_profile-cover.scss
  • src/assets/scss/front-dashboard/card/_card-extensions.scss
  • src/assets/scss/front-dashboard/navbar/_navbar-vertical.scss
  • src/assets/scss/front-dashboard/navs/_navs.scss
  • src/assets/scss/front-dashboard/step/_step.scss
  • src/assets/scss/front-dashboard/utilities/_content-centered.scss
  • src/assets/scss/front-dashboard/utilities/_z-index.scss
  • src/assets/scss/front-dashboard/sidebar/_sidebar.scss
  • src/assets/scss/front-dashboard/vendor/_datatables.scss
  • src/assets/scss/front-dashboard/vendor/_daterangepicker.scss
  • src/assets/scss/front-dashboard/vendor/_dropzone.scss
  • src/assets/scss/front-dashboard/vendor/_flatpickr.scss
  • src/assets/scss/front-dashboard/vendor/_jvectormap.scss
  • src/assets/scss/front-dashboard/vendor/_leaflet.scss
  • src/assets/scss/front-dashboard/vendor/_select2.scss
  • src/assets/scss/front-dashboard/vendor/_tagify.scss
  • src/assets/scss/front-dashboard/vendor/_quill.scss

List of important added SCSS files:

  • src/assets/scss/front-dashboard/vendor/_fancybox.scss
  • src/assets/scss/front-dashboard/forms/checkbox/_checkbox-styles.scss

List of important updated JS files:

  • src/assets/js/hs.chartjs.js
  • src/assets/js/hs.daterangepicker.js
  • src/assets/vendor/hs-file-attach/
  • src/assets/vendor/hs-navbar-vertical-aside.js
  • src/assets/vendor/hs-step-form/
  • src/assets/vendor/hs-unfold/