Open-source Bootstrap Dashboard Kit

I am super happy to finally release this open-source project that I have worked on for a long time. The final goal is to make it the ideal starting point for your next web app built with Bootstrap 5. A free and minimal starter kit to build fast and modern dashboards and applications.

If you like it, please support this project with a star on Github.

Features

• Includes Eleventy static site generator for building the layouts and pages
• Includes Bootstrap (currently using v5) source files via npm
• Includes Webpixels CSS as our design system based on Bootstrap 5
• Includes npm scripts for compiling and auto prefixing Sass, compiling JS, watching for changes, and starting a basic local server
• HTML, CSS, and JS minification

Getting Started

For easier asset management we've chosen Parcel. If you want to see all the npm scripts included in this starter kit, open the package.json file.

Now, go ahead and read the documention. There are a few simple steps that will help you create the perfect setup for you dashboard project.

Highlights

This dashboard kit is architected as an extension of Bootstrap, built for a specific set of problems. This means not only extending the base components of Bootstrap, but also adding completely new components, utilities, and plugins.

Also, our themes and starter kits are different for several reasons:

No custom CSS code

Instead of creating new custom CSS classes, we have used utilities to avoid duplicate code and keep the code very clean. Every time you need a custom style or behavior for your components, try using our extended set of utility classes generated with the Bootstrap API

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col">
                <span class="h6 font-semibold text-muted text-sm d-block mb-2">Budget</span>
                <span class="h3 font-bold mb-0">$750.90</span>
            </div>
            <div class="col-auto">
                <div class="icon icon-shape bg-tertiary text-white text-lg rounded-circle">
                    <i class="bi bi-credit-card"></i>
                </div>
            </div>
        </div>
        <div class="mt-2 mb-0 text-sm">
            <span class="badge badge-pill bg-soft-success text-success me-2">
                <i class="bi bi-arrow-up me-1"></i>30%
            </span>
            <span class="text-nowrap text-xs text-muted">Since last month</span>
        </div>  
    </div>
</div>

Fully customizable via Sass variables

All the components are fully customizable via Sass variables and fully responsive to help you build your own dashboard designs with the most popular grid system included in Bootstrap 5. Learn more about how to build your own branded theme in minutes:

Documentation →

Extend it with our premium components and templates

Webpixels includes over 500 fully responsive Bootstrap components, carefully designed for specific use-cases, like marketing, application/dashboards, and more. All you need to do is to install Bootstrap and Webpixels CSS and start copying the ready-to-use bits of code.

That's it

I hope you'll find this resource valuable. In the following weeks I will take it a step further and prepare other features as well, such as:

• dark mode support
• chart exmaples
• and some new components

Comments