Purpose – Website UI Kit (Light/Dark)
Purpose – Website UI Kit (Light/Dark)
Purpose Website UI Kit is a unique and beautiful collection of UI elements that are all flexible and modular. A complete and customizable solution filled with pages of examples and features that will really help you to create a robust and modern looking website in no time.
Our products share the same structure and principles, allowing you to build faster and more consistently. Some of the key features that you’ll get with each theme are:
- Modularity: All components are built to be used in any combination.
- Responsiveness: Quick is optimized to work for most devices.
- Scalability: Remain consistent while developing new features.
- Customizability: Change a few variables and the whole theme adapts.
Code faster and better
Make your website building process a breeze and automatize your time-consuming tasks in your development workflow using Gulp and BrowserSync to live-reload your web pages while making changes.
- Theme setup
- Tons of variables
- Source files
- Build tools
Dark Mode brings a whole new experience to your website. It’s carefully designed to make every element on the screen easier on your eyes and is seamlessly integrated throughout the theme.
What’s in the Pack?
Purpose is a wonderful product built to offer your website a premium touch. Beside the custom-built components, features, and pages, you’ll receive a set of premium and exclusive assets:
- Source files (HTML/CSS/SASS/JS)
- Premium SVG illustrations
- Premium SVG icons
- Premium licensed plugins
- Coming soon: Design files (Sketch)
Now, with this customized build tools, it is easier than ever to automate painful or time-consuming tasks in your development workflow using Gulp 4 or Laravel Mix. Each one of these will help you achieve the results you need in seconds.
Built by Webpixels
A professional digital agency providing Premium Themes, UI/UX Design and Web Apps that you will simply love. We’ve been creating Bootstrap themes since 2013 and we’ve never stopped learning and improving our skills since then. Our products are built with reuse and modularity at the core which forms the ideal starting point to create website projects of any kind.
Beautiful Page Examples
Explore the live examples of the pre-built page layouts that were made with customization and re-usability in mind. Let us amaze you with a level of quality in design and code never seen before in a Bootstrap theme.
Landing Pages: A 15+ page collection perfect for companies, agencies of any kind, events, blog, portfolio and much more.
Secondary Pages: Complete your website with one of these inner pages built to give you a starting point for creating pricing, services, about us, work showcase, support pages and much more.
Account Pages: Purpose comes with a useful set of pages for account management that was built to be a great starting point for creating user profiles, light dashboard and much more.
Shop Pages: A complete e-commerce flow to build and integrate your online shop fast and easy with a beautiful and intuitive design.
Complete Features at Your Hand
Purpose is a great premium UI package including all the important and needed features so you can jumpstart the hard work and get right to the website creation fast and easy with more than 100 customized Bootstrap components and 15+ integrated plugins.
- Language selection
- Custom modals (e.g account-settings.html)
- Sticky sidebars
- Stats cards
- Notification cards
- Timeline cards
- Avatar groups
- Product cards
- Alternative footer (e.g index.html)
- In-view animations (e.g typing animation stops when is out of viewport)
- 100% Responsive
- Based on Bootstrap 4
- Dark mode
- Alternative skins (change colors, typography and more)
- Premium SVG icons and illustrations
- Extended navigation functionality
- Gulp 4 for compiling assets and beautify HTML markup
- Laravel Mix (alternative to Gulp compile tasks)
- Install dependencies via NPM or Yarn
- Multiple authentication styles
- Improved and minimalist shop design
- Dashboard components
- Apex charts
- 15 integrated plugins
- Extended documentation
- Section explorer
- Fully Customizable
- Built with Sass
- Flexbox Grid
- 70+ Pre-built Page Examples
- 20+ Hero Layouts
- Premium Plugins
- Scalable Vector Graphics (SVG)
- Customized Libraries
- Well Documented
- Powerful Scripts
- Customized Google Maps
- FontAwesome 5
- Pricing Tables
- Milestone Counter
- Typed Content Animation
- Advanced Form Layouts
- Beautiful Gradients
- Google Fonts
- Masonry Grid Layouts
- 10+ Unique Landing Pages
- 20+ Incredible Secondary Pages
- 10+ Account Pages
- 8+ Shop pages
- and many more…
Each plugin is well documented and easy to install via NPM or Yarn. Here is a list of the latest libs we added in Purpose 2.0:
- List JS
- Sweet Alert
Customize with Confidence
Customization has never been easier. Purpose has all the right tools in order to make your website building process a breeze and automatize your time-consuming tasks in your development workflow with Gulp toolkit and BrowserSync live browser reload.
We are developers too and we know exactly what you need. You don’t only need a theme, but also great tools in order to ease the process. And this is exactly what we offer you: the latest technologies and tools in order to create a better code that not only works great, but it is easy to work with too.
Why our themes?
- Perfect for modern startups: With an intuitive markup, powerful and lightning-fast build tools, you can turn your ideas into incredible products.
- Thoughtfully crafted code: Components and examples, including tons of variables that will help you customize this theme with ease.
Build tools and full documentation
Components, plugins, and build tools are all thoroughly documented with live examples and markup for easier use and customization—just like Bootstrap itself. Not comfortable diving that deep? No worries, you just use the compiled CSS and examples pages!
Free Updates and Support
We create long-lasting relationships with our customers and we want to offer you the best help in order to get started with any of our products. Need help? Request Support
NEW: Student Discount
Are you a young and talented developer who has some fresh ideas for school projects? If our products can be useful, we want to make sure we support all of you.
Request a student discount code – let us know you are a student and we’ll send to you a discount code right away. You will be able to use it for any of our products.
You must purchase this theme to leave a review.
If you have already purchased it, login to leave a review.
Version 2.0.1 – May 31th, 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.
Version 2.0.0 – March 4th, 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
- 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
- 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
- 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)
- 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)
- NEW: added transforms utility classes for translate, scale, rotate and skew.
- 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)
- 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)
- 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
Version 1.1.3 – October 24th, 2018
- FIX: Small changes for gulp: build command
- ENHANCE: optimized swiper with coverflow effect
- UPDATE: landing-event-music.html
- UPDATE: landing-app.html
Version 1.1.2 – October 4th, 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)
Version 1.1.1 – September 6th, 2018
- FIX: sticky navigation remaining fixed problem when the top bar was removed
- FIX: some spacing optimization made on page headers
Version 1.1.0 – September 3th, 2018
- 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
- 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
- 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”)
- 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
- 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)
- UPDATE: Bootstrap js files were moved to /assets/vendor/bootstrap (was in /assets/js/)
Version 1.0.1 – June 21th, 2018
We are bringing a small and fast update with solutions to issues our customers send us emails with.
- 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.
- Initial release