Logo v4.3.1
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v4.3.1
  • Docs
  • Snippets
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Duotone Icons
  • Illustrations
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • Icons
  • List Group
  • Lists
  • Legend Indicator
  • Modal
  • Offcanvas
  • Page Header
  • Pagination
  • Popovers
  • Progress
  • Profile
  • Shapes
  • Spinners
  • Steps
  • Tab
  • Tables
  • Text Highlight
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Advanced Forms
  • Advanced Select
  • File Attachments
  • Drag’ n’ Drop File Uploads
  • WYSIWYG Editor
  • Quantity Counter
  • Input Mask
  • Step Forms (Wizards)
  • Range Slider (noUiSlider)
  • Add Field
  • Toggle Password
  • Count Characters
  • Toggle Switch
  • Toggle State
  • Switch
  • Media
  • Fullscreen Lightbox
  • Video Background
  • Video Player
  • Swiper
  • Others
  • Maps (Leaflet)
  • Chart.js
  • Circles.js (Pie Chart)
  • Sticky Block
  • Countdown
  • Sorting (Shuffle.js)
  • Go To
  • Show Animation
  • Typed.js
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Links
  • Position
  • Rotations
  • Shadows
  • Sizing
  • Spacing
  • Z-index

v3.3.1 - 27 April, 2021

Fixed Progress Animation Fixed animation for horizontal progress bar on load the page.
Fixed Coloring issue when Search Push Top is active
Enhanced Sign In and Sign Up layout pages
Updated Bootstrap from v4.5.3 to v4.6.0

List of updated SCSS-files/folders:

  • assets/scss/front/utilities/_sizing.scss
  • assets/scss/front/headers/_header-white-nav-links.scss

List of updated HTML-files:

  • page-login.html
  • page-signup.html

v3.3 - 03 December, 2020

Introducing new powerful Gulp Toolkit

Over the past years, we've been asked many times how to automatically prepare the optimized build package, auto path detection, passing variables over HTML and SVG files and lots of others. We are happy to introduce the new powerful Gulp Toolkit which covers all and even more. Learn more at Gulp Page for more details.

Please note, v3.3.0 comes with a new File Structure including with a few global changes to make the development process fast and scalable than ever before in Front.

New Gulp Toolkit
New Real Estate (5 Pages)
New Jobs (9 Pages)
New Sign Up modal
New Submit app page for the App Marketplace demo
New Count characters plugin
New Card no gutters option
New HS Nav Scroller plugin
New HS Step Form slide to top option
New Profile cover component
New Page Header component
Fixed Checkbox Bookmark component
Fixed HS Unfold "Spacebar" keyboard issue on iPhone X
Enhanced Added new utility classes
Enhanced Step component
Enhanced Dropdown item hover effect
Enhanced CSS divider
Enhanced Blockquote styles
Enhanced The CSS psuedo icons, now SVG based
Enhanced JS code comment section in the HTML-pages only
Enhanced Extended utility classes
Updated Bootstrap from v4.5 to v4.5.3
Updated File attach new options added
Updated Typedjs now via data attributes
Updated Ion Range Slider
Updated Fancybox

List of new JS-files/folders:

  • assets/vendor/hs-nav-scroller/
  • assets/vendor/hs-count-characters/

List of new SCSS-files/folders:

  • assets/scss/front/blockquote/_blockquote.scss
  • assets/scss/front/hero/
  • assets/scss/front/forms/checkbox/_checkbox-bookmark.scss
  • assets/scss/front/page-header/
  • assets/scss/front/profile/
  • assets/scss/front/vendor/hs-nav-scroller/

List of dropped SCSS-files/folders:

  • assets/scss/front/divider/_divider-sizes.scss
  • assets/scss/front/forms/bookmark/_bookmark-checkbox.scss

List of updated JS-files/folders:

  • assets/js/hs.validation.js
  • assets/js/hs.fancybox.js
  • assets/js/hs.select2.js
  • assets/js/hs.typed.js
  • assets/js/hs.chartjs.js
  • assets/vendor/hs-step-form/
  • assets/vendor/hs-file-attach/
  • src/assets/vendor/hs-unfold/
  • src/assets/vendor/chart.js.extensions/chartjs-extensions.js

List of updated SCSS-files/folders:

  • assets/scss/front/_variables.scss
  • assets/scss/front/avatar/_avatar.scss
  • assets/scss/front/breadcrumb/_breadcrumb.scss
  • assets/scss/front/buttons/_button-custom.scss
  • assets/scss/front/buttons/_button-soft.scss
  • assets/scss/front/dropdown/_dropdown.scss
  • assets/scss/front/headers/_header-default.scss
  • assets/scss/front/headers/_header-white-nav-links.scss
  • assets/scss/front/forms/checkbox/_checkbox-icon.scss
  • assets/scss/front/forms/states/_states.scss
  • assets/scss/front/divider/_divider.scss
  • assets/scss/front/navs/_navs.scss
  • assets/scss/front/slick/arrows/_slick-arrow.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-breakpoints.scss
  • assets/scss/front/step/_step-centered.scss
  • assets/scss/front/step/_step-colors.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-inline.scss
  • assets/scss/front/step/_step-states.scss
  • assets/scss/front/step/_step-timeline.scss
  • assets/scss/front/utilities/_borders.scss
  • assets/scss/front/utilities/_gradients.scss
  • assets/scss/front/utilities/_gradients-overlay.scss
  • assets/scss/front/utilities/_transitions.scss
  • assets/scss/front/vendor/select2/_select2.scss
  • assets/scss/front/vendor/ion-range-slider/_select2.scss

Breaking changes:

  • .step-inline-title changed to .step-title
  • navy color changed to dark
  • dark color changed to gray-900
  • data-chartjs-options='{}' data attribute changed to data-hs-chartjs-options='{}'

Renamed classes

Front v3.2.2 Front v3.3
.gradient-y-overlay-sm-dark .gradient-y-overlay-sm-gray-900
.gradient-x-overlay-sm-navy .gradient-x-overlay-sm-dark
.gradient-x-overlay-lg-navy .gradient-x-overlay-lg-dark
.gradient-x-overlay-lg-navy-video .gradient-x-overlay-lg-dark-video

