Changelog

Read this before updating

Do not forget to backup your files and read the changelog before updating your Space copy. If you come across with any problems with Space template during the update and development processes, feel free to contact our support group at htmlstream.com/contact-us and our team will assist you within a short time.

`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

更新 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

更新 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 证券投资 Masonry page

Dropped 证券投资 Modern page

Dropped 证券投资 - Single Page List page

Dropped 证券投资 - 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 .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