Releases
Image placeholder

Purpose – Website UI Kit

All of the recent releases are listed below. Be sure you have a valid license and to consult the documentation for more information on how to use this theme.

v2.0.1

Released May 31, 2019
  • Added a quick fix for eliminating the fading effect that appeared while the page was loading. Simply replace the purpose.js file from the assets/js folder in your existing project or replace the resources/js folder if you are using Gulp or Laravel Mix.

v2.0.0

Released March 4, 2019
Major add-ons and changes
  • Dark Mode
  • Blue color scheme (light and dark)
  • Apex charts
  • Navbar features (extended menu, submenu)
  • New components (see the Docs)
  • Fresh new documentation
  • Section explorer
  • New premium SVG icon set
  • Live customizer (enhance your experience live in your browser)
  • Gulp 4 and Laravel Mix
  • New utility pages (e.g. 404, coming soon)
  • Re-designed shop and product page
  • New authentication pages for login, register and recover password (basic, cover and simple variations)
  • Board and Listing pages (dashboard cards and tables)
  • Table pages for orders, projects and users
  • Optimized menu navigation

General
  • UPDATE: Bootstrap was updated to 4.3.1 (from 4.1.3)
  • UPDATE: Font Awesome updated to 5.7.2
  • UPDATE: Sass directory and files structures have been re-organized
  • UPDATE: theme.scss was renamed to purpose.scss
  • UPDATE: Changed the purpose.scss structure to import Bootstrap resources from node_modules
  • UPDATE: Sass and JS main files have been renamed to purpose.scss or purpose.js instead of theme.scss/theme.js
  • UPDATE: the libs folder from assets/, scss/purpose/ and assets/js/ has been renamed to libs to avoid issues caused by Github’s .gitignore

Components
  • NEW: Added the extended dropdown menu (meganav)
  • NEW: Dropdown submenu (multilevel menu)
  • NEW: Dividers
  • NEW: Omnisearch
  • NEW: Custom navbar dropdown menus
  • NEW: Soft buttons
  • NEW: Soft badges
  • NEW: Modern alerts
  • NEW: Vertical modal
  • UPDATE: Caret symbol has been modified

Plugins
  • NEW: Apex Charts
  • NEW: Dropzone
  • NEW: List.js
  • NEW: Quill
  • NEW: Notify
  • NEW: Sweet alerts
  • NEW: SVG Injector
  • UPDATE: Flatpickr
  • DEPRECATED: Bootstrap Datepicker (replaced with Flatpickr)

Classes
  • UPDATE: .btn-circle was removed. Use .rounded-pill modifier class instead
  • UPDATE: .btn-zoom—hover and .btn-translate—hover have been removed (use the hover utility classes instead .hover-zoom and .hover-translate-y-n3)
  • UPDATE: .countdown–style-1 class was renamed to .countdown-blocks
  • UPDATE: mt—2 negative classed were replaced with the new Bootstrap negative spacing classes mt-n1
  • UPDATE: data-accordion=“1” is not used anymore to style accordions; use the .accordion class instead
  • UPDATE: .body-backdrop modifier class was renamed to .mask-body for better name consistency
  • UPDATE: .dropdown-menu-inverse was renamed to .dropdown-menu-dark (use any background class modifier next to it: e.g bg-primary)
  • UPDATE: .toggle-switch was replaced with the new Bootstrap component named .custom-switch
  • UPDATE: .navbar-search has been renamed to .omnisearch
  • UPDATE: .textarea-autosize that activated the autosize plugin replaced with `data-toggle=“autosize” for better-naming consistency
  • UPDATE: hover utility classes for shadows were renamed to .hover-shadow-* instead of .shadow-*—hover for better name consistency
  • UPDATE: .avatar-ungroup–hover was renamed to .hover-avatar-ungroup for better name consistency
  • UPDATE: .shape-fill-* and .shape-stroke-* modifier classes were renamed to .fill-* and .stroke-*
  • UPDATE: .blurable—hover was renamed to .hover-blurable for better name consistency
  • UPDATE: .milestone-count was renamed to .counter
  • UPDATE: .mask—hover was renamed to .hover-mask
  • DEPRECATED: sm, md, lg and xl spacing classes were removed and replaced with 6, 7, 8, 9 (extending the default Bootstrap spacing modifier classes)

  • Utilities
  • NEW: added transforms utility classes for translate, scale, rotate and skew.

Sass
  • UPDATE: Optimized and cleaned up mixin filesFile structure
  • Theme’s Sass and JS files have been moved in the resources folder located in the root folder
  • Bootstrap is imported directly from node_modules (see the Build Tools and Customisation pages from our docs)

Build Tools
  • UPDATE: Updated Gulp to 4.0
  • UPDATE: New and optimized Gulp tasks
  • NEW: Laravel Mix was added to compile CSS and JS (learn more in the Docs)
  • NEW: Install packages via npm or Yarn
  • NEW: Create the libs folder automatically using Gulp (all plugins installed via NPM will be copied in the assets/libs folder)

Docs
  • UPDATE: Updated documentation
  • ENHANCE: More documented components and features
  • NEW: Learn how to build your own styles and skins in the “Get started” section
  • NEW: Shortcodes Library – extensive collection of shortcodes – simply copy/pase it to your project
  • NEW: Sections Library – impressive collection of sections for multiple scenarios

v1.1.3

Released October 24, 2018
  • FIX: Small changes for gulp: build command
  • ENHANCE: optimized swiper with coverflow effect
  • UPDATE: landing-event-music.html
  • UPDATE: landing-app.html

v1.1.2

Released October 4, 2018
  • ENHANCE: will-change CSS property in SASS files were removed for performance reasons.
  • ENHANCE: navbar sticky functionality was improved because the previous one was using the sticky.js plugin and it was causing some performance issues
  • ENHANCE: typewriter animation stops when it’s out of viewport (especially in mobile) so it doesn’t affect the readability of the page.
  • ENHANCE: added source maps for the themes CSS and JS
  • ENHANCE: made gulp generate source maps for the theme’s files
  • ENHANCE: multiple optimizations for mobile resolutions
  • UPDATE: class .navbar-fixed-top has been replaced with .navbar-sticky in order to add a fixed-top functionality for the main menu
  • UPDATE: data-role=“tagsinput” was replaced with data-toggle=“tags”
  • UPDATE: .selectpicker was replaced with data-toggle=“select” in order to initialize the select2 plugin
  • UPDATE: .datepicker was replaced with data-toggle=“date” in order to initialise the bootstrap-datepicker plugin
  • UPDATE: created JS partials for each component and plugin (you can now create your own minified theme JS only with the scripts you need)
  • UPDATE: swiper data attributes have been renamed for better consistency
  • FIX: solved the issue for swipers with coverflow effect (e.g landing-event-music.html)
  • FIX: solved some responsive issues on the mobile resolutions
  • FIX: solved the popover that didn’t open in Safari browser
  • PLUGIN: bootstrap-select is deprecated. It was replaced with the select2 plugin.
  • PLUGIN: in-view plugin was added for checking the presence of an element in the viewport
  • DEPRECATED: viewport checker has been removed (replaced with the in-view plugin)

v1.1.1

Released September 6, 2018
  • FIX: sticky navigation remaining fixed problem when the top bar was removed
  • FIX: some spacing optimization made on page headers

v1.1.0

Released September 3, 2018
Highlights
  • E-commerce module added (files begin with shop-*.html)
  • Board pages added (Overview, Projects, Tasks, Connections)
  • Public profile page added for registered users
  • Fixed tongue border that appeared sometimes
  • Added top bar feature for selecting language, search, cart and user account
  • Sticky navigation via class .navbar-fixed-top applied on the main navbar container
  • Togglable global search feature with suggestions from the navbar search button

Header
  • NEW: added top bar feature for selecting language, search, cart and user account
  • NEW: added .dropdown-menu-arrow modifier class for applying arrow indicators on any dropdown
  • NEW: Sticky navigation via class .navbar-fixed-top applied on the main navbar container
  • NEW: togglable global search feature with suggestions from the navbar search button
  • NEW: toggable slidebar for additional content such as user fast login or shopping cart
  • UPDATE: theme’s logo
  • UPDATE: class .navbar-transparent is deprecated and was replaced with .header-transparent which is applied on the header tag that contains the top bar and the main navigation
  • UPDATE: the animation for dropdown-menu included in the main navbar, are made via class .dropdown-animate applied next to the .dropdown
  • ENHANCE: the transparency of the header is now maintained also on mobile resolutions
  • ENHANCE: removed class .list-group-item-action from the main navbar dropdown
  • ENHANCE: added drop-down menu toggle option on hover with animation (made default) via class .dropdown-animate with the data-toggle=”hover” on
  • ENHANCE: the main navbar’s collapsing animation has been modified for a more smooth transition and UX

Sections
  • UPDATE: removed the border-bottom-left-radius form .section-rotate on under large resolutions

Background image holder (.bg-img-holder)
  • ENHANCE: added data-bg-position attribute on .bg-img-holder in order to easily position the background image (e.g data-bg-position=”center center”, data-bg-positon=”bottom 0”)

HTML
  • NEW: e-commerce module added (files begin with shop-*.html)
  • NEW: cart pages (cart items and empty cart)
  • NEW: e-commerce checkout pages (customer, shipping, payment)
  • NEW: Board pages (Overview, Projects, Tasks, Connections) – in Account Pages
  • NEW: Public profile page for registered users
  • NEW: Updates layout for the account pages (Profile, Settings, Billing, Notifications)
  • NEW: added password reset page for each login/register style (recover-*.html)
  • UPDATE: enhanced design for login and register pages
  • RENAME: account-settings.html renamed to account-profile.html
  • ENHANCE: the “Change avatar” button is now working as a file input
  • UPDATE: landing-1.html has been restyled
  • UPDATE: landing-2.html has been restyled

SASS
  • UPDATE: _icons.scss was renamed to _icon.scss for better name consistency
  • NEW: added $icon-border-width for outlined icons (e.g 3px)
  • NEW: added icon mixin (purpose/mixins/_icon.scss) to add icon color variations (related to component _icon.scss)
  • NEW: icon modifier classes added next to .icon-shape in order to add a background or border (e.g icon-green or icon-outline-purple)
  • ENHANCE: new color palette for the main colors (red, blue, green, orange, yellow, pink, purple, teal) that affect also the status colors (warning, danger, info and success)
  • UPDATE: changed the $card-border-radius with the value of $border-radius-lg
  • UPDATE: changed the $body-color with the value of $gray-600
  • UPDATE: changed the $lead-font-size to 1.125rem
  • UPDATE: shape-fill-* and stroke-* were modified to take the colors from the $colors object and not the $theme-colors so you can benefit of all the available colors (e.g shape-fill-danger became shape-fill-red and so on)
  • UPDATE: .alpha-* modifier classes for opacities where renamed to .opacity-* for better name consistency and also moved to a sepparate utility file in utilities/_opacity.scss
  • NEW: added .bg-absolute-cover class for adding cover backgrounds inside relative sections that take the full size of its container
  • NEW: z-index utility classes added in the purpose/utilities folder (e.g zindex-100) to add a z-index=100 on the desired element
  • NEW: new component created – collage, in purpose/_collage.scss with the corresponding class name .collage – that allows you to create modern overlayed images with SVG backgrounds (it’s still in progress, which means we still have a lot to do with it + new options to add)
  • NEW: product card with action buttons and color options
  • NEW: new component create – ribbon, in purpose/_ribbon.scss with the corresponding class name .ribbon – that allow you to apply ribbon on any card with many style to choose from
  • UPDATE: .timeline-axis-step was changed to .timeline-step
  • NEW: timeline step variations – .timeline-step-dot, .timeline-step-icon
  • UPDATE: avatars – .avatar-overlapped was renamed to .avatar-group
  • UPDATE: .card-icon-actions was renamed to .icon-actions
  • NEW: added a new utility file for images (utilities/_image.scss) for image alignment and filter management
  • UPDATE: [data-link=”1”] was replaced with the .link-underline-* modifier class that allows you to use any of the theme’s color
  • NEW: new mixin for links added in purpose/mixins/_link.scss
  • UPDATE: .bg-img-holder received new options that are activated with js. In order to use it (for previous versions) add also the data-bg-size=”contain” on the same element.
  • UPDATED: modified $badge-padding-x valueVendors and Resources
  • NEW: Font Awesome Pro is used for the preview version. If you want to get more icon styles, purchase a license from their official website or our docs
  • NEW: Wavify plugin added for custom wave animations (e.g: shop-products.html)
  • NEW: Datepicker plugin added with single and range options
  • NEW: 20 clothing SVG icons (assets/icons/clothing) used in the e-commerce module
  • UPDATE: updated Bootstrap to 4.1.3 (from 4.1.1)
  • UPDATE: Font Awesome to 5.2 (from 5.0.12)

Files
  • UPDATE: Bootstrap js files were moved to /assets/vendor/bootstrap (was in /assets/js/)

v1.0.1

Released June 21, 2018
  • UPDATE: Updated the File Structure section
  • UPDATE: Gulp. Optimized the gulp build command
  • FIX: Solved the $icon-size variable issue that was appearing in the compiled CSS file.

v1.0.0

Released June 4, 2018
  • Initial release