Bootstrap is great, especially now that Version 5 is out. At MindSpun, we used it to build our default Ghost theme Spin and our admin dashboard, plus a slew of other projects.
One thing we really hoped would be better was real support for Bootstrap CSS custom properties (e.g. CSS variables). Bootstrap 5 has them – but really, they’re just read-only values.
And one place we always seem to see this happening is also the place we wish we didn’t – Buttons.
Buttons are essential for grabbing your users attention, building CTA’s, and getting visitors to take action on your site.
So being able to customize them freely and with ease is a pretty big deal.
Our new Bootstrap-js-buttons package makes building buttons fast and straightforward, while still letting you control the things that matter.
The Bootstrap-JS-buttons library.
It also tackles SoC, by keeping your element generation separate from the styling, and allowing it to be dynamically altered, so you never have to worry about buttons again.
Features Included in Bootstrap-JS-buttons
We’ve made it possible (and painless!) to implement Bootstrap theming, including features like light/dark theme stylings, which are usually a total drag with Bootstrap CSS custom properties (but nearly impossible without them)
We’ve also solved the problem of static buttons.
Creating new button styles with static buttons requires you to define them in SASS using a mixin – and you can’t pass a CSS custom property to it because the SASS functions used are only available at build time.
We’ve worked around this problem by adding powerful functionality to Bootstrap which lets you leverage Bootstrap CSS custom properties to define the button styles easily, dynamically and in real-time.
Dynamic themes with Bootstrap
Bootstrap-js-buttons is especially great for Web 2.0 sites because it allows for complete flexibility in defining your buttons.
This allows you to create extremely flexible Bootstrap theming, that can be molded however you want with just a few function calls. (No more long lists of variables!)
This means our library gives you a standardized, readable way to code your buttons.
For instance – when a user changes a color – the button style changes – it’s that easy. (Try it in the live demo above!)
The package contains two functions corresponding to the two Bootstrap button mixins for defining button variants:
Calling one of these functions in JS defines a button with the given style. Calling it again redefines that style.
All of the standard BS5 configuration (the global SASS variables that you’d normally specify in _variables.scss) is passed to each function using the options parameter.
And the options parameters include all the SASS variables for button styling available in Bootstrap, allowing you to customize your buttons any way you want.
The new Bootstrap-js-buttons package
The buttons generated by the functions are also fully dynamic, so the user can control the styling based on their own preferences, without the developer lifting a finger (which is definitely a feature we wish wasn’t missing from Bootstrap!))
Want to see for yourself? Give it a try on the live demo above!
Available on GitHub, NPM and jsDelivr
CDN via jsDelivr
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-js-buttons.min.js"></script>