Changelog

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

v4.3 - 13 August, 2022

Enhanced Gulp is now compatible with the latest stable NodeJS version
Enhanced Sass Numeric Operators
Fixed Variable overriding issues
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 Flag-icon-css from v3.5.0 to v4.1.7
Updated iMask from v6.2.2 to v6.4.2
Updated Leaflet from v1.7.1 to v1.8.0
Updated noUiSlider from v15.5.0 to v15.6.0
Updated Shuffle from v5.4.1 to v6.1.0
Updated Swiper from v7.3.1 to v8.3.1
Updated Tom Select from v1.7.8 to v2.1.0

Breaking changes

  • .fw-semi-bold dropped in favor of Bootstrap's new .fw-semibold class

List of updated SCSS-files

  • assets/scss/theme.scss
  • assets/scss/themes/_default.scss
  • assets/scss/front/_variables.scss
  • assets/scss/front/accordion/_accordion.scss
  • assets/scss/front/avatar/_avatar-ratio.scss
  • assets/scss/front/avatar/_avatar-sizes.scss
  • assets/scss/front/avatar/_avatar-status.scss
  • assets/scss/front/buttons/_button.scss
  • assets/scss/front/buttons/_button-custom.scss
  • assets/scss/front/devices/_browser.scss
  • assets/scss/front/devices/_mobile.scss
  • assets/scss/front/dropdown/_dropdown.scss
  • assets/scss/front/forms/_input-group-merge.scss
  • assets/scss/front/forms/_form-switch.scss
  • assets/scss/front/list/_list-group.scss
  • assets/scss/front/list/_list-separator.scss
  • assets/scss/front/nav/_nav.scss
  • assets/scss/front/navbar/_navbar-expand.scss
  • assets/scss/front/navbar/_navbar-fullscreen.scss
  • assets/scss/front/offcanvas/_offcanvas.scss
  • assets/scss/front/step/_step.scss
  • assets/scss/front/step/_step-avatar.scss
  • assets/scss/front/step/_step-avatar-sizes.scss
  • assets/scss/front/step/_step-divider.scss
  • assets/scss/front/step/_step-icon.scss
  • assets/scss/front/step/_step-icon-sizes.scss
  • assets/scss/front/step/_step-breakpoints.scss
  • assets/scss/front/step/_step-centered.scss
  • assets/scss/front/step/_step-inline.scss
  • assets/scss/front/vendor/_swiper.scss
  • assets/scss/front/vendor/_tom-select.scss
  • assets/scss/front/mixins/_buttons.scss

List of updated JS-files/folders

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

v4.3 - 22 March, 2022

Dropped $gradient-transparent variable in favor of transparent, to fix Safari issue
Enhanced Vertical slider overlapping issue on Blog Journal page.
Enhanced HS Header functionality
Enhanced HS Mega Menu onClick functionality
Enhanced Avatar sizes
Updated Bootstrap Icons from v1.7.1 to v1.8.1

List of updated SCSS-files

  • assets/scss/front/_variables.scss
  • assets/scss/front/avatar/_avatar.scss
  • assets/scss/front/avatar/_avatar-sizes.scss
  • assets/scss/front/banner/_banner.scss
  • assets/scss/front/nav/_nav.scss
  • assets/scss/front/utilities/_gradients.scss
  • assets/scss/front/utilities/_gradients-overlay.scss
  • assets/scss/front/vendor/_hs-nav-scroller.scss

List of updated JS-files/folders

  • assets/vendor/hs-header

v4.1 - 06 December, 2021

New Coming Soon
New Office Club Illustration package
Enhanced Bootstrap .container class width across different resolutions
Enhanced HS Header fixMoment function
Enhanced HS Step Form Validation
Enhanced HS Step Form Ajax option
Enhanced By default color added to the .card-text class
Enhanced Tom Select input placeholder color improvements
Enhanced min-width of 9rem added to the HS Quantity Counter
Fixed HS Mega Menu on click issue
Fixed HS Scrollspy when the content is too long before the first content to the ID
Updated Swiper from v6.7.5 to v7.0.8

Breaking changes

  • .swiper-container changed to .swiper

