@aybolit/bulma v0.1.0

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

• Button
  • Colors
  • Sizes
  • Outline style
  • Rounded style
  • Fullwidth style - not currently supported.
  • Inverted style - not currently supported.
  • Loading state - not currently supported.
  • Static state - not planned.
• Checkbox
  • Colors
  • Sizes
  • Filled style
  • Rounded style - not planned.
  • Block style - not planned.
  • No-border style - not planned.
• Progress
  • Colors
  • Sizes
  • Indeterminate
• Range
  • Colors
  • Sizes
  • Rounded style
  • Vertical orientation - not currently supported.
• Switch
  • Colors
  • Sizes
  • Outlined style
  • 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.

Individual Components

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