@aybolit/bootstrap v0.1.0

Aybolit Bootstrap

Aybolit Bootstrap is a set of the web components inspired by Bootstrap framework.

Overview

Bootstrap 4 is used as a base, but Aybolit does not preserve the original CSS, cuts some corners and makes adjustments here and there. The main idea behind these changes is flexible theming support, with reasonable bundle size.

The upcoming Bootstrap 5, expected to land this year, will likely introduce a lot of changes to be adapted by Aybolit. The first-class Web Components support for Bootstrap was requested, and is considered by maintainers as possible for v6.

Installation

Aybolit Bootstrap is available as npm package:

# with npm
npm i @aybolit/bootstrap --save

# with yarn
yarn add @aybolit/bootstrap

Import either all or individual components:

// all components
import '@aybolit/bootstrap';

// button only
import { AbsButton } from '@aybolit/bootstrap';

You can also use get Aybolit Bootstrap from the CDN:

<script src="https://unpkg.com/@aybolit/bootstrap@latest?module" type="module"></script>

Components

• Button
  • Outline
  • Sizes
  • Disabled state
  • Active state - setting programmatically not planned.
  • Toggle state - not currently supported.
• Checkbox
• Progress
  • Backgrounds
  • Sizes
  • Animated stripes - not currently supported.
  • Labels - not currently supported.
  • Multiple bars - not planned.
• Range
• Switch

Examples

<!-- Button -->
<abs-button>Button</abs-button>
<abs-button theme="primary">Primary theme</abs-button>
<abs-button size="small">Small size</abs-button>
<abs-button link="https://example.com">Link</abs-button>

<!-- Checkbox -->
<abs-checkbox>Unchecked</abs-checkbox>
<abs-checkbox checked>Checked</abs-checkbox>
<abs-checkbox indeterminate>Indeterminate</abs-checkbox>

<!-- Progress -->
<abs-progress value="50" max="100"></abs-progress>

<!-- Range -->
<abs-range min="0" max="10" value="5"></abs-range>

<!-- Switch -->
<abs-switch>Unchecked</abs-switch>
<abs-switch checked>Checked</abs-switch>

Theme Variants

All the components can be themed using theme attribute with one of the following values:

• primary
• info
• success
• warning
• danger

The colors for each theme variant can be adjusted using custom CSS properties listed below.

Custom CSS Properties

The following custom CSS properties are available for styling.

General Theme

Changing these properties affect all the components at the level of cascade where they are specified. Keep in mind that lightness level is used as base for automatic contrast adjustment, so changing it might affect e.g. buttons text color.

Individual Components

These properties expose certain colors not covered by general theme settings.