List of dropped SCSS-files

  • assets/scss/front/_variables.scss
  • assets/scss/front/card/_card.scss
  • assets/scss/front/nav/_nav.scss
  • assets/scss/front/list/_list-padding.scss
  • assets/scss/front/tom-select/_tom-select.scss
  • assets/scss/front/vendor/_quantity-counter.scss

List of updated JS-files/folders

  • assets/vendor/hs-header
  • assets/vendor/hs-mega-menu
  • assets/vendor/hs-scrollspy
  • assets/vendor/hs-step-form

Migrating to v4

Front v4.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 v3.x to v4.0 or any older version of Front.

The most notable improvements made in Front v4.0

  • Bootstrap v5 - Built on top of the latest Bootstrap v5.
  • JavaScript - jQuery is fully dropped as a dependency and all libraries and js files are fully vanilla JS now.
  • HTML - classes and code structure optimized.
  • SCSS - all files and styled updated.
  • Headers (Navbars) - completely rewritten from scratch.

v4.0 - 20 August, 2021

New Base Components such as Lists, Cards and others
Enhanced .blockquote style changed to .blockquote-left-border
Enhanced .card-body-centered changed to .card-centered and now placed next to a .card class, instead of a .card-body class
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 hs-video-bg classes are now .video-bg rather than utility classes
Enhanced Illustrations
Updated Bootstrap from 4.6.0 to v5.1
Dropped jQuery library
Dropped Internet Explorer support
Dropped FontAwesome dropped in favor of Bootstrap Icons
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 Dzsparallaxer library
Dropped Cubeportfolio dropped in favor of Shuffle.js
Dropped Slick Carousel dropped in favor of Swiper
Dropped jQuery Countdown dropped in favor of Countdown.js
Dropped Input Mask dropped in favor of imask.js
Dropped Indigo color palette
Dropped Portfolio Masonry page
Dropped Portfolio Modern page
Dropped Portfolio - Single Page List page
Dropped Portfolio - Single Page Masonry page
Dropped Footer variant-4.html dropped in favor of main footer
Dropped Footer variant-2.html
Dropped Search Slide Down
Dropped Search Push Down dropped in favor of new Offcanvas Search
Dropped .avatar-border classes dropped in favor of utility classes
Dropped .avatar-border-lg class
Dropped .sidebar dropped in favor of Bootstrap Offcanvas
Dropped .table-heighlighted class
Dropped .table-light-bordered class
Dropped .gradient-x-overlay-sm-indigo in favor of .gradient-x-overlay-sm-primary
Dropped 11: ($spacer * 5) (eg., .m-11, .p-11 and etc. classes))
Dropped .badge-soft-* color palettes in favor of utility classes, like Bootstrap Badge
Dropped .btn-custom-toggle-* color palettes
Dropped .btn-group-sm class
Dropped .btn-wide and .btn-sm-wide classes
Dropped .btn-pill dropped in favor of utility classes
Dropped .breadcrumb-no-gutter class
Dropped .breadcrumb-no-gutter class
Dropped .card-columns dropped in favor of .row class
Dropped .card-gutters dropped in favor of .row class
Dropped .card-*-count dropped in favor of .row class
Dropped .card-*-gap dropped in favor of .row class
Dropped .card-bg-light dropped in favor of utility class
Dropped .card-frame class
Dropped .card-hover-shadow class
Dropped .card-dropdown class
Dropped .card-no-gutters class
Dropped .clients dropped in favor of .avatar classes
Dropped .divider-text dropped in favor of default style
Dropped .dropdown-menu-sm and .dropdown-menu-lg sizes
Dropped .dropdown-nav-link class
Dropped .checkbox-icon, .checkbox-outline and .custom-checkbox dropped in favor of new Form Check Card
Dropped .toggle-switch dropped in favor of Bootstrap Switches
Dropped .file-attachment-input class
Dropped .custom-select-pill class
Dropped .form-control-pill class
Dropped .input-group-pill class
Dropped .input-group-add-field-delete class
Dropped .input-group-flush class
Dropped .link-icon class
Dropped .link-underline dropped in favor of Link classes
Dropped .link-underline-light dropped in favor of Link classes
Dropped .link-underline-toggle classes dropped in favor of new .btn-toggle classes
Dropped .list-article dropped in favor of new .list-py-* classes
Dropped .list-group-item-light dropped in favor of new .list-group-striped class
Dropped .header-section class
Dropped .header-section-divider class
Dropped .left-aligned-navbar dropped and now by default it's left aligned
Dropped .center-aligned-navbar class
Dropped .navbar-navbar-toggler dropped in favor of .navbar-toggler
Dropped .navbar-nav-wrap-toggler dropped in favor of .navbar-toggler
Dropped .navbar-nav-wrap-collapse dropped in favor of .navbar-collapse
Dropped .navbar-nav-wrap-content dropped in favor of .nav-wrap-secondary-content
Dropped .navbar-nav-item dropped in favor of .nav-item
Dropped .navbar-nav-last-item class
Dropped .navbar-promo-card dropped in favor of .navbar-dropdown-menu-promo-item
Dropped .navbar-promo-card-deck dropped in favor of .navbar-dropdown-menu-promo
Dropped .navbar-promo-card-body class
Dropped .navbar-promo-icon dropped in favor of .svg-icon
Dropped .navbar-promo-title dropped in favor of .navbar-dropdown-menu-media-title
Dropped .navbar-promo-text dropped in favor of .navbar-dropdown-menu-media-text
Dropped .navbar-promo-card-footer class
Dropped .navbar-promo-card-footer-item class
Dropped .navbar-promo-card-footer-text class
Dropped .navbar-promo-card-footer-ver-divider class
Dropped .navbar-nav-wrap-content class
Dropped .navbar-nav-wrap-toggler class
Dropped .navbar-nav-wrap-collapse class
Dropped .header-white-bg-on-scroll class
Dropped .header-bg-transparent dropped in favor of Bootstrap Navbar Skins
Dropped .header-white-nav-links dropped in favor of Bootstrap Navbar Skins
Dropped .nav-*-break dropped in favor of HS Nav Scroller
Dropped .nav-classic class
Dropped .nav-list-y-1 and .nav-list-y-2 classes
Dropped .nav-x-0 class
Dropped .nav-x-sm class
Dropped .nav-y-0 class
Dropped .nav-shadow class
Dropped .nav-rounded class
Dropped .nav-white class
Dropped .nav-border-white class
Dropped .nav-box class
Dropped .scrollbar and .scrollbar-horizontal classes
Dropped .shadow-primary-lg class
Dropped .font-size-* dropped in favor of Bootstrap .fs-* classes
Dropped .text-lh-* dropped in favor of Bootstrap .lh-* classes
Dropped .transition-3d-hover dropped, and replaced with .card-transition for .card cases and .btn-transition for button cases
Dropped .transition-zoom-hover dropped in favor of .card-transition
Dropped .border-dashed class
Dropped .text-hover-primary dropped in favor of .text-inherit
Dropped .rounded-lg-pseudo classes
Dropped .opacity-* classes
Dropped .shadow-soft dropped in favor of .shadow-sm
Dropped All sizing classes
Dropped .content-centered-* dropped in favor of Bootstrap Center elements
Dropped svg/components/quote.svg dropped in favor of inline styling
Dropped svg/components/abstract-shapes-1.svg SVG element
Dropped svg/components/abstract-shapes-6.svg dropped in favor of new svg/components/card-9.svg
Dropped svg/components/abstract-shapes-7.svg dropped in favor of new svg/components/card-8.svg
Dropped svg/components/abstract-shapes-8.svg dropped in favor of svg/components/card-7.svg
Dropped svg/components/abstract-shapes-10.svg dropped in favor of svg/components/shape-5.svg
Dropped svg/components/abstract-shapes-11.svg dropped in favor of inline styling
Dropped svg/components/abstract-shapes-16.svg dropped in favor of svg/components/card-10.svg
Dropped svg/components/abstract-shapes-17.svg SVG element
Dropped svg/components/abstract-shapes-18.svg SVG element
Dropped svg/components/arrow-pointer-lg-up.svg SVG element
Dropped svg/components/arrow-pointer-up.svg SVG element
Dropped svg/components/browser.svg SVG element
Dropped svg/components/circle-preloader.svg SVG element
Dropped svg/components/close.svg SVG element
Dropped svg/components/converge.svg SVG element
Dropped svg/components/dots-1.svg dropped in favor of new svg/components/dots.svg
Dropped svg/components/dots-2.svg dropped in favor of new svg/components/dots.svg
Dropped svg/components/dots-3.svg dropped in favor of new svg/components/dots.svg
Dropped svg/components/dots-4.svg dropped in favor of new svg/components/dots.svg
Dropped svg/components/graphics-10.svg SVG element
Dropped svg/components/graphics-11.svg SVG element
Dropped svg/components/half-iphone-x.svg SVG element
Dropped svg/components/ipad.svg SVG element
Dropped svg/components/ipad-horizontal.svg SVG element
Dropped svg/components/iphone-x.svg SVG element
Dropped svg/components/lines.svg dropped in favor of Bootstrap icon
Dropped svg/components/macbook.svg SVG element
Dropped svg/components/three-pointers.svg SVG element

