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

2.4 - 05 April, 2019

New App Payment home page.

New App Software home page.

New Customers inner page.

New Customer story inner page.

New Search push down option added.

New Background overlay option to the hs.unfold.js.

New Background soft color.

New Dropzone drag'n'drop file uploader plugin.

New Utility classes.

Dropped Dropped assets/scss/front/utilities/_overflow.scss file in favor of Bootstrap .overflow classes.

Enhanced Documentation.

Updated gulpfile.js file

List of important updated files

  • assets/scss/front/utilities/_sizing.scss
  • assets/scss/front/utilities/_position-spaces.scss
  • assets/scss/front/utilities/_gradients-overlay.scss
  • assets/scss/front/list/_list-group.scss
  • assets/scss/front/svg/_svg-ie.scss
  • assets/scss/front/divider/_divider.scss
  • assets/scss/front/divider/_divider-sizes.scss
  • assets/scss/front/svg/_svg-ie.scss
  • assets/svg/components/abstract-shapes-7.svg
  • assets/js/components/hs.unfold.js
  • assets/js/components/hs.slick-carousel.js
  • assets/js/components/hs.svg-injector.js
  • assets/js/components/hs.datatables.js
  • assets/js/components/hs.selectpicker.js
  • html/account/activity.html
  • html/house/property-seller.html

2.3 - 14 March, 2019

New Status page.

New Timeline feature.

New Added a new spinner loading component.

New Added a new iOS style switch (a modifier class to our custom checkboxes).

New Added responsive .list-group-horizontal modifier classes for displaying list groups as a horizontal row.

Updated Bootstrap from v4.1.3 to v4.3.1

Updated FontAwesome from v5.5 to v5.7.2

Enhanced .custom-checkbox disabled state color.

Enhanced .btn classes in the navigation of the Account pages with the help of .text-nowrap class.

Enhanced button styles.

Enhanced Documentation.

Fixed hs.hamburger.js active class.

Fixed .badge-md line height issue.

Fixed Testimonials spacing issue on vertical Slick Carousel options.

Fixed type="" added to the buttons where it was not.

Fixed .custom-checkbox line height issue.

Fixed .form-control size style removed for the .input-group-lg class.

Fixed .btn-soft-* color issues on hover states.

Fixed autoplay option added.

Fixed hs.fancybox.js autoplay slideshow option added.

Fixed Password hint validation.

Migrating to v2.3

Moving from Front v2.2.1 to the latest v2.3 release, there are some notable changes.

Breaking changes

  • Dropped .checkbox-switch styles in favor of Bootstrap .custom-switch classes.
  • Dropped now called via data-video-id attribute rather than iframe. For more information, see Video player

List of important updated files

  • assets/include/scss/front/_variables.scss
  • assets/include/scss/front/forms/_form-sizes.scss
  • assets/include/scss/front/forms/checkbox/_checkbox-switch.scss
  • assets/include/scss/front/mixins/_buttons.scss
  • assets/include/scss/front/buttons/_button-custom.scss
  • New assets/include/scss/front/spinner/
  • New assets/include/scss/front/forms/checkbox/_custom-checkbox.scss
  • assets/include/vendor/bootstrap/
  • assets/include/vendor/font-awesome/
  • assets/js/components/
  • assets/js/components/hs.fancybox.js
  • All html/account/ pages
  • html/job/freelancers-grid.html
  • html/job/freelancers-grid-side-filter.html
  • html/job/freelancers-list.html
  • html/job/freelancers-list-side-filter.html
  • html/job/jobs-grid.html
  • html/job/jobs-grid-side-filter.html
  • html/job/jobs-list.html
  • html/job/jobs-list-side-filter.html
  • html/home/portfolio-agency.html
  • html/home/blog-business.html
  • html/home/blog-agency.html
  • html/home/onepage-creative.html
  • html/pages/about-agency.html
  • html/pages/careers.html

2.2.1 - 18 February, 2019

Enhanced Documentation.

Fixed HS Megamenu collapse on small devices.

List of important updated files

  • assets/vendor/hs-megamenu/src/hs.megamenu.js
  • assets/include/scss/front/front/vendor/animate.scss

2.2 - 09 February, 2019

New House inner pages.

New Utility classes.

Enhanced Documentation.

Fixed Validation forms.

Fixed HS GoTo issue on iOS.

Fixed HS Unfold bug with Esc keyboard button.

Fixed HS Megamenu hideTimeOut issue.

Fixed HS Range slider bug with Charts.

