https://github.com/Wikiki/bulma-ribbon

Bulma's extension to show a ribbon on boxes
https://github.com/Wikiki/bulma-ribbon

Last synced: about 2 months ago
JSON representation

Bulma's extension to show a ribbon on boxes

• Host: GitHub
• URL: https://github.com/Wikiki/bulma-ribbon
• Owner: Wikiki
• License: mit
• Created: 2017-07-25T07:57:04.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-23T04:48:52.000Z (9 months ago)
• Last Synced: 2024-04-15T08:09:38.674Z (8 months ago)
• Language: JavaScript
• Size: 2.28 MB
• Stars: 54
• Watchers: 3
• Forks: 14
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: Changelog.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-bulma - bulma-ribbon - Bulma's extension to show a ribbon on boxes (Extensions / Courses)

README

        
# :exclamation::exclamation::exclamation: Looking for new Maintainer :exclamation::exclamation::exclamation:

As you may have noticed, this package has not been updated for some time. I'm sorry, but unfortunately I'm not able to continue to maintain it, so I'm looking for someone who would like to take it over and maintain it. If you are interested, please contact me at [email protected] to discuss how to proceed.

# bulma-ribbon

Bulma's extension to show a ribbon on boxes

(find all my bulma's extensions [here](https://wikiki.github.io/))

[![npm](https://img.shields.io/npm/v/bulma-ribbon.svg)](https://www.npmjs.com/package/bulma-ribbon)

[![npm](https://img.shields.io/npm/dm/bulma-ribbon.svg)](https://www.npmjs.com/package/bulma-ribbon)

[![Build Status](https://travis-ci.org/Wikiki/bulma-ribbon.svg?branch=master)](https://travis-ci.org/Wikiki/bulma-ribbon)

![Ribbon Element](https://img4.hostingpics.net/pics/737717ScreenShot20170810at095724.png)

Usage

---

```html



  


    


      
Default

      Box content

    

  

  


    


      
Primary

      Box content

    

  

  


    


      
Warning

      Box content

    

  

  


    


      
Danger

      Box content

    

  





  


  


    
Small ribbon

    Box content

  



  


    


      
Medium ribbon

      Box content

    

  


  


    


      
Large ribbon

      Box content

    

  





  


    


      
Left ribbon

      Box content

    

  


  


    


      
Bottom ribbon

      Box content

    

  



```


Modifiers

---

You can use standards color modifiers and you can change the ribbon's position using the following modifiers in replacement of has-ribbon class:

- has-ribbon-left

- has-ribbon-bottom

You can use the ```is-outlined``` modifier to remove background and just keep the border of the ribbon

Variables

---

This extension uses the following variables

Name | Description | Default value    

-----|-------------|---------------

$ribbon-color | Default ribbon text color | $grey-darker

$ribbon-background-color | Default background color of the ribbon | $white

$ribbon-border | Ribbon default border color | .1rem solid $grey-lighter

Demo

---

You can find a demo [here](https://codepen.io/wikiki/pen/XagrqJ)

Integration

---

- 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 `ribbon.sass`

- Copy the code form the `bulma-ribbon repo`'s [ribbon.sass](https://github.com/Wikiki/bulma-ribbon/blob/master/ribbon.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 "ribbon.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`.