Renamed classes

Front v3.x Front v4.0
.js-text-animation .js-typedjs
.js-switch-text .js-toggle-switch
.z-index-* .zi-*
.avatar-4by3 .avatar-4x3
.card-no-gutters .card-reset
.column-divider-* .col-*-divider
.custom-checkbox-bookmark .form-check-bookmark
.input-label-secondary .form-label-secondary
.bg-img-hero .bg-img-start
.bg-img-hero-bottom .bg-img-end
.bg-img-hero-center .bg-img-center
.space-* .content-space-*
.stats-progress .circles-chart
.stats-progress-info .circles-chart-content
.header-* .navbar-*
.js-navbar-fix-moment .navbar-scrolled
.header-hide-content .navbar-topbar
.header-box-shadow .navbar-shadow
.header-box-shadow-on-scroll .navbar-shadow-on-scroll
.navbar-promo .navbar-dropdown-menu-promo
.navbar-promo-item .navbar-dropdown-menu-promo-item
.navbar-promo-link .navbar-dropdown-menu-promo-link
.navbar-promo-title .navbar-dropdown-menu-media-title
.navbar-banner .navbar-dropdown-menu-banner
.navbar-banner-content .navbar-dropdown-menu-banner-content
.navbar-product-banner .navbar-dropdown-menu-shop-banner
.navbar-product-banner-content .navbar-dropdown-menu-shop-banner-content
.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
.page-preloader-content-centered .page-preloader-middle
.file-attachment-btn .form-attachment-btn
.file-attachment-btn-label .form-attachment-btn-label
.transform-rotate-1 .transform-rotate-n40deg
.transform-rotate-5 .transform-rotate-n22deg
.gradient-x-overlay-sm-indigo .gradient-x-overlay-sm-primary
.hero-v1 .banner-half-middle-x
.checkbox-outline .form-check-card
.dz-dropzone-boxed .dz-dropzone-card