v3.2.2 - 30 July, 2020

Fixed Unfold JS error
Fixed Privacy Page UI enhancement

List of updated JS-files/folders:

  • assets/vendor/hs-unfold

List of updated HTML-files:

  • html/pages/privacy.html

v3.2.1 - 11 June, 2020

Enhanced Account pages on mobile screen

List of updated SCSS-files/folders:

  • assets/scss/front/forms/_custom-form.scss
  • assets/scss/front/navbar/_navbar-vertical.scss

v3.2 - 09 June, 2020

New Account (9 Pages)
New Input mask library
New Quill library
New Select2 library
New Add Field HS library
New Text Highlight component
New Legend indicator component
New Vertical Navbar component
Fixed Video player icon moving issue on hover
Fixed Unfold JS error
Fixed Mega Menu Click event
Fixed Added missing ID to Hire Us section to OnePage SASS demo
Fixed Added missing unfold.js library to OnePage SASS and Classic Software demos
Enhanced Extended utility classes
Enhanced Added Avatar options
Enhanced Added White button option
Enhanced Added Cards options
Enhanced Added Breadcrumb Light option
Enhanced Added Forms options
Enhanced Added List group option
Enhanced Added Modal option
Enhanced Added Navs & Tabs options
Enhanced Added Tables options
Enhanced Extended functionalities of HS Video Player library
Enhanced Extended functionalities of HS File Attach library
Enhanced Video background in Classic Studio improved on smaller devices
Enhanced Hero in Help Desk page
Enhanced Soft Alert style link color
Updated Bootstrap from v4.4.1 to v4.5
Updated jQuery from v3.3.1 to v3.5.1
Updated jQuery Migrate from v3.0.1 to v3.3.0
Updated HS File-attach
Updated HS Go-to
Updated HS Mega-menu
Updated HS Unfold
Updated HS Video-player
Dropped Bootstrap Select and Tagify library in favor of Select2
Dropped Summernote library in favor of Quill
Dropped Datatables, Flatpickr and Password Strength libraries as lack of use cases at the current versions of Front. However, if you need them for some reaons, you may refer to the previouse version of Front's Documentation (e.g. v3.1.1)

List of updated HTML-files:

  • html/index.html
  • html/onepage-saas.html
  • html/classic-software.html
  • html/demo-course/listing.html
  • html/demo-help-desk/index.html
  • html/demo-app-marketplace/index.html

List of updated SCSS-files/folders:

  • assets/scss/front/_variables.scss
  • assets/scss/front/avatar/_avatar.scss
  • assets/scss/front/avatar/_avatar-sizes.scss
  • assets/scss/front/badge/_badge-soft.scss
  • assets/scss/front/buttons/_button-custom.scss
  • assets/scss/front/breadcrumb/_breadcrumb.scss
  • assets/scss/front/card/_card.scss
  • assets/scss/front/dropdown/_dropdown.scss
  • assets/scss/front/forms/_form.scss
  • assets/scss/front/forms/_form-merge.scss
  • assets/scss/front/forms/checkbox/_checkbox-icon.scss
  • assets/scss/front/headers/_header-fullscreen-style.scss
  • assets/scss/front/links/_links.scss
  • assets/scss/front/navs/_navs.scss
  • assets/scss/front/media/_video-player.scss
  • assets/scss/front/modal/_modal.scss
  • assets/scss/front/table/_table.scss
  • assets/scss/front/utilities/_text-colors.scss
  • assets/scss/front/vendor/hs-unfold/_hs-unfold.scss
  • assets/scss/front/mixins/_alert.scss

List of new SCSS-files/folders:

  • assets/scss/front/forms/custom-forms/_custom-forms.scss
  • assets/scss/front/forms/checkbox/_checkbox-switch.scss
  • assets/scss/front/navbar/_navbar.scss
  • assets/scss/front/navbar/_navbar-vertical.scss
  • assets/scss/front/legend-indicator/_legend-indicator.scss
  • assets/scss/front/list/_list-group.scss
  • assets/scss/front/navs/_nav-list.scss
  • assets/scss/front/vendor/_select2.scss
  • assets/scss/front/text-highlight/_text-highlight.scss
  • assets/scss/front/mixins/_text-highlight.scss

List of new JS-files (HS extended):

  • assets/js/hs.quill.js
  • assets/js/hs.select2.js
  • assets/js/hs.mask.js

v3.1.1 - 15 April, 2020

New Added Step Avatars and Last item borderless compontents
Enhanced Updated illustrations in Course, Error 404, Maintenance Mode, Coming Soon and Cart Empty pages
Enhanced Added Starter Template snippet code to Documentation Introduction page
Enhanced hs.summernote.js and hs.dropzone.js libraries source code
Enhanced SCSS variables

List of updated SCSS-files/folders:

  • assets/scss/front/_variables.scss
  • assets/scss/front/breadcrumb/_breadcrumb.scss
  • assets/scss/front/buttons/_button-soft.scss
  • assets/scss/front/card/_card.scss
  • assets/scss/front/dropdown/_dropdown.scss
  • assets/scss/front/forms/_form-flush.scss
  • assets/scss/front/forms/_form-merge.scss
  • assets/scss/front/navs/_navs.scss
  • assets/scss/front/step/_step.scss
  • assets/scss/front/step/_step-icon.scss
  • assets/scss/front/vendor/datatables/_datatables.scss
  • assets/scss/front/vendor/tagify/_tagify.scss

List of new SCSS-files/folders:

  • assets/scss/buttons/_button-outline.scss
  • assets/scss/front/step/_step-avatar.scss
  • assets/scss/front/step/_step-avatar-sizes.scss

List of updated JS-files (HS extended):

  • assets/js/hs.dropzone.js
  • assets/js/hs.summernote-editor.js
  • Changed from assets/include/upload.html to assets/include/dropzone-upload.html

v3.1 - 31 March, 2020

