DEV Community

loading...
Cover image for Free and open source Bootstrap 5 UI Kit
Themesberg

Free and open source Bootstrap 5 UI Kit

zolidev profile image Zoltán Szőgyényi Originally published at themesberg.com ・3 min read

Hello devs 👋🏻

Today I want to show you a Bootstrap 5 UI Kit which we've been working on for about a year with my friend. The first version one year ago was based on Bootstrap 4, but now that Bootstrap 5 has been updated to Beta we thought it was time to update the whole kit once again.

We used NPM, Gulp, and Sass to manage libraries, compile source files, and more easily change and update styles using the variables and mixins from Sass.

Bootstrap 5 UI Kit

Pixel Bootstrap 5 UI Kit features over 80 UI components including date pickers, modals, pricing cards, profile cards, blog cards, and also 5 example pages.

Workflow

  • Most popular CSS Framework Bootstrap
  • Productive workflow tool Gulp
  • Awesome CSS preprocessor Sass

So without further ado, let me show you how you can install and use this Bootstrap 5 based UI Kit.

Quick start

  1. Download for free from Themesberg or clone the repository on Github

  2. Make sure you have Node and NPM installed on your machine

  3. Download Gulp Command Line Interface to be able to use gulp in your Terminal:

npm install gulp-cli -g
Enter fullscreen mode Exit fullscreen mode
  1. After installing Gulp, run npm install in the main pixel/ folder to download all the project dependencies. You'll find them in the node_modules/ folder.

  2. Run gulp in the pixel/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.

While the gulp command is running, files in the assets/scss/, assets/js/ and components/ folders will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

Theme without Sass, Gulp or Npm

If you'd like to get a version of our theme without Sass, Gulp or Npm, we've got you covered. Run the following command:

gulp build:dev
Enter fullscreen mode Exit fullscreen mode

This will generate a folder html&css which will have unminified CSS, Html and Javascript.

Minified version

If you'd like to compile the code and get a minified version of the HTML and CSS just run the following Gulp command:

gulp build:dist
Enter fullscreen mode Exit fullscreen mode

This will generate a folder dist which will have minified CSS, Html and Javascript.

Documentation

The documentation for Pixel Bootstrap UI Kit is hosted on our website.

File Structure

Within the download you'll find the following directories and files:

Pixel Bootstrap UI Kit
.
├── LICENSE
├── README.md
├── dist
│   ├── assets
│   ├── css
│   ├── html
│   ├── index.html
│   └── vendor
├── gulpfile.js
├── html&css
│   ├── assets
│   ├── css
│   ├── html
│   ├── index.html
│   └── vendor
├── package-lock.json
├── package.json
└── src
    ├── assets
    ├── html
    ├── index.html
    ├── partials
    └── scss
Enter fullscreen mode Exit fullscreen mode

Resources

Reporting Issues

We use GitHub Issues as the official bug tracker for Pixel Pro Bootstrap UI Kit. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of Pixel Pro Bootstrap UI Kit. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/themesberg

Facebook: https://www.facebook.com/themesberg/

Dribbble: https://dribbble.com/themesberg

Instagram: https://www.instagram.com/themesberg/

Discussion (19)

pic
Editor guide
Collapse
crearesite profile image
WebsiteMarket

MIT License?

Collapse
zolidev profile image
Collapse
sm0ke profile image
Sm0ke

Such a nice product ..

Collapse
zolidev profile image
Collapse
frondor profile image
Federico Vázquez

But... But... Why gulp?? T_T

Collapse
zolidev profile image
Zoltán Szőgyényi Author

We're going to also add webpack :) (we started building it over 2 years ago) you can help us with the compiler though :)

Collapse
frondor profile image
Federico Vázquez

Try rollup, webpack is good for application bundles. Rollup is perfect for libraries ;)

Thread Thread
zolidev profile image
Zoltán Szőgyényi Author

Never heard of it. I'll check it out!

Collapse
zolidev profile image
Zoltán Szőgyényi Author

As a contributor to the open source project, of course

Collapse
pholly profile image
Philip Holly

Looks great and code looks good too 👍🏽

Collapse
zolidev profile image
Zoltán Szőgyényi Author

Thank you, Philip!

Collapse
theme_selection profile image
themeselection

Awesome list..!!👍
Talking of Bootstrap 5, we have also prepared a Bootstrap 5 cheatsheet to make it easy to work with.

Collapse
edydeyemi profile image
Edydeyemi

Looks Awesome. Thanks for sharing.

Collapse
zolidev profile image
Collapse
zappellin profile image
Leon Guillaume

Really cool I look forward to use it

Collapse
zolidev profile image
Zoltán Szőgyényi Author

Awesome! Let us know and we may showcase your project in the readme section or in this article.

Collapse
atulcodex profile image
Atul Prajapati

Amazing bro 🎯

Collapse
zolidev profile image
Collapse
bestdigitaltre2 profile image
Best Digital Trendz

We provide free guest posts to our website. For more info visit us bestdigitaltrendz.com/write-to-us/