Renamed SVG-files

Front v3.x Front v4.0
svg/components/abstract-shapes-2.svg svg/components/shape-2.svg
svg/components/abstract-shapes-3.svg svg/components/shape-3.svg
svg/components/abstract-shapes-4.svg svg/components/shape-4.svg
svg/components/abstract-shapes-5.svg svg/components/shape-7.svg
svg/components/abstract-shapes-9.svg svg/components/shape-5.svg
svg/components/abstract-shapes-12.svg svg/components/card-11.svg
svg/components/abstract-shapes-13.svg svg/components/card-7.svg
svg/components/abstract-shapes-14.svg svg/components/card-8.svg
svg/components/abstract-shapes-15.svg svg/components/card-9.svg
svg/components/abstract-shapes-19.svg svg/components/shape-6.svg
svg/components/abstract-shapes-20.svg svg/components/wave-pattern-light.svg
svg/components/abstract-shapes-21.svg svg/components/card-1.svg
svg/components/dots-5.svg svg/components/dots.svg
svg/components/graphics-1.svg svg/components/card-12.svg
svg/components/graphics-2.svg svg/components/card-13.svg
svg/components/graphics-3.svg svg/components/card-14.svg
svg/components/graphics-4.svg svg/components/card-6.svg
svg/components/graphics-5.svg svg/components/card-15.svg
svg/components/graphics-6.svg svg/components/card-4.svg
svg/components/graphics-7.svg svg/components/card-5.svg
svg/components/graphics-8.svg svg/components/card-16.svg
svg/components/graphics-9.svg svg/components/card-17.svg
svg/components/isometric-squares.svg svg/components/isometric-squares-light.svg

Previous updates

You can view the history of previous updates here