https://github.com/olrtg/bulma-fab-button

FAB (Floating Action Buttons) for Bulma
https://github.com/olrtg/bulma-fab-button

bulma css sass

Last synced: 2 months ago
JSON representation

FAB (Floating Action Buttons) for Bulma

• Host: GitHub
• URL: https://github.com/olrtg/bulma-fab-button
• Owner: olrtg
• License: mit
• Created: 2020-08-29T00:44:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-26T16:08:10.000Z (almost 3 years ago)
• Last Synced: 2024-10-01T14:59:56.338Z (3 months ago)
• Topics: bulma, css, sass
• Language: HTML
• Homepage:
• Size: 212 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![Example in the playground](./screenshot.png)



  bulma-fab-button





  A Bulma's extension for FABs (Floating Action Buttons).



## Quick start

```shell

npm i bulma-fab-button

```

## Import

You can import the .css or .sass file into your project after importing Bulma:

```scss

@import '../node_modules/bulma-fab-button/src/bulma-fab-button.sass';

```

## Usage

Basic usage:

```html



  



```

You can use colors like any other Bulma component:

```html



  





  





  





  





  





  



```

Also size modifiers (`.is-large`, `.is-small`):

```html



  





  



```

And position modifiers (`.is-left`, `.is-centered`, `.is-right`):

```html



  





  





  



```

## Customize

> For options available, take a look at the `_initial-variables.sass` file.

```scss

// Customize

$fab-circle-size: 4rem; // default: 3.75rem

$fab-h-space: 1rem; // default: 1.25rem

$fab-v-space: 1rem; // default: 1.25rem

// Then import

@import '../node_modules/bulma-fab-button/src/bulma-fab-button.sass';

```

## Copyright and license

Code copyright 2020 José Olórtegui. Code released under [the MIT license](https://github.com/olrtg/bulma-fab-button/blob/master/LICENSE).