List of important updated files

  • New - assets/include/scss/front/dropdown/_dropdown-sizes.scss
  • assets/include/scss/front/_variables.scss
  • assets/include/scss/front/utilities/_margin.scss
  • assets/include/scss/front/scss/arrows/_slick-arrow.scss
  • assets/include/scss/front/front/vendor/animate.scss
  • assets/js/components/hs.range-slider.js
  • assets/js/components/hs.unfold.js
  • assets/vendor/hs-megamenu/src/hs.megamenu.js
  • html/home/classic-marketing.html
  • html/home/corporate-start-up.html
  • html/home/onepage-creative.html
  • html/house/index.html
  • html/shop/classic.html
  • html/shop/masonry.html
  • html/shop/single-product.html
  • html/shop/checkout.html
  • html/account/edit-profile.html
  • html/pages/about-agency.html
  • html/pages/contacts-start-up.html
  • html/pages/hire-us.html

2.1.1 - 05 January, 2019

New jQuery Password Strength Bootstrap plugin

New hs.password-strength.js library

New Password strength documentation page

New Clipboard options

New Utility classes

Updated FontAwesome from v5.5 to v5.6.3

Enhanced hs.unfold.js and added data-unfold-target-is-menu attribute.

Enhanced Documentation.

List of important updated files

  • New - assets/vendor/pwstrength-bootstrap/
  • New - assets/js/components/hs.password-strength.js
  • assets/js/components/hs.unfold.js
  • assets/js/components/hs.clipboard.js
  • assets/include/scss/front/utilities/_sizing.scss
  • html/account/change-password.html

2.1 - 22 December, 2018

New Jobs inner pages.

New Header layout

New Utility classes

Enhanced Documentation.

Breaking changes

  • Dropped .u-label styles in favor of .btn classes.

2.0.2 - 04 December, 2018

Updated FontAwesome from v5.2 to v5.5

Enhanced Documentation.

Fixed hs.megamenu.js issue on iPad devices.

Fixed Conflicting Bootstrap Select plugin with hs.unfold.js.

Fixed Bootstrap active button style on checkbox and radio buttons.

Fixed Bootstrap select copy-code snippet wrong class naming.

Fixed Some linking issues.

2.0.1 - 15 November, 2018

Updated hs.sticky-block.js file completely rewritten and updated from v1.0 to v2.0.

Updated Sticky blocks where used.

Enhanced Documentation.

Enhanced hs.scroll-nav.js file.

Fixed Anchor offset issue in the Documentation pages.

Fixed home/onepage-saas.html Pricing block's SVG component (.ie-abstract-shapes-11) in IE browser.

2.0 - 07 November, 2018

New 3 home pages

New Invoice page

New FAQ pages

New IE supported now

New Utility classes

New List group

New Header gradient option

New Toggle topbar Header option

New Set of new SVG Icons

New Login pages

New Player.js plugin

New SVG-injector plugin

New Range Slider plugin

Updated Animate.css

Updated Popper.js

Updated Bootstrap-select

Updated Typed.js

Enhanced unfold.js (Dropdown) accessibility


Fixed Google Map degradation issue.

Fixed Bootstrap select style issue on page load

Fixed mega-menu.js click function

Fixed header-collapse not collapsing issue

Fixed hs.datatables.js pagination issue with .active state

Fixed Font size rendering

Fixed Font awesome prefix classing where fa- classes changed to fas-

Fixed hs.go-to.js plugin disappearing issue on scroll

Fixed pages/contacts-agency.html horizontal scrollbar issue on icon blocks.

Fixed home/classic-crypto.html Blog news's image alignment issue fixed with .w-100 class to the parent.

Fixed custombox visibility issue in IE.

Fixed pages/services-start-up.html pricing pagination issue.

Fixed horizontal scrolling issue in Subscribe forms.

Migrating to v2

Front v2 is a major rewrite of the entire template. The most notable changes are summarized below, followed by more specific changes to relevant components.

v2 comes with the bulk of breaking changes, hence, below are the breaking changes to bear in mind when moving from v1.3 to v2 or any older version of Front.

