@cityssm/bulma-cool-checkboxes

100% CSS based checkboxes for Bulma.io

Usage no npm install needed!

<script type="module">
  import cityssmBulmaCoolCheckboxes from 'https://cdn.skypack.dev/@cityssm/bulma-cool-checkboxes';
</script>

README

bulma-cool-checkboxes

npm Codacy Badge

100% CSS based checkbox for Bulma.io

Based on the work of Aslam Shah, hunzaboy/Cool-Checkboxes-for-Bulma.io, with the following changes.

  • Converted from CSS to SCSS.
  • Using Bulma colour variables for easier customization.
  • Made to work with Font Awesome 5.
  • Removed the styled class as it's always used.
  • Removed the is-circular class.
  • Removed the type="radio" styles.

How to use

npm install @cityssm/bulma-cool-checkboxes

To customize the colours in your SCSS, import the bulma-cool-checkboxes.scss file after Bulma.

# Set your Bulma variables before importing.

@import 'bulma/bulma';
@import '@cityssm/bulma-cool-checkboxes/bulma-cool-checkboxes';

If no customization is necessary (i.e. vanilla Bulma), just use the CSS.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="bulma-radio-checkbox.min.css" />