JarCasting
JarCasting JarCasting

bulma-ribbon

WebJar for bulma-ribbon

License

License

MIT
Categories

Categories

Ribbon Net HTTP Clients
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

bulma-ribbon
Last Version

Last Version

2.0.0
Release Date

Release Date
Type

Type

jar
Description

Description

bulma-ribbon
WebJar for bulma-ribbon
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

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

Download bulma-ribbon

Filename Size
bulma-ribbon-2.0.0.pom
bulma-ribbon-2.0.0.jar 8 KB
bulma-ribbon-2.0.0-sources.jar 22 bytes
bulma-ribbon-2.0.0-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/bulma-ribbon/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>bulma-ribbon</artifactId>
    <version>2.0.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/bulma-ribbon/
implementation 'org.webjars.npm:bulma-ribbon:2.0.0'
// https://jarcasting.com/artifacts/org.webjars.npm/bulma-ribbon/
implementation ("org.webjars.npm:bulma-ribbon:2.0.0")
'org.webjars.npm:bulma-ribbon:jar:2.0.0'
<dependency org="org.webjars.npm" name="bulma-ribbon" rev="2.0.0">
  <artifact name="bulma-ribbon" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='bulma-ribbon', version='2.0.0')
)
libraryDependencies += "org.webjars.npm" % "bulma-ribbon" % "2.0.0"
[org.webjars.npm/bulma-ribbon "2.0.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

bulma-ribbon

Bulma's extension to show a ribbon on boxes (find all my bulma's extensions here)

npm npm Build Status

Ribbon Element

Usage

<div class="columns is-multiline">
  <div class="column">
    <div class="box has-ribbon">
      <div class="ribbon">Default</div>
      Box content
    </div>
  </div>
  <div class="column">

    <div class="box has-ribbon">
      <div class="ribbon is-primary">Primary</div>
      Box content
    </div>
  </div>
  <div class="column">
    <div class="box has-ribbon">
      <div class="ribbon is-warning">Warning</div>
      Box content
    </div>
  </div>
  <div class="column">
    <div class="box has-ribbon">
      <div class="ribbon is-danger">Danger</div>
      Box content
    </div>
  </div>
</div>
<div class="columns is-multiline">
  <div class="column">
  <div class="box has-ribbon is-small">
    <div class="ribbon is-small is-primary">Small ribbon</div>
    Box content
  </div>
</div>

  <div class="column">
    <div class="box has-ribbon is-small">
      <div class="ribbon is-medium is-primary">Medium ribbon</div>
      Box content
    </div>
  </div>

  <div class="column">
    <div class="box has-ribbon is-small">
      <div class="ribbon is-large is-primary">Large ribbon</div>
      Box content
    </div>
  </div>
</div>
<div class="columns is-multiline">
  <div class="column">
    <div class="box has-ribbon-left is-small">
      <div class="ribbon is-small is-primary">Left ribbon</div>
      Box content
    </div>
  </div>

  <div class="column">
    <div class="box has-ribbon-bottom is-small">
      <div class="ribbon is-small is-primary">Bottom ribbon</div>
      Box content
    </div>
  </div>
</div>

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

Integration

  • Clone the bulma repo
  • 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 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.

Versions

Version
2.0.0