Aybolit Bulma

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

Overview

Bulma framework and Bulma-extensions are used as a base, but Aybolit does not preserve all the original CSS and makes certain adjustments. The main idea behind these changes is flexible theming support, with reasonable bundle size.

Installation

Aybolit Bulma is available as npm package:

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

# with yarn
yarn add @aybolit/bulma

Import either all or individual components:

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

// button only
import { AbuButton } from '@aybolit/bulma';

You can also use get Aybolit Bulma from the CDN:

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

Components

• [x] Button
  • [x] Colors
  • [x] Sizes
  • [x] Outline style
  • [x] Rounded style
  • [ ] Fullwidth style - not currently supported.
  • [ ] Inverted style - not currently supported.
  • [ ] Loading state - not currently supported.
  • [ ] Static state - not planned.
• [x] Checkbox
  • [x] Colors
  • [x] Sizes
  • [x] Filled style
  • [ ] Rounded style - not planned.
  • [ ] Block style - not planned.
  • [ ] No-border style - not planned.
• [x] Progress
  • [x] Colors
  • [x] Sizes
  • [x] Indeterminate
• [x] Range
  • [x] Colors
  • [x] Sizes
  • [x] Rounded style
  • [ ] Vertical orientation - not currently supported.
• [x] Switch
  • [x] Colors
  • [x] Sizes
  • [x] Outlined style
  • [x] Rounded style
  • [ ] Thin style - not currently supported.

Examples

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

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

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

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

<!-- Switch -->
<abu-switch>Unchecked</abu-switch>
<abu-switch checked>Checked</abu-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.

Property	Description	Fallback
--abu-primary-h	Primary color hue	171
--abu-primary-s	Primary color saturation	100
--abu-primary-l	Primary color lightness	41
--abu-info-h	Info color hue	204
--abu-info-s	Info color saturation	86
--abu-info-l	Info color lightness	48
--abu-success-h	Success color hue	141
--abu-success-s	Success color saturation	71
--abu-success-l	Success color lightness	48
--abu-warning-h	Warning color hue	48
--abu-warning-s	Warning color saturation	100
--abu-warning-l	Warning color lightness	67
--abu-danger-h	Danger color hue	348
--abu-danger-s	Danger color saturation	100
--abu-danger-l	Danger color lightness	48

Individual Components

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

Component	Property	Description	Fallback
Button	--abu-button-bg-color	Un-themed button background	#fff
Button	--abu-button-border-color	Un-themed button border color	#dbdbdb
Button	--abu-button-color	Un-themed button color	#363636
Button	--abu-button-active-border-color	Un-themed active button border color	#4a4a4a
Button	--abu-button-hover-border-color	Un-themed hover button border color	#b5b5b5
Checkbox	--abu-checkbox-border-color	Unchecked state border color	#dbdbdb
Progress	--abu-progress-bar-color	Progress bar color	#dbdbdb
Progress	--abu-progress-value-color	Un-themed progress value color	#4a4a4a
Range	--abu-range-thumb-bg	Thumb background	#fff
Range	--abu-range-track-bg	Track background	#b5b5b5
Switch	--abu-switch-thumb-bg	Thumb background	#fff
Switch	--abu-switch-track-bg	Off state track background	#b5b5b5