Pixel - Free Bootstrap 5 UI KIT

Free and open source Bootstrap 5 UI Kit

2

Pixel is a free and open-source Bootstrap 5 based user interface kit featuring over 80 fully coded UI elements and example pages that will help you prototype and build a website for your next project.

Bootstrap 5 no longer requires jQuery as a dependency, meaning that Pixel is a much more lightweight UI Kit compared to other Bootstrap 4 based projects.

This project also comes with Sass source files, making it easy to customize the colors, fonts, and other styling properties. Using the gulp commands you can also easily work with the project and generate minified production code.

Built for developers

Pixel was built by experienced web developers with a focus on good and high-quality code. We know how much time and effort it takes to translate design files into working web components, but we already did that for you so that you can focus on building awesome features rather than writing boilerplate code.

Designed by professionals

Pixel was designed by professional designers to bring you the best of two worlds: appearance and experience. We are true believers in the experience of the user, that’s why you will find that the design is mostly simple and clean, without too many distractions.

80+ Bootstrap 5 components

Pixel is an extension of the Bootstrap 5 CSS framework with a focus on heavy styling customization but also with components that are not found by default in the framework, such as new cards, date pickers, timeline items, and the example pages that we’ve crafted. We invite you to check out the components here.

5 Example pages

We also built a couple of example pages to get you started with a simple website and show you what can be done using the components in this UI Kit. You’ll get a landing page, about page, contact page, and the sign in and sign up pages.

Well documented

We know how important it is to properly document a project, that’s why we took extra time to provide thorough documentation for the Pixel UI library. You can learn more about how to get started with the project and how to use each component and how to customize the Sass.

Customize with Sass

Pixel is built using the Sass variables and mixins, but we also made sure that you have a custom variables file where you can override the default properties that Bootstrap and Themesberg has provided.

Gulp, BrowserSync, and Sass workflow

Pixel is based on a Gulp and BrowserSync workflow which helps to compile and reflect the changes made to the Sass source files, where you can work with variables and mixins to easily change the properties of the elements, such as the colors, fonts, spacings, and many others.

Accessibility

Pixel is built with a focus on accessibility, that’s why we’ve carefully selected the best color scheme for a good contrast for the elements.

Upgrade to Pro

If you want to help the open-source community and if you appreciate Pixel, we invite you to check out the premium version called Pixel Pro which brings a lot more components, plugins, and pages with the same quality and attention to detail as with this project.

Read more
2646 downloads
Price: $0
Released: 1 year ago
Updated: 2 months ago
Version: 4.0
Category: UI Kits
Well Documented
  • 6 months premium support included
  • 100% W3C valid HTML5 files
  • Future updates
  • Fully responsive pages
  • 30 day refund policy
  • Built by Themesberg

5 Hand-crafted Example Pages

After downloading Pixel - Free Bootstrap 5 UI KIT you will get 5 high-quality example pages to save you time writing boilerplate code and set up the user interface of your website or web application in no time.

Hover over any page below and if you click on one of them you will be able to live preview one of the example pages in your browser.


Folder structure

We believe that being transparent when it comes to the code base and the file structure can make you better understand how it is going to be like to actually work with Pixel Lite.

Below you can check out the folder structure of this template, and by hovering over each item you can also read an explanation of what the folder contains and what its role is.

You need only HTML, CSS and Javascript?

Don't worry, we got you covered. We have a folder called html&css which includes only the basic HTML5, CSS3 and Javascript technologies.

  • src
    • assets
    • html
    • partials
    • scss
    • index.html
  • html&css
  • .temp
  • dist
  • node_modules
  • gulpfile.js
  • package.json
  • README.md
  • .gitignore

Customer reviews

5.0 out of 5
3 Reviews for Pixel Lite
1 year ago
5

nice

1 year ago
5

Love it!

1 year ago
5

Cool!

Write a review

Changelog

We believe that providing meaningful updates to our templates are important to keep up with the evolution of the dependencies, libraries, and the new design requirements that the modern day web industry requires.

Below you can see the timeline of changes for Pixel Lite since its initial launch 1 year ago.

Releases

v4.0.0 - February 14. 2020 Latest release
  • Update to Bootstrap 5 Beta 2
  • Removed jQuery as a dependency
  • Improved Sass files and includes
  • Reduced final CSS file size
  • Improved component styling and functionality
  • Added dropdown items
  • Added tables
  • Added a new landing page
v3.1.2 - May 1, 2020 Stable release
  • This version uses an advanced vendor creation system instead of copying the whole node_modules folder when building dist and dev folders
  • Reduces the vendor folder size considerably
v3.1.1 - April 18, 2020
  • Added datepickers
  • Added navbars
  • Added login page
  • Added register page
  • Slightly updated sliders, checkboxes and radio buttons
v3.1.0 - April 11, 2020
  • Fix accessibility issues according to the WAVE evaluation tool and the achecker tool
v3.0.0 - April 7, 2020
  • Added Sass
  • Added Gulp
  • Dependencies now managed with NPM
  • WCAG 2.1 compatible colors
  • Improved components, sections and pages
v1.2.0 - Mar 15, 2020
  • Original version with the vibrant green color
v1.0.0 - July 7, 2019
  • Initial release files