https://github.com/getmindspun/bootstrap-js-buttons
Create Bootstrap button variants in Javascript.
https://github.com/getmindspun/bootstrap-js-buttons
bootstrap javascript
Last synced: about 2 months ago
JSON representation
Create Bootstrap button variants in Javascript.
- Host: GitHub
- URL: https://github.com/getmindspun/bootstrap-js-buttons
- Owner: getmindspun
- Created: 2021-06-10T17:24:26.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-17T21:42:57.000Z (about 5 years ago)
- Last Synced: 2025-09-19T03:59:09.063Z (10 months ago)
- Topics: bootstrap, javascript
- Language: JavaScript
- Homepage:
- Size: 46.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
bootstrap-js-buttons
Create Bootstrap button variants in Javascript.
## Live Demo
https://getmindspun.github.io/bootstrap-js-buttons/
## Installation
### From CDN
```html
```
### As a module
```html
const bs = require('bootstrap-js-buttons');
```
## Quick Start
```js
bs.buttonVariant('.btn-accent-solid', '#FF1A75');
bs.buttonOutlineVariant('.btn-accent-outline', '#FF1A75');
```
## Motivation
Defining additional button styles in Bootstrap requires you to use a SASS mixin,
which you can only do at build time. This makes changing buttons at runtime impossible and
prevents common use cases like letting a user choose their accent color. Worse, you can't use
CSS custom properties for the colors since the SASS mixins won't work.
Defining the buttons in Javascript solves this and let's you redefine the style whenever
a color changes.
## How it works
Each call to one of the button functions generates an associated tag that
is added to the head element of the document. Calling the function again with the
same name replaces any previous styles so to update a given button variant, just
call the function again.
## Functions
There are two main functions corresponding to the SASS mixins *button-variant* and *button-outline-variant*.
**buttonVariant(name, background, border, options)**
**buttonOutlineVariant(name, color, options)**
### options
Each function takes an optional *options* parameter. Options correspond to SASS
variables in Bootstrap. In other words, what you'd modify in *_variables.scss* for Bootstrap
you pass as *options* in Javascript. The names are the same, just translated to
CamelCase. Below are the options and their associated default values.
```js
colorContrastLight = '#ffffff';
colorContrastDark = '#000000';
minContrastRatio = 4.5;
btnHoverBgShadeAmount = 15;
btnHoverBgTintAmount = 15;
btnHoverBorderShadeAmount = 20;
btnHoverBorderTintAmount = 10;
btnActiveBgShadeAmount = 20;
btnActiveBgTintAmount = 20;
btnActiveBorderShadeAmount = 25;
btnActiveBorderTintAmount = 10;
btnBoxShadow = `inset 0 1px 0 ${rgba('#ffffff', .15)}, 0 1px 1px ${rgba('#000000', .075)} !default`;
btnActiveBoxShadow = `inset 0 3px 5px ${rgba('#000000', .125)}`;
enableGradients = false;
enableShadows = false;
```