Trowel-badges

Star
The Trowel project is abandonned. Trowel core and the Trowel components are no more maintained or supported. More infos

Download

You can fetch Trowel Badges with npm, yarn or bower.

# With bower
$ bower install --save trowel-badges

# With npm
$ npm install --save trowel-badges

# With yarn
$ yarn add trowel-badges

You can also download a zip archive right here.

Installation

Scss

The main scss file to include to your main .scss file is located at the ./src/scss/badges.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Badges
@import './path/to/dependencies/trowel-badges/src/scss/badges';

Usage

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h1>Example heading <span class="badge">New</span></h1>
<h2>Example heading <span class="badge">New</span></h2>
<h3>Example heading <span class="badge">New</span></h3>
<h4>Example heading <span class="badge">New</span></h4>
<h5>Example heading <span class="badge">New</span></h5>
<h6>Example heading <span class="badge">New</span></h6>

Themes

By default, you have access to 5 themes, but you can through trowel variable edit, delete or add themes.

default
primary
success
warning
danger
<div class="badge">default</div>
<div class="badge badge--primary">primary</div>
<div class="badge badge--success">success</div>
<div class="badge badge--warning">warning</div>
<div class="badge badge--danger">danger</div>

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

VARIABLE DEFAULT VALUE DESCRIPTION
$badges--syntax null syntax config syntax | null .badge

Component variables

VARIABLE DEFAULT VALUE DESCRIPTION
$badges--font-size 0.75em set the font-size property
$badges--font-family 'Open Sans', verdana, sans-serif set the font-family property
$badges--font-weight null set the font-weight property
$badges--text-transform null set the text-transform property
$badges--letter-spacing null set the letter-spacing property
$badges--line-height 1 set the line-height property
$badges--text-decoration null set the text-decoration property
$badges--margin null set the margin property
$badges--border-width null set the border-width property
$badges--border-style null set the border-style property
$badges--border-color null set the border-color property
$badges--border-radius 0.2em set the border-radius property
$badges--color rgb(255, 255, 255) set the color property
$badges--box-shadow null set the box-shadow property
$badges--background null set the background property
$badges--background-color (
  'default': rgb(155, 155, 157),
  '-primary': rgb(31, 13, 51),
  '-success': rgb(55, 211, 189),
  '-warning': rgb(255, 176, 0),
  '-danger': rgb(253, 65, 100),
)
set the background-color property
$badges--padding 0.2em 0.4em set the padding property