bulma-ribbon

WebJar for bulma-ribbon

License	MIT
Categories	Ribbon Net HTTP Clients
GroupId	org.webjars.npm
ArtifactId	bulma-ribbon
Last Version	2.0.0
Release Date	Dec 23, 2018
Type	jar
Description	bulma-ribbon WebJar for bulma-ribbon
Project URL	http://webjars.org
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

How to add to project

Apache Maven

<!-- 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>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/bulma-ribbon/
implementation 'org.webjars.npm:bulma-ribbon:2.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/bulma-ribbon/
implementation ("org.webjars.npm:bulma-ribbon:2.0.0")

Apache Buildr

'org.webjars.npm:bulma-ribbon:jar:2.0.0'

Apache Ivy

<dependency org="org.webjars.npm" name="bulma-ribbon" rev="2.0.0">
  <artifact name="bulma-ribbon" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='bulma-ribbon', version='2.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "bulma-ribbon" % "2.0.0"

Leiningen

[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)

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 Dec 23, 2018