Developing and using a professional Bootstrap 4 UI Kit. What we learned and how we use it?
About a year ago we decided that we wanted to develop and sell professional web templates. We thought we would only sell on popular websites such as Themeforest.net or Bootstrap Themes but nevertheless, we decided to create our own marketplace. It has its advantages and disadvantages, but perhaps we'll write about that in another article.
So we were thinking what our first product should be. We got to the conclusion that a UI Kit would be the most beneficial both for us and our customers. Let's explore some of the characteristics of a UI Kit.
What is a UI Kit?
A User Interface Kit is a set of components or elements that can be used as the building blocks for any type of website or web app. A UI Kit can be much more useful in the long term compared to a web template because you can easily create different types of websites using these elements.
UI Kits and Design Systems of course can span across multiple platforms. Designers use them with popular softwares such as Figma, Sketch or Adobe XD while web developers usually use them coupled with a popular CSS Framework such as Bootstrap or Foundation.
In our case, we use our own UI Kit to further develop other website templates. Even our own website, Themesberg.com is created using Pixel PRO. It greatly increases our development progress since most of the basic elements are already created and because we used Sass as an extension to CSS changing basic UI properties across the whole app is tremendously seamless.
Why Bootstrap 4?
Altough we considered other CSS Frameworks for our first UI Kit, such as Foundation or Tailwind CSS, we decided to build Pixel UI Kit with the latest version of Bootstrap because of the tremendous popularity it has. Although the other frameworks may have some advantages compared to Bootstrap, we consider it important that our clients be familiar with the CSS classes they will work with. Most developers are already very familiar with classes such as .btn-primary or .btn-lg.
Just so you can make an idea how enormously Bootstrap 4 is more popular than the other alternatives here's the list of visits their websites get in a month:
- Foundation by Zurb: 800k to 1m
- Tailwind CSS: 400k to 900k (gaining popularity)
- Bootstrap by Twitter: 16m to 18m
Pixel Pro UI Kit
When we started to work on Pixel Pro we already knew there were lots of UI Kits out there, but we have a different approach in terms of long term support. We use Pixel Pro to develop our future templates which means that any new elements that we will create in separate products will come as an update for Pixel Pro. That also means that the price of the UI Kit may increase over time, but the clients that already purchased it will get the updates for free.
This strategy can work for a span of a few years even because we plan on creating niche website templates for at least 1 to 2 years from now on based on our Pixel Pro UI Kit.
Just so you can get an idea of how complex the kit is, it has over 1000 components including timelines, profile cards, pricing cards, navigation bars and so on. 50+ sections which are a unique combination of the components and we also provide more than 25 example pages that you can use to kickstart your projects.
We used Sass Language to empower development with variables, mixins and file modularity and we use Gulp commands to have a seamless development and production code generation process.
Useful links:
Pixel Lite
We created a free version of Pixel Pro so developers can have a chance to see how is it to work with it and how well the UI fits their website. It has 100 components and 3 example pages and it's completely free. It has already been downloaded by more than 350 developers and the feedback is very good. Please note that this free product will get much less updates compared to our Pro version.
Useful links:
Let us know what you think about our products in the comment section. We highly value constructive feedback.
Check out some awesome free and premium Bootstrap Themes, Templates and UI Kits from Themesberg.