Breaking changes

  • Refactored nearly all components to use more un-nested class selectors instead of over-specific children selectors.
  • bootstrap.css file merged to the theme.css.
  • bootstrap.css file removed from all HTML-files.
  • Main Front SCSS file renamed to theme.scss.
  • Main Front CSS file renamed to theme.css.
  • Main Front JS file renamed to theme.js.
  • Helper JS files moved to the components folder.
  • $g- variable prefix dropped to optimize the variables with Bootstrap variables, and to avoid duplications.
  • Dropped Unfold styles in favor of Bootstrap .dropdown menu.
  • Switched from px-to-rem mixing to plain rem.
  • Dropped .u- prefix from utility classes.
  • Buttons
    • Dropped .u- prefix from button classes in favor of Bootstrap naming classes.
    • Renamed .u-button-*--air classes to .btn-*-soft.
  • Badges
    • Dropped .u- prefix from badge classes in favor of Bootstrap naming classes.
    • Improved badge positioning.
    • Renamed .u-badge-border-* classes to .badge-outline-*.
  • Forms
    • Renamed u-form-layouts in favor of Bootstrap naming classes.
    • Dropped some u-form-layouts classes and extended Bootstrap form classes.
    • Dropped .u- prefix from .u-file-attachment-* classes.
    • Dropped .u- prefix from .u-checkbox-* classes.
  • Components that are dropped in favor of .card
    • .u-pricing-v1, and .u-pricing-v2 classes
    • modal-windows
    • .u-blog-overlay-v1 class
    • .blog-masonry blocks.
    • shop/cart.html Shipment blocks
    • shop/checkout.html Order summary content
    • home/classic-crypto.html Bitcoin charts blocks
    • home/corporate-agency.html Team blocks
    • home/corporate-business.html Hero card blocks
    • home/corporate-business.html Pricing blocks
    • home/landing-house.html Products blocks
    • home/landing-job.html Hiring blocks
    • home/portfolio-agency.html Hire Us blocks
    • home/classic-marketing.html News and Features blocks
    • home/blog-start-up.html News blocks
    • home/blog-agency.html News blocks
    • Sidebar news blogs classes.
    • blog-classic News blocks.
    • blog-grid News blocks.
    • blog-list News blocks.
    • blog-masonry News blocks.
    • work-masonry News blocks.
    • work-modern News blocks.
    • home/landing-house.html Testimonials blocks
    • home/classic-consulting.html Testimonials blocks
    • home/blog-agency.html Testimonials blocks
    • shop/classic.html Product blocks
    • shop/masonry.html Product blocks
    • pages/privacy.html content.
    • pages/terms.html sticky-block nav.
    • pages/help.html sticky-block nav.
    • pages/services-agency.html Get Started with Front blocks.
    • shop/classic.html Testimonials blocks.
    • home/about-start-up.html Testimonials blocks.
    • account/members.html Members block.
    • account/members-list.html Members block.
    • account/activity.html Activity table block.
    • account/my-tasks.html Tasks table block.
    • account/plans.html Pricing blocks.
    • account/projects-list.html Projects blocks.
    • account/profile.html Sibebar blocks.
  • Components that are dropped in favor of .list-group
    • All Footers list groups.
    • account/profile.html List groups.
    • pages/terms.html sticky-blocks.
    • pages/help.html sticky-blocks.
  • Dropped Cubeportfolio plugin from .blog-masonry blocks.
  • Dropped .u- prefix from progress-vertical classes.
  • Dropped .u-info-v1, and .u-info-v2 classes, and replaced with .card-frame class.
  • Dropped mixins/_breakpoint.scss in favor of Bootstrap mixins.
  • Dropped list-style.scss file and replaced with Bootstrap list-groups.
  • Dropped .u-md-avatar in favor of .u-avatar class.
  • Updated hs.chart-pie.js.
  • Refactored position classes in favor of Bootstrap naming classes. See Position classes.
  • Refactored video-player blocks. See Video Player.
  • Refactored hs.chart-pie.js file.
  • Stats blocks in the home/classic-consulting.html file are not dynamic rather than static SVG.
  • Previous Front content spacing utility classes rewritten with $content-space mixins and renamed in favor of Bootstrap naming classes. See Spacing classes.
  • Renamed $midnightblue to the Bootstrap's $indigo variable.
  • Renamed $social-network-colors to $secondary-colors.
  • Renamed .u-font-size-* to .font-size-*. See Font size classes.

Global changes

  • SVG
    • Refactored SVG elements to make their classes and IDs unique to give them unique styles.
    • Plain SVG codes removed from HTMl-pages and called through img tag.
  • Dropped skippy across all HTML-pages.


  • Dropped front.scss, front-core.scss, and front-components.scss SCSS files. All these files merged to the theme.scss file. Since there was no a reason to divide them.
  • Removed the unused _staggered-transition-delay.scss mixin. It was just extra code.
  • Dropped _space.scss file.
  • Dropped overflow: hidden; from main tag.
  • Dropped body and html tag styles to use stick to the Bootstrap Reboot.
  • Dropped _modal-window-account.scss, _modal-window-shopping-cart.scss, and _modal-window-subscribe.scss files, since their only style was width. However, their styles are now given through HTML inline style.
  • Dropped _news-blog-overlay-v1.scss class in favor of utility classes. Use Background gradient overlay classes instead now.
  • Dropped scss/front/unfold/ folder.
  • Dropped .u-icon in favor of .btn classes.
  • Dropped search-classic style in favor of utility classes.
  • Dropped shopping-cart style in favor of explicit .card classes.
  • Dropped duplicated Sidebar examples from header-layouts.html page.
  • Dropped .u-sidebar--cart and u-sidebar__content--cart classes for simplicity's sake.
  • Dropped exit-intend plugin from home/blog-agency.html page.
  • Dropped forms/toggle-state/ folder.
  • Dropped forms/form-steps/ folder.
  • Dropped .u-form-steps classes in favor of .nav classes. Use Nav classes instead now.
  • Dropped Instagram plugin from demo pages due to a continuous data token error. However, the plugin is still available in the Documentation page.
  • Dropped px-to-rem mixin in favor of plain rem.
  • $accent-colors dropped.
  • Dropped @icon-elements mixin in favor of plain SCSS style.
  • Dropped .theme-color function.
  • Removed the unused .mx-gutters-5 class.
  • Dropped .u-form--modern in favor of a default form style.


  • Moved scss/vendor/ folder to the scss/front/ folder.
  • Moved scss/vendor/bootstrap.scss file to the scss/ folder.
  • scss/mixins/_border-radius.scss optimized.
  • scss/mixins/_buttons.scss optimized.
  • Large and responsive spacing issues on small devices optimized.
  • footers optimized.
  • Moved _typo-font-sizes.scss and _typo-font-weight.scss utilities to the utilities/_text.scss file.
  • Moved scss/front/colors/ utility folder to the scss/front/utilities/ folder.
  • Moved scss/front/links/ utility folder to the scss/front/utilities/_links.scss folder.
  • Merged _height.scss utility file with _sizing.scss file.


  • Dropped data-bg-img-src JS function in favor of HTML inline style.
  • Dropped $teal-darker, $cyan-darker, $red-darker colors.
  • .u-sidebar--cart__footer-offset class renamed to .u-sidebar__cart-footer-offset.
  • Renamed scss/vendor/_border-radius.scss file to _border.scss.
  • @media breakpoint sizes are fixed according to Bootstrap's latest changes.
  • _area-chart.scss file moved to scss/front/vendor/area-chart/_area-chart.scss folder.
  • datatable/ folder moved to scss/front/vendor/ folder.
  • datepicker/ folder moved to scss/front/vendor/ folder.
  • forms/select/ folder moved to scss/front/vendor/ folder.
  • forms/summernote/-editor folder moved to scss/front/vendor/ folder.
  • forms/tagsinput/ folder moved to scss/front/vendor/ folder.
  • Replaced .u-labels on Blog pages with .btn classes.
  • Replaced SVG background .content-centered class to .content-centered-y in pages/maintenance-mode.html page.
  • Replaced SVG background .content-centered class to .content-centered-y in pages/privacy.html page.
  • Replaced SVG background .content-centered class to .content-centered-y in portfolio/case-studies-modern.html page.
  • Replaced Video Background's SVG background .content-centered class to .content-centered-y in pages/careers.html page.
  • Replaced assets/img/64x64/ images with 100x100 images due to low quality.
  • Bootstrap's $indigo variable enabled.
  • img tags are now wrapped with .u-*-avatar classes for better usability.
  • .u-*-avatar sizes are improved to match the .btn-icon sizes.
  • Added data-adaptive-height="true" to the Pricing section to the home/classic-consulting.html, and pages/pricing.html pages.
  • Changed .u-slick--gutters-3 from 16px to 15px.

Class changes

Front v1.x Front v2
.u-button-*--air .btn-*-soft
.u-badge-border-* .badge-outline-*
.u-font-size-14 .font-size-1
.u-font-size-20 .font-size-2
.u-font-size-32 .font-size-3
.u-font-size-48--md-down .font-size-md-down-5
.u-card-header .card-collapse
.u-select .dropdown-select
.u-toggle__toggle .link-muted__toggle and .btn__toggle
.u-checkbox-brd .checkbox-outline
.u-indicator-ver-dashed .u-indicator-vertical-dashed
.u-paging-v1 .u-paging-modern
.u-blog-thumb-v1 .u-blog-thumb-minimal
.u-gmap-v1 .u-gmap-interactive
.u-stats-v1 .u-stats-progress
.u-stats-v2 .u-area-chart
.u-slick-paging-v1 .u-slick-paging
.u-slick-pagination-testimonials-v1 .u-slick-pagination-interactive
.opacity-0_2 .opacity-md
.u-file-attachment-v1 .u-file-attachment-link
.text-light .text-white-70
.u-bg-transparent .btn-bg-transparent
.u-checkbox-btn .btn-custom-toggle-primary
.u-icon .btn
.u-icon--xs .btn-xs.btn-icon
.u-icon--sm .btn-sm.btn-icon
.u-icon--md .btn-icon
.u-icon--lg .btn-lg.btn-icon
.u-icon__inner .btn-icon__inner
.u-icon__inner .btn-icon__inner
.u-icon__inner .btn-icon__inner-bottom-minus
.u-icon--* .btn-*
.u-icon-*--air .btn-soft-*
.z-index-minus-1 .z-index-n1
.ml-offset-2 .ml-n2
.ml-offset-3 .ml-n3
.mt-offset-1 .mt-n1
.mt-offset-5 .mt-n5
.mt-offset-6 .mt-n6
.mt-offset-9 .mt-n9
.mt-offset-23 .mt-n23
.mb-offset-3 .mb-n3
.mb-offset-9 .mb-n9

1.3 - 05 August, 2018

New Account pages added

New Circles (Pie Charts) added

New Datatables added

New Flatpickr added

New Bootstrap Select added

New Bootstrap Tagsinput added

New Summernote WYSIWYG Editor added

New Toggle state added

New Utility classes

Updated Bootstrap updated from 4.1.1 to 4.1.3

Updated FontAwesome Icon Package updated from 5.0.13 to 5.4.1

Updated Cubeportfolio updated from 4.3.4 to 4.4.0

Removed <meta http-equiv="x-ua-compatible" content="ie=edge"> in all HTML files.

Fixed Instagram Image resolution

Fixed Header Nav Link icon rotation

Fixed .info-v2 changed to .u-info-v2 at the following pages:

  1. starter/pricing.html
  2. starter/info.html
  3. home/landing-job.html
  4. home/corporate business.html

Fixed Logo alignment issue at the following pages:

  1. starter/headers/header-default-one-page-navigation.html
  2. starter/headers/header-default-one-page-navigation-with-dropdown.html
  3. starter/headers/header-default-one-page-navigation-with-dropdown-links.html

Fixed Scrollbar issue at the following pages:

  1. starter/headers/header-default-floating.html
  2. starter/headers/header-default-absolute-second-screen.html
  3. starter/headers/header-default-absolute-bottom.html

Enhanced Scrollbar optimization stylesheets

  1. _header-floating.scss
  2. _header-absolute-position.scss

Enhanced vertical-align: baseline; added to our SVG styles.

Enhanced Bordered Badge colors in _badge-style.scss updated

Enhanced Vertical progress bar

Enhanced Bootstrap Popover enabled

1.2 - 05 June, 2018

New Landing House Home page added

New Landing Job Home page added

New Corporate Business Home page added

New Tables documentation page added

New Utility classes added

Fixed starter/headers/header-sidebar-right.html menu links fixed.

Fixed "Dark-to-white on scroll" wrong linking issue fixed on starter/header-layouts.html.

Fixed confirm_password init function changed to confirmPassword.

Fixed Search Classic visibility issue fixed

Enhanced hs.go-to.js - Now you can use it as a link

Enhanced Documentation

1.1 - 13 May, 2018

New Sketch version added

Updated FontAwesome Icon Package updated from 5.0.6 to 5.0.13

Fixed scss/dropdown/ folders and its _dropdown.scss along with _dropdown-country.scss files changed to unfold

Fixed slick-carousel-preloader-black.svg file name renamed to slick-carousel-preloader-primary.svg

Fixed Instagram API invalid token issue fixed

Fixed Wrong spelling of the .text-lu-left and .text-lu-right classes fixed at the following pages:

  1. home/blog-agency.html
  2. pages/careers.html
  3. portfolio/case-studies-modern.html
  4. starter/hero/hero-12.html
  5. starter/form-layouts.html pages

Fixed data-compensation="#header" attribute removed from content "go-to" markups at the following pages:

  1. home/careers.html
  2. home/crypto.html
  3. shop/classic.html
  4. shop/masonry.html
  5. starter/hero-2.html
  6. starter/hero-19.html
  7. starter/hero-33.html
  8. starter/hero-34.html

1.0 - Initial release.