New Snippets pages
New Devices, File attach, Toggle switch, Modal, Popovers, Tabs, and Tooltips documentation pages
New Utility classes
Enhanced HS-Unfold plugin
Enhanced Link hover color on "Course" demo pages
Fixed Default .avatar border-radius
Fixed .avatar-group alignment
Fixed assets/js/ files JS errors when using .theme.min.js
Dropped .nav-borderless
Dropped .nav-icon in favor of step components

Breaking changes:

  • .card-shadow-on-hover changed to .card-hover-shadow

List of dropped SCSS-files/folders:

  • assets/scss/front/sticky-footer/ folder
  • assets/css/sticky-footer.css file

List of updated SCSS-files/folders:

  • assets/scss/front/_variables.scss
  • assets/scss/front/navs/_navs.scss
  • assets/scss/front/avatar/_avatar.scss
  • assets/scss/front/avatar/_avatar-group.scss
  • assets/scss/front/search-forms/_search-form-slide-down.scss
  • assets/scss/front/tagify/_tagify.scss
  • assets/scss/front/utilities/_text-colors.scss

List of updated plugins:

  • assets/vendor/hs-unfold/

List of new plugins:

  • assets/vendor/hs-file-attach/

Migrating to v3

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

The most notable improvements made in Front v3.0

  • Design - almost all pages are redesigned with a new fresh look.
  • JavaScript - all scripts are fully re-written from scratch, in the last two years since Front is released we have recieved lots of feedback from users and implimented all of them making Front's JavaScript to scale in any level.
  • HTML - fully rid of BEM CSS naming convention in favor of Bootstrap naming classes to match Fronts components codes as native as Bootstrap components codes.
  • CSS/SCSS - extended components variables to make customization experience even better.

v3.0 - 19 March, 2020

New Course demo - comes with three additional inner pages
New Nav Wrap header option that keeps secondary contents, like, "Buy Now" or search buttons always visible across all resolutions
New Bootstrap dropdown examples that do not require hs.megamenu plugin to work
New assets/scss/animation/ components
New Utility classes
Fixed .search-slide-down width issue on smaller resolution
Enhanced Redesigned almost all Home Pages except Home App pages
Enhanced Design of supporting pages (e.g. Portfolio, Careers, Pricing etc.)
Enhanced Design of Blog pages
Enhanced Standardized font weight styles across pages
Enhanced Poppins font replaced with Open-Sans
Enhanced heading and p tags styles rewritten and enhanced
Enhanced Switch style _custom-switch.scss changed to _toggle-switch.scss and completely rewritten
Enhanced Font icons changed from <span></span> and <small></small> tags to the <i></i> tag
Enhanced .btn-custom-toggle-* and .btn components
Enhanced .box-shadow-sm class value
Enhanced .btn-outline-secondary border color
Enhanced custom .fadeInUp class CSS parameters
Enhanced avatar classes grouped with a .avatar-group class
Enhanced Step Form works without validation now
Enhanced Video background resolution on smaller devices in the Classic Studio home page
Enhanced Default alert style - now alerts come with 2 styles solid (default) and soft colors
Enhanced Header completely rewritten
Enhanced SCSS variables

Most noticeable dropped sources:

  • Sketch file. Due to many complains of version difference between Front HTML and Front Sketch files. This has been huge issue to maintain at the same version both Sketch and HTML version of Front since they are two different purpose products. However, we will consider adding design version (Sketch or Figma) of Front as a separate product in future.
  • design folder - logo sources can be found at assets/svg/logos/..
  • Crypto Landing demo page.

Breaking changes

  • .u- class prefix to optimize the classes with Bootstrap utility classes
  • All JS-files moved from assets/js/components to the assets/js/ path.
  • All JS-files from assets/js completely rewritten.
  • SVG elements called via .img-fluid class instead of .js-svg-injector class.
  • Bootstrap JS path updated from node_modules/bootstrap/dist/js/bootstrap.min.js to node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.
  • assets/vendor/font-awesome/css/fontawesome-all.min.css changed to node_modules/@fortawesome/fontawesome-free/css/all.css.
  • slickPaging changed to counter.
  • hs-bg-video changed to hs-video-bg.
  • hs.datepickr.js changed to hs.flatpickr.js.
  • hs.range-slider.js changed to hs.ion-range-slider.js.
  • hs.char-pie.js changed to hs.circles.js.
  • hs.password-strength.js changed to hs.pwstrength.js.

Renamed classes

