https://github.com/alakise/bulma-floating-button

Bulma's extention for floating buttons.
https://github.com/alakise/bulma-floating-button

bulma bulma-css css sass

Last synced: 3 months ago
JSON representation

Bulma's extention for floating buttons.

• Host: GitHub
• URL: https://github.com/alakise/bulma-floating-button
• Owner: alakise
• License: mit
• Created: 2020-05-06T20:46:24.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-07-23T20:04:56.000Z (6 months ago)
• Last Synced: 2024-10-01T01:41:46.616Z (4 months ago)
• Topics: bulma, bulma-css, css, sass
• Language: HTML
• Size: 34.2 KB
• Stars: 14
• Watchers: 2
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# bulma-floating-button

Bulma's extension to create floating buttons

[![npm](https://img.shields.io/npm/v/bulma-floating-button)](https://www.npmjs.com/package/bulma-floating-button) ![NPM Downloads](https://img.shields.io/npm/d18m/bulma-floating-button)

## Quick install

### NPM

[NPM package](https://www.npmjs.com/package/bulma-floating-button)

```sh

npm install bulma-floating-button

```

### Import

You can import the CSS or SASS file into your project using this snippet after importing 'bulma':

```sh

import 'bulma-floating-button/dist/css/bulma-floating-button.min.css'

```

or

```sh

import 'bulma-floating-button/dist/css/bulma-floating-button.sass'

```

### Usage

You can use .is-floating with size and color modifiers

```html

    

        

    

    

        

    

    

        

    

    

        

    

    

        

    

    

        

    

    

            

        

    

    

        

    

    

        

    

    

        

    

    

        

    

```

Example

---

![Example usage](https://raw.githubusercontent.com/alakise/bulma-floating-button/master/example/index.png?token=AEICCE55L64XQKBNHPW4PZS6XRPD6)

Integration to Bulma

---

- Clone the [bulma repo](https://github.com/jgthms/bulma)

- Under the `sass` folder, create a new folder called `extensions`

- In this new folder, create a new file `bulma-floating-button.sass`

- Copy the code form the `bulma-floating-button repo`'s [dist/css/bulma-floating-button.sass](https://github.com/alakise/bulma-floating-button/blob/master/dist/css/bulma-floating-button.sass) file into your new file

- In the same folder create a new file `_all.sass` (this is not required, but will help when you add more extensions)

- In this file add this code:

```

@charset "utf-8"

@import "bulma-floating-button.sass"

```

At the end of the `bulma.sass` file, add this line: `@import "sass/extensions/_all"`

Now, you can just build the bulma project with `npm run build`, and the output will be available in the `css folder`.

OR

- Just add the 'bulma-floating-button.sass' or 'bulma-floating-button.min.css' in any way you want it.