Front v3.2.2 Front v3.3
.min-width-3 .min-w-3rem
.min-width-4 .min-w-4rem
.min-width-8 .min-w-8rem
.min-width-21 .min-w-21rem
.max-width-3 .max-w-3rem
.max-width-4 .max-w-4rem
.max-width-5 .max-w-5rem
.max-width-6 .max-w-6rem
.max-width-7 .max-w-7rem
.max-width-8 .max-w-8rem
.max-width-9 .max-w-9rem
.max-width-10 .max-w-10rem
.max-width-11 .max-w-11rem
.max-width-13 .max-w-13rem
.max-width-15 .max-w-15rem
.max-width-19 .max-w-19rem
.max-width-23 .max-w-23rem
.max-width-27 .max-w-27rem
.max-width-33 .max-w-33rem
.max-width-35 .max-w-35rem
.max-width-40 .max-w-40rem
.max-width-50 .max-w-50rem
.height-4 .h-4rem
.height-250 .h-250rem
.height-380 .h-380rem
.min-height-270 .min-h-270rem
.min-height-300 .min-h-300rem
.min-height-380 .min-h-380rem
.min-height-4540 .min-h-4540rem
.min-height-500 .min-h-500rem
.min-height-620 .min-h-620rem
.height-md-30vh .vh-md-30
.height-md-70vh .vh-md-70
.min-height-md-100vh .min-vh-md-100
.height-lg-100vh .vh-lg-100
.min-height-lg-100vh .min-vh-lg-100
.min-height-lg-600 .min-h-lg-600rem
.link-muted .link-underline
.custom-checkbox .toggle-switch
.datepicker .flatpickr
.card-btn-arrow .card-btn-toggle
.btn__toggle-toggled .btn-toggle-toggled
.btn__toggle-default .btn-toggle-default
.gradient-overlay-half-dark-video-v1 .gradient-x-overlay-lg-dark-video
.gradient-overlay-half-indigo-v1 .gradient-x-overlay-sm-indigo
.fullscreen__submenu-list-link .fullscreen-submenu-list-link
.fullscreen__submenu-list .fullscreen-submenu-list
.fullscreen__submenu-nav-link .fullscreen-submenu-nav-link
.fullscreen__submenu .fullscreen-submenu
.fullscreen__nav-link .fullscreen-nav-link
.fullscreen__nav-list .fullscreen-nav-list
.fullscreen__nav .fullscreen-nav
.fullscreen__overlay .fullscreen-overlay
.fullscreen__container .fullscreen-container
.fullscreen--showed .fullscreen--showed
.fullscreen--toggler .fullscreen--toggler
.header--floating__inner .header-floating-inner
.header--floating-xl .header-floating-xl
.header--floating-lg .header-floating-lg
.header--floating-md .header-floating-md
.header--floating-sm .header-floating-sm
.header--floating .header-floating
.header--invulnerable-xl .header-invulnerable-xl
.header--invulnerable-lg .header-invulnerable-lg
.header--invulnerable-md .header-invulnerable-md
.header--invulnerable-sm .header-invulnerable-sm
.header--invulnerable .header-invulnerable
.header--change-appearance-xl .header-change-appearance-xl
.header--change-appearance-lg .header-change-appearance-lg
.header--change-appearance-md .header-change-appearance-md
.header--change-appearance-sm .header-change-appearance-sm
.header--change-appearance .header-change-appearance
.header--toggle-section-xl .header-toggle-section-xl
.header--toggle-section-lg .header-toggle-section-lg
.header--toggle-section-md .header-toggle-section-md
.header--toggle-section-sm .header-toggle-section-sm
.header--toggle-section .header-toggle-section
.header--abs-top-xl .header-abs-top-xl
.header--abs-top-lg .header-abs-top-lg
.header--abs-top-md .header-abs-top-md
.header--abs-top-sm .header-abs-top-sm
.header--abs-top .header-abs-top
.header--abs-sticky-top-xl .header-abs-sticky-top-xl
.header--abs-sticky-top-lg .header-abs-sticky-top-lg
.header--abs-sticky-top-md .header-abs-sticky-top-md
.header--abs-sticky-top-sm .header-abs-sticky-top-sm
.header--abs-sticky-top .header-abs-sticky-top
.header--abs-show-hide-xl .header-abs-show-hide-xl
.header--abs-show-hide-lg .header-abs-show-hide-lg
.header--abs-show-hide-md .header-abs-show-hide-md
.header--abs-show-hide-sm .header-abs-show-hide-sm
.header--abs-show-hide .header-abs-show-hide
.header--static-xl .header-static-xl
.header--static-lg .header-static-lg
.header--static-md .header-static-md
.header--static-sm .header-static-sm
.header--static .header-static
.header--change-logo .header-change-logo
.header--untransitioned .header-untransitioned
.header--moved-up .header-moved-up
.header--invisible .header-invisible
.header--faded .header-faded
.header--fix-top .header-fix-top
.header__mega-menu-position-right-fix--md .mega-menu-position-right-fix-md
.header__mega-menu-position-right-fix--xl .mega-menu-position-right-fix-xl
.header__mega-menu-wrapper .mega-menu-body
.header__mega-menu .header-mega-menu
.header--white-nav-links .header-white-nav-links
.header--navbar-bg .header-navbar-bg
.header--white-bg-on-scroll .header-white-bg-on-scroll
.header--bg-transparent .header-bg-transparent
.header--hide-topbar .header-hide-topbar
.header__hide-content .header-hide-content
.header__product-banner-content .navbar-product-banner-content
.header__product-banner .navbar-product-banner
.header__banner-content .navbar-banner-content
.header__banner .navbar-banner
.header__promo-card-footer-ver-divider .navbar-promo-card-footer-ver-divider
.header__promo-card-footer-item .navbar-promo-card-footer-item
.header__promo-card-footer .navbar-promo-card-footer
.header__promo-card-text .navbar-promo-card-text
.header__promo-card-title .navbar-promo-card-title
.header__promo-card-icon .navbar-promo-card-icon
.header__promo-card-body .navbar-promo-card-body
.header__promo-card-deck .navbar-promo-card-deck
.header__promo-card .navbar-promo-card
.header__promo-link .navbar-promo-link
.header__promo-item .navbar-promo-item
.header__promo-inner .navbar-promo-inner
.header__promo .navbar-promo
.header__nav-item .navbar-nav-item
.header-navbar-brand .navbar-brand
.header__navbar-body .navbar-body
.header__navbar-link .navbar-link
.header-navbar-brand .header-navbar-brand
.header__navbar .header-navbar
.header__nav-last-item .header-nav-last-item
.header__navbar-nav .header-navbar-nav
.header__sub-menu-nav-link-toggle .nav-link-toggle
.header__sub-menu-nav-link .header-sub-menu-nav-link
.header__sub-menu-nav-group .header-sub-menu-nav-group
.header__section--hidden .header-section-hidden
.header__section .header-section
.datatable__thead-icon .datatable-thead-icon
.datatable__trigger-icon .datatable-trigger-icon
.datatable__trigger .datatable-trigger
.datatable__content .datatable-content
.datatable__striped .datatable-striped
.content-centered-y--lg .content-centered-y-lg
.content-centered-y--md .content-centered-y-md
.stats-progress__info .stats-progress-info
.slick--pagination-modern .slick-pagination-modern
.slick-pagination-interactive__title .slick-pagination-interactive-title
.slick-pagination-interactive__text .slick-pagination-interactive-text
.slick__pagination--vertical .slick-pagination-vertical
.slick__pagination--white .slick-pagination-white
.slick__pagination .slick-pagination
.slick__counter-total .slick-counter-total
.slick__counter-divider .slick-counter-divider
.slick__counter-current .slick-counter-current
.slick-arrow-centered--y .slick-arrow-centered-y
.slick-arrow--offset .slick-arrow-offset
.slick-arrow--flat-white .slick-arrow
.slick-arrow--flat .slick-arrow-primary
.slick-arrow--white .slick-arrow-soft-white
.slick-arrow-right .slick-arrow-right
.slick-arrow-left .slick-arrow-left
.slick__arrow .slick-arrow
.slick--gutters-3 .slick-gutters-3
.slick--gutters-2 .slick-gutters-2
.slick--gutters-1 .slick-gutters-1
.slick--equal-height .slick-equal-height
.sidebar--left .sidebar-left
.sidebar__footer .sidebar-footer
.sidebar__scroller .sidebar-scroller
.sidebar__container .sidebar-container
.sidebar__content--account .sidebar-content-account
.sidebar__content .sidebar-content
.sidebar__body .sidebar-body
.search-slide-down-suggestions .search-slide-down__suggestions
.search-slide-down__input .search-slide-down-input
.search-slide-down-trigger__icon .search-slide-down-trigger-icon
.search-push-top__banner .search-push-top-banner
.search-push-top__close-btn .search-push-top-close-btn
.search-push-top__content .search-push-top-content
.page-preloader__content-centered .page-preloader-content-centered
.page-preloader__content-centered .page-preloader-content-centered
.video-player__centered .video-player-centered
.video-player__icon .video-player-icon
.video-player__btn .video-player-btn
.video-player__played .video-player-played
.video-player__preview .video-player-preview
.media-viewer-icon--active .media-viewer-icon-active
.media-viewer__container .media-viewer-container
.media-viewer__icon .media-viewer-icon
.link-muted__toggle-toggled .link-underline-toggle-toggled
.link-muted-toggle__default .link-underline-toggle-default
.link-collapse__default .link-collapse-default
.link-collapse__active .link-collapse-active
.link__icon .link-icon
.indicator-steps .step-flow
.indicator-steps__inner .step-flow-inner
.go-to__inner .go-to-inner
.checkbox-outline-input .checkbox-outline-input
.checkbox-outline-label .checkbox-outline-label
.checkbox-icon__input .checkbox-icon-input
.checkbox-icon__label .checkbox-icon-label
.file-attachment-input .file-attachment-btn
.file-attachment-btn__label .file-attachment-btn-label
.divider--text .divider-text
.divider--xs .divider-xs
.js-select .js-selectpicker
.js-range-slider .js-ion-range-slider
.slick__paging .slick-counter
.btn-icon.btn-sm .btn-icon.btn-xs
.btn-text-* .btn-ghost-*
.opacity-lg .opacity-xs
.form-label .input-label

List of dropped JS-files (HS extended):

  • assets/js/file-attachement.js file
  • assets/js/hs.scroll-effect.js file
  • assets/js/hs.svg-injector.js file
  • assets/js/hs.focus-state.js file

List of dropped plugins/libraries:

  • assets/vendor/instafeed.js/ due to unstable API
  • assets/vendor/player.js/ in favor of assets/vendor/hs-video-player/
  • assets/vendor/malihu-custom-scrollbar-plugin/ in favor of a custom scrollbar
  • assets/vendor/chartist in favor of Chart.js
  • assets/vendor/bootstrap-tagsinput/ in favor of Tagify
  • assets/vendor/custombox/ in favor of Bootstrap modals
  • assets/vendor/animate.css library
  • assets/vendor/svg-injector/ library
  • assets/svg/components/circle-process-1.svg illustration
  • assets/svg/components/circle-process-2.svg illustration
  • assets/svg/components/circle-process-3.svg illustration

List of dropped SCSS-files/folders:

  • assets/scss/front/quantity/
  • assets/scss/front/vendor/fileuploader/
  • assets/scss/front/badges/_badge-positions.scss
  • assets/scss/front/badges/_badge-sizes.scss
  • assets/scss/front/hamburger/ in favor of navbar-toggle
  • assets/scss/front/mockups/_browser-v1.scss
  • assets/scss/front/mockups/_devices-v1.scss
  • assets/scss/front/mockups/_devices-v2.scss
  • assets/scss/front/mockups/_devices-v3.scss
  • assets/scss/front/mockups/_devices-v4.scss
  • assets/scss/front/modal-window/
  • assets/scss/front/forms/states/_focus-state.scss
  • assets/scss/front/paging/paging-modern.scss
  • assets/scss/front/go-to-section/_go-to-modern.scss
  • assets/scss/front/go-to-section/_go-to-vertical-arrow.scss
  • assets/scss/front/go-to-section/_go-to-wave.scss
  • assets/scss/front/timeline/_timeline.scss
  • assets/scss/front/svg/_svg.scss
  • assets/scss/front/vendor/animate.css/_animate.css.scss
  • assets/scss/front/mixins/_gradients.scss in favor of Bootstrap mixins

List of dropped SCSS variables:

  • $theme-color white option
  • $primary-darker
  • $primary-lighter
  • $warning-lighter
  • $success-lighter
  • $cyan-lighter
  • $red-lighter
  • $secondary-colors

List of dropped components:

  • Header - hamburger sidebars
  • Header - dropdown-menu dark
  • Header - navbar dark
  • Header - Primary
  • Header - Sticky Bottom
  • Header - Absolute Bottom
  • Header - Absolute top center aligned logo on top
  • Header - Second screen

List of dropped classes:

  • Responsive text classes in favor of Bootstrap Responsive font sizes (RFS)
  • .min-height-100vh in favor of the Bootstrap utility .min-vh-100 class
  • .card-text-dark
  • .go-to-modern in favor of .btn-icon class
  • .btn-sm-wide
  • .gmap-interactive
  • .cubeportfolio-reveal
  • .svg-divider-polygon
  • .close-light
  • .blog-thumb-minimal
  • .mt-23
  • .hero-v1 in favor of utility classes.
  • .cubeportfolio in favor of .label classes.
  • .font-weight-medium
  • .gradient-overlay-half-dark-v2
  • .gradient-overlay-half-dark
  • .gradient-overlay-half-info-v1
  • .gradient-overlay-half-primary-v4
  • .gradient-overlay-half-primary-v3
  • .gradient-overlay-half-primary-v2
  • .gradient-overlay-half-primary-v1
  • .gradient-half-info-v1
  • .gradient-half-warning-v3
  • .gradient-half-warning-v2
  • .gradient-half-warning-v1
  • .gradient-half-primary-v5
  • .gradient-half-primary-v4
  • .gradient-half-primary-v3
  • .gradient-half-primary-v2
  • .gradient-half-primary-v1
  • .gradient-half-primary-body-v1
  • .gradient-overlay-half-primary-video-v1 in favor of .gradient-x-overlay-lg-dark-video
  • .clients in favor of utility classes
  • .media-player in favor of .video-player
  • .indicator-dots in favor of .step-dots
  • .indicator-vertical-dashed in favor of .step-vertical
  • .timeline in favor of .step
  • .link-white in favor of .link-underline-light
  • .btn-white in favor of .btn-light
  • .btn-outline-white in favor of .btn-outline-light
  • .btn-soft-white in favor of .btn-soft-light
  • .btn-tiny in favor of .btn-xs
  • .avatar-tiny in favor of .avatar-xs
  • .sidebar-account-holder-img in favor of .avatar
  • .sidebar-account-holder-text in favor of utility classes
  • .sidebar-account-holder in favor of utility classes
  • .sidebar-content-account in favor of utility classes
  • .sidebar-footer-account-text in favor of utility classes
  • .sidebar-footer-account in favor of utility classes
  • .sidebar-cart-footer-offset in favor of .sidebar-footer-offset
  • .sidebar-account-footer-offset in favor of .sidebar-footer-offset
  • .sidebar-account-toggle-bg-img in favor of .label-avatar-img
  • .sidebar-account-toggle-bg-text in favor of .label
  • .sidebar-account-toggle-bg in favor of .label
  • .alert-text in favor of .text-inherit
  • .hamburger in favor of data-toggle attribute
  • .slick-pagination-centered--y class in favor of utility classes
  • .vertical-divider in favor of .column-divider
  • .indicator-vertical-line in favor of .column-divider
  • .mx-gutters-* in favor of Bootstrap negative utility classes
  • .btn-bg-transparent in favor of .btn-ghost-*
  • .stop-color-* colors in favor of inline coloring
  • .stroke-* colors in favor of inline colors
  • .fill-* colors in favor of inline colors
  • .list-group extended styles in favor of .nav
  • assets/scss/front/badge/ folder in favor of avatar, and icon status classes
  • .slick__pagination--bottom-center in favor of utility classes
  • .slick-arrow--inner
  • .header-navbar-brand-text
  • .header-navbar-brand-text-white
  • .header-navbar-brand-center
  • .card-text-dark in favor of utility classes
  • .badge-pos-*
  • .badge-outline-*
  • .header-navbar-no-space
  • .header-navbar-top-space
  • .header-collapse-nav-list-no-spacer
  • .header-collapse-submenu-list-link
  • .header-collapse-submenu-list
  • .header-collapse-submenu-nav-link
  • .header-collapse-submenu-nav-link
  • .header-collapse-submenu
  • .header-collapse-submenu-nav-link
  • .header-collapse-nav-list
  • .header-collapse-nav-pointer
  • .header-collapse-nav-pointer
  • .header-collapse-nav-link
  • .header-collapse-nav
  • .header-center-aligned
  • .header-center-aligned-inner
  • .header-sub-menu-title
  • .header-sub-menu-spacer
  • .header-sub-menu
  • .slick-pagination-bottom-center
  • .slick-thumb-progress-path
  • .slick-zoom-slide
  • .sidebar-account-list
  • .sidebar-sidebar--account__list
  • .sidebar-account-toggle-text
  • .sidebar-account-toggle-bg
  • .sidebar-account-holder
  • .sidebar-account-footer-offset
  • .blog-thumb-minimal-img-wrapper
  • .blog-thumb-minimal-img
  • .modal-facebook-text
  • .modal-facebook-navbar
  • .modal-facebook-content
  • .modal-facebook-space
  • .modal-facebook-body
  • .modal-facebook
  • .video-player-icon-lg
  • .avatar avatar-lg--bordered
  • .js-text-animation

v2.9.4 - 19 January, 2019

Updated Bootstrap from v4.4 to v4.4.1
Updated Bootstrap select from v1.13.2 to v1.13.10
Updated Clipboard from v4.3.1 to v2.0.4
Updated Flatpickr from v4.5.1 to v4.6.2
Updated jQuery Validation from v1.16.0 to v1.19.1
Updated FontAwesome from v5.9.1 to v5.12

v2.9.3 - 28 November, 2019

Updated Bootstrap from v4.3.1 to v4.4
Updated Gulp file from v3.9.x to v4.x
Updated package.json file
Updated Sketch download link in the README.md file

v2.9.2 - 19 August, 2019

Fixed assets/scss/ path in some files

v2.9.1 - 2 August, 2019

Fixed Dropdown spacing issue of the Blogs section on the navbar on mobile devices
Fixed $btn-font-size-sm removed from the assets/scss/front/_variables.scss file to fix the customization issue of the .btn-sm size

List of updated SCSS-files/folders:

  • assets/scss/front/_variables.scss

v2.9 - 25 July, 2019

New Onepage Corporate home page
New Blog - Card Style page
New Blog - Listing page
New Blog - Profile page
New Blog - Single Article page
New Light bordered table option
New White Border style nav option
Fixed hs.unfold.js ESC keyboard button functionality
Fixed hs.scroll-nav.js double-scrolling animation when clicked to the first link of the .u-header--abs-top-*
Fixed Static button hover status in link
Fixed Active status of the Home Onepage headers
Fixed Onscroll Animation reveal when you scroll down to it
Fixed assets/scss/front/forms/_chechbox-bordered.scss in favor of assets/scss/front/forms/_chechbox-outline.scss
Enhanced Account Plans Pricing table
Enhanced App Description Pricing table
Enhanced Account Invite friends SVG elements
Enhanced Tooltip background color changed in favor of Dark color
Dropped Blog pages in favor of new Blog design pages

List of new SCSS-files/folders:

  • assets/scss/front/forms/_chechbox-icon.scss
  • assets/scss/front/vendor/onscroll-animation/_onscroll-animation.scss

List of updated SCSS-files/folders:

  • assets/scss/front/_variables.scss
  • assets/scss/front/_front.scss
  • assets/scss/front/buttons/_buttons.scss
  • assets/scss/front/table/_table.scss
  • assets/scss/front/brand/_brand.scss
  • assets/scss/front/forms/_chechbox-bordered.scss

List of updated JS-files:

  • assets/js/components/hs.unfold.js
  • assets/js/components/hs.scroll-nav.js

List of updated HTML-files:

  • html/onepage-creative.html
  • html/onepage-saas.html
  • html/account-plans.html
  • html/account-invite-friends.html
  • html/demo-app-marketplace/app-description.html

v2.8 - 27 June, 2019

New App Marketplace demo page
New Help Desk page moved to the app-marketplace/ folder as a stand-alone demo
New Help Listing page
Enhanced ajax/ and scss/ folders moved into the assets/ folder

List of updated SCSS-files/folders:

  • assets/scss/front/_variables.scss
  • assets/scss/front/utilities/_bg-soft-colors.scss
  • assets/scss/front/headers/_header-navbar-expand.scss

v2.7 - 30 May, 2019

New Classic Studio home page
New App UI kit home page
New About Agency inner page redesigned
New Services Agency inner page redesigned
New Shop Categories demo pages
New Shop Categories sidebar demo pages
New Shop Products grid demo pages
New Shop Products list demo pages
New Shop Empty cart demo pages
New Shop Order completed demo pages
New Background Video examples
New Modal Window options
New Page preloader documentation page
New Utility classes
Fixed .btn-custom-toggle-primary border color on hover
Dropped About Start-up and Services Start-up pages in favor of new About and Services pages

List of new SCSS-files/folders:

  • assets/include/scss/front/svg/_svg-ie.scss
  • assets/include/scss/front/utilities/_transform.scss
  • assets/include/scss/front/page-preloader/_page-preloader.scss

List of updated SCSS-files/folders:

  • assets/include/scss/front/_variables.scss
  • assets/include/scss/front/card/_card.scss
  • assets/include/scss/front/dropdown/_dropdown.scss
  • assets/include/scss/front/utilities/_borders.scss
  • assets/include/scss/front/slick/paginations/_slick-pagination.scss

List of updated JS-files:

  • html/page-about-agency.html
  • html/page-services-agency.html

v2.6 - 4 May, 2019

New Shop demo pages redesigned
New Slick thumb progress added
New Slick arrow option
New Icon options added
New Summernote options
Fixed Summernote double toggle arrow style
Dropped Duplicated .dropdown-menu-*-left and .dropdown-menu-*-right classes

List of new SCSS-files/folders:

  • assets/include/scss/front/dropdown/_dropdown.scss
  • assets/include/scss/front/popover/_popover.scss
  • assets/include/scss/front/vendor/summernote-editor/_summernote-editor.scss

List of updated SCSS-files/folders:

  • assets/include/scss/front/_variables.scss
  • assets/include/scss/front/slick/_slick.scss
  • assets/js/components/hs.unfold.js
  • assets/js/components/hs.slick-carousel.js
  • html/page-careers-single.html

List of updated JS-files:

  • assets/js/components/hs.unfold.js
  • assets/js/components/hs.slick-carousel.js

List of updated HTML-files:

  • html/page-careers-single.html

v2.5 - 18 April, 2019

New App SaaS home page
New App Workflow home page
New Clipboard within modal example
New Datatables pagination options
New Utility classes
Fixed Hero block mockup overlaying in Classic-consulting page
Fixed Quotation mark in Single article classic Blog page
Fixed SVG preloader background white color
Enhanced SVG illustrations freshened up
Enhanced Form shadows softened for a better look
Enhanced Gradient colors rewritten with variables now
Enhanced SCSS variables

List of updated SCSS-files/folders:

  • assets/include/scss/front/_variables.scss
  • assets/include/scss/front/utilities/_gradients.scss
  • assets/include/scss/front/utilities/_gradients-overlay.scss
  • assets/include/scss/front/utilities/_fill-colors.scss
  • assets/include/scss/front/utilities/_links.scss moved to assets/scss/front/links/ folder
  • assets/include/scss/front/forms/range-slider/ moved to assets/scss/vendor/ folder
  • assets/include/scss/front/avatar/_avatar-bordered.scss
  • assets/include/scss/front/badge/_badge-styles.scss
  • assets/include/scss/front/brand/_brand.scss
  • assets/include/scss/front/breadcrumb/_breadcrumb.scss
  • assets/include/scss/front/buttons/_button-custom-toggle.scss
  • assets/include/scss/front/card/_card.scss
  • assets/include/scss/front/close/_close.scss
  • assets/include/scss/front/divider/_divider.scss
  • assets/include/scss/front/divider/_divider-style.scss
  • assets/include/scss/front/divider/_divider-vertical.scss
  • assets/include/scss/front/dropdown/_dropdown.scss
  • assets/include/scss/front/forms/checkbox/_checkbox-bordered.scss
  • assets/include/scss/front/go-to-section/_go-to-vertical-arrow.scss
  • assets/include/scss/front/indicators/_indicator-dots.scss
  • assets/include/scss/front/indicators/_indicator-vertical-line.scss
  • assets/include/scss/front/indicators/_indicator-vertical-dashed.scss
  • assets/include/scss/front/navs/_navs.scss
  • assets/include/scss/front/stats/_stats-progress.scss
  • assets/include/scss/front/svg/_svg.scss
  • assets/include/scss/front/svg/_svg-ie.scss

List of updated JS-files:

  • assets/js/components/hs.unfold.js
  • assets/js/components/hs.summernote-editor.js
  • assets/js/components/hs.clipboard.js
  • assets/js/components/hs.datatables.js

List of updated HTML-files:

  • html/classic-consulting.html
  • html/corporate-agency.html
  • html/corporate-start-up.html
  • html/page-contacts-agency.html
  • html/page-hire-us.html
  • html/page-pricing.html
  • html/page-careers.html
  • html/page-services-start-up.html
  • html/page-faq.html
  • html/page-terms.html
  • html/page-about-agency.html
  • html/page-about-start-up.html
  • html/page-services-agency.html

v2.4 - 4 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 (Inspired by Ionic) option added
New Background overlay option to the hs.unfold.js
New Background soft color
New Dropzone drag'n'drop file uploader plugin
New Summernote editor options
New Utility classes
Dropped assets/scss/front/utilities/_overflow.scss file in favor of Bootstrap .overflow classes

List of updated SCSS-files/folders:

  • 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

List of updated JS-files:

  • 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

List of updated HTML-files:

  • html/account-activity.html
  • html/house/property-seller.html

Migrating to v2.3

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

v2.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
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 hs.video-player.js autoplay option added
Fixed hs.fancybox.js autoplay slideshow option added
Fixed Password hint validation
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
Dropped .checkbox-switch styles in favor of Bootstrap .custom-switch classes
Dropped hs.video-player.js now called via data-video-id attribute rather than iframe. For more information, see Video player

List of updated SCSS-files/folders:

  • 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

List of updated JS-files:

  • assets/js/components/hs.video-player.js
  • assets/js/components/hs.fancybox.js

List of updated HTML-files:

  • 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/portfolio-agency.html
  • html/blog-business.html
  • html/blog-agency.html
  • html/onepage-creative.html
  • html/page-about-agency.html
  • html/page-careers.html

v2.2.1 - 18 February, 2019

Fixed HS Megamenu collapse on small devices

List of updated SCSS-files/folders:

  • assets/include/scss/front/front/vendor/animate.scss

List of updated JS-files/folders:

  • assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js

v2.2 - 09 February, 2019

New House inner pages
New Utility classes
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 new SCSS-files/folders:

  • assets/include/scss/front/dropdown/_dropdown-sizes.scss

List of updated SCSS-files/folders:

  • 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

List of updated JS-files/folders:

  • assets/js/hs.ion-range-slider.js
  • assets/js/components/hs.unfold.js

List of updated HTML-files/folders:

  • html/classic-marketing.html
  • html/corporate-start-up.html
  • html/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/page-about-agency.html
  • html/page-contacts-start-up.html
  • html/page-hire-us.html

v2.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
Enhanced hs.unfold.js and added data-unfold-target-is-menu attribute

List of new plugins/libraries:

  • node_modules/pwstrength-bootstrap/

List of new JS-files/folders:

  • assets/js/components/hs.password-strength.js

List of updated SCSS-files/folders:

  • assets/include/scss/front/utilities/_sizing.scss

List of updated JS-files/folders:

  • assets/js/components/hs.unfold.js
  • assets/js/components/hs.clipboard.js

List of updated HTML-files/folders:

  • html/account-change-password.html

v2.1 - 22 December, 2018

New Jobs inner pages
New Header layout
New Utility classes
Dropped .u-label styles in favor of .btn classes

v2.0.2 - 04 December, 2018

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

v4.3.1 - 15 November, 2018

Fixed Anchor offset issue in the Documentation pages
Fixed onepage-saas.html Pricing block's SVG component (.ie-abstract-shapes-11) in IE browser
Enhanced hs.scroll-nav.js file

Migrating to v2.2

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.

v2.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
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 page-contacts-agency.html horizontal scrollbar issue on icon blocks
Fixed classic-crypto.html Blog news's image alignment issue fixed with .w-100 class to the parent
Fixed custombox visibility issue in IE
Fixed page-services-start-up.html pricing pagination issue
Enhanced unfold.js (Dropdown) accessibility
Enhanced hs.video-player.js

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 changed to theme.scss.
  • Main Front CSS file changed to theme.css.
  • Main Front JS file changed 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
    • classic-crypto.html Bitcoin charts blocks
    • corporate-agency.html Team blocks
    • corporate-business.html Hero card blocks
    • corporate-business.html Pricing blocks
    • landing-house.html Products blocks
    • landing-job.html Hiring blocks
    • portfolio-agency.html Hire Us blocks
    • classic-marketing.html News and Features blocks
    • blog-start-up.html News blocks
    • 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.
    • landing-house.html Testimonials blocks
    • classic-consulting.html Testimonials blocks
    • blog-agency.html Testimonials blocks
    • shop-classic.html Product blocks
    • shop-masonry.html Product blocks
    • page-privacy.html content.
    • page-terms.html sticky-block nav.
    • page-help.html sticky-block nav.
    • page-services-agency.html Get Started with Front blocks.
    • shop-classic.html Testimonials blocks.
    • 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.
    • page-terms.html sticky-blocks.
    • page-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.
  • Refactored hs.chart-pie.js file.
  • Stats blocks in the 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

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

Optimized

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

Miscellaneous

  • 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 changed 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 page-maintenance-mode.html page.
  • Replaced SVG background .content-centered class to .content-centered-y in page-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 page-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 classic-consulting.html, and page-pricing.html pages.
  • Changed .u-slick-gutters-3 from 16px to 15px.

Renamed classes

Front v3.2.2 Front v3.3
.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-xs
.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

v1.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
Fixed Instagram Image resolution
Fixed Header Nav Link icon rotation
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
Dropped <meta http-equiv="x-ua-compatible" content="ie=edge"> in all HTML files.

v1.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 snippets/headers/header-sidebar-right.html menu links fixed
Fixed "Dark-to-white on scroll" wrong linking issue fixed on snippets/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

v1.1 - 13 May, 2018

New Sketch file added
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 changed to slick-carousel-preloader-primary.svg
Fixed Instagram API invalid token issue fixed

v1.0 - 08 May, 2018

Initial Release.