Installation

Source: styles.scss

To use this library inside other projects you can use both the SASS or CSS files. Add the package into a npm based project. Add the following to package.json:

"billmate-style-library": "git+https://<GITHUB_TOKEN>@github.com/Billmate/billmate-style-library.git#<VERSION>"

CSS

To use the CSS file.

@import '~billmate-style-library/css/styles.css';

To use the minified CSS file.

@import '~billmate-style-library/css/styles.min.css';

SASS

To use the SASS file and the framework.

@import '~billmate-style-library/sass/styles.scss';

Then there is a need to override the SASS variable with the correct path.

$billmate-resource-path: '~billmate-style-library';

Overview

Source: styles.scss

A frontend styling library for using Billmate styles. It is built upon the CSS framework called Bulma (https://bulma.io/) and contains the icon library Font Awesome (https://fontawesome.com/).

So basically any component or styling from Bulma documentation (https://bulma.io/documentation/) can be used but with a Billmate look and feel.

Color palette

Source: _variables.scss

The available color palettes.

Example

<div style="background: #000000;">$black</div>
<div style="background: #FFFFFF;">$white</div>

<div style="background: #08415E;">$blue700</div>
<div style="background: #0C628D;">$blue600</div>
<div style="background: #0F7AB0;">$blue500</div>
<div style="background: #14A3EB;">$blue400</div>
<div style="background: #4FBAF0;">$blue300</div>
<div style="background: #95D6F6;">$blue200</div>
<div style="background: #D0EDFB;">$blue100</div>
<div style="background: #ECF8FD;">$blue50</div>

<div style="background: #5D2509;">$orange700</div>
<div style="background: #8C370D;">$orange600</div>
<div style="background: #AF4510;">$orange500</div>
<div style="background: #E95C16;">$orange400</div>
<div style="background: #EF8550;">$orange300</div>
<div style="background: #F5B696;">$orange200</div>
<div style="background: #FBDED0;">$orange100</div>
<div style="background: #FDF2EC;">$orange50</div>

<div style="background: #145238;">$green700</div>
<div style="background: #1F7A54;">$green600</div>
<div style="background: #269969;">$green500</div>
<div style="background: #33CC8C;">$green400</div>
<div style="background: #66D9A9;">$green300</div>
<div style="background: #A3E8CB;">$green200</div>
<div style="background: #D6F5E8;">$green100</div>
<div style="background: #EFFBF6;">$green50</div>

<div style="background: #5E1A08;">$red700</div>
<div style="background: #8D270C;">$red600</div>
<div style="background: #B0310F;">$red500</div>
<div style="background: #EB4114;">$red400</div>
<div style="background: #F0704F;">$red300</div>
<div style="background: #F6A995;">$red200</div>
<div style="background: #FBD9D0;">$red100</div>
<div style="background: #FDF0EC;">$red50</div>

<div style="background: #5D4109;">$yellow700</div>
<div style="background: #8C620D;">$yellow600</div>
<div style="background: #AF7A10;">$yellow500</div>
<div style="background: #E9A316;">$yellow400</div>
<div style="background: #EFBA50;">$yellow300</div>
<div style="background: #F5D696;">$yellow200</div>
<div style="background: #FBEDD0;">$yellow100</div>
<div style="background: #FDF8EC;">$yellow50</div>

<div style="background: #222222;">$grey800</div>
<div style="background: #3B3B3B;">$grey700</div>
<div style="background: #595959;">$grey600</div>
<div style="background: #6F6F6F;">$grey500</div>
<div style="background: #949494;">$grey400</div>
<div style="background: #AFAFAF;">$grey300</div>
<div style="background: #CFCFCF;">$grey200</div>
<div style="background: #EAEAEA;">$grey100</div>
<div style="background: #F6F6F6;">$grey50</div>

<div style="background: #2F3237;">$platinum700</div>
<div style="background: #464A53;">$platinum600</div>
<div style="background: #585D68;">$platinum500</div>
<div style="background: #757C8A;">$platinum400</div>
<div style="background: #989DA7;">$platinum300</div>
<div style="background: #C1C4CA;">$platinum200</div>
<div style="background: #E3E5E8;">$platinum100</div>
<div style="background: #F4F5F6;">$platinum50</div>

<div style="background: #443C37;">$beige700</div>
<div style="background: #655B52;">$beige600</div>
<div style="background: #7F7167;">$beige500</div>
<div style="background: #A99789;">$beige400</div>
<div style="background: #BFB1A7;">$beige300</div>
<div style="background: #D8D0CA;">$beige200</div>
<div style="background: #EEEAE7;">$beige100</div>
<div style="background: #F8F7F6;">$beige50</div>

Font

Source: _fonts.scss

The available fonts are:

BuenosAires
Sofia Pro

Example

<h1 class="displayL">BuenosAires</h1>
<h1 class="title is-1">Sofia Pro</h1>

Background

Source: _colors.scss

The background colors types available.

Example

<div class="backgroundPrimary">Background Primary</div>
<div class="backgroundSecondary">Background Secondary</div>
<div class="backgroundTertiary">Background Tertiary</div>
<div class="backgroundInversePrimary">Background Inverse Primary</div>
<div class="backgroundInverseSecondary">Background Inverse Secondary</div>
<div class="backgroundInverseTertiary">Background Inverse Tertiary</div>

Background Extensions

Source: _colors.scss

The background colors extensions available.

Example

<div class="backgroundStateDisabled">Background State Disabled</div>
<div class="backgroundAccent">Background Accent</div>
<div class="backgroundPositive">Background Positive</div>
<div class="backgroundNegative">Background Negative</div>
<div class="backgroundWarning">Background Warning</div>
<div class="backgroundLightAccent">Background Light Accent</div>
<div class="backgroundLightPositive">Background Light Positive</div>
<div class="backgroundLightNegative">Background Light Negative</div>
<div class="backgroundLightWarning">Background Light Warning</div>
<div class="backgroundOverlayLight">Background Overlay Light</div>
<div class="backgroundOverlayLightDark">Background Overlay Light Dark</div>

Basics

Source: _colors.scss

The basic colors types available.

Example

<div class="primaryA">Primary A</div>
<div class="primaryB">Primary B</div>
<div class="accent">Accent</div>
<div class="positive">Positive</div>
<div class="warning">Warning</div>
<div class="negative">Negative</div>

Border

Source: _colors.scss

The border colors that can be used with any element.

Example

<div class="borderDefault">Border Default</div>
<div class="borderSelected">Border Selected</div>
<div class="borderInverseDefault">Border Inverse Default</div>
<div class="borderInverseSelected">Border Inverse Selected</div>

Border extensions

Source: _colors.scss

The border colors that can be used with any element.

Example

<div class="borderStateDisabled">Border State Disabled</div>
<div class="borderAccent">Border Accent</div>
<div class="borderAccentLight">Border Accent Light</div>
<div class="borderNegative">Border Negative</div>
<div class="borderPositive">Border Positive</div>
<div class="borderWarning">Border Warning</div>

Content

Source: _colors.scss

The text colors that can be used with <p> elements or any element with text.

Example

<div class="contentPrimary">Content Primary</div>
<div class="contentSecondary">Content Secondary</div>
<div class="contentTertiary">Content Tertiary</div>
<div class="contentInversePrimary">Content Inverse Primary</div>
<div class="contentInverseSecondary">Content Inverse Secondary</div>
<div class="contentInverseTertiary">Content Inverse Tertiary</div>

Text extensions

Source: _colors.scss

The text colors that can be used with <p> elements or any element with text.

Example

<div class="contentStateDisabled">Content State Disabled</div>
<div class="contentAccent">Content Accent</div>
<div class="contentNegative">Content Negative</div>
<div class="contentPositive">Content Positive</div>
<div class="contentWarning">Content Warning</div>

Display

Source: _typography.scss

Display types can be used on any element that contains text.

Example

<p class="displayL">Display Large</p>
<p class="displayM">Display Medium</p>
<p class="displayS">Display Small</p>
<p class="displayXS">Display Extra Small</p>

Headers

Source: _typography.scss

Headers are <h1>, <h2>, <h3>, <h4>, <h5> and <h6> elements.

Example

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

Heading

Source: _typography.scss

Heading types can be used with <h1>, <h2>, <h3>, <h4>, <h5> and <h6> elements.

Example

<h1 class="headingXLarge">Heading Extra Large</h1>
<h1 class="headingLarge">Heading Large</h1>
<h1 class="headingM">Heading Medium</h1>
<h1 class="headingSmall">Heading Small</h1>
<h1 class="headingXSmall">Heading Extra Small</h1>
<h1 class="headingXXSmall">Heading Extra Extra Small</h1>

Label

Source: _typography.scss

Heading types can be used any type of text elements.

Example

<div class="labelLarge">Label Large</div>
<div class="labelMedium">Label Medium</div>
<div class="labelSmall">Label Small</div>
<div class="labelXSmall">Label Extra Small</div>

Paragraph

Source: _typography.scss

Heading types can be used with <p> elements.

Example

<p class="paragraphLarge">Paragraph Large</p>
<p class="paragraphMedium">Paragraph Medium</p>
<p class="paragraphSmall">Paragraph Small</h1>
<p class="paragraphXSmall">Paragraph Extra Small</p>

Button

Source: elements/_buttons.scss

Buttons can be used with <a>, <button>, and <input> elements.

Types of buttons:

Rectangle Primary: Standard button
Rectangle Secondary: Add an secondary indication over the primary button
Rectangle Tertiary: Add an tertiary indication over the other button types

Example

<button class="button rectanglePrimary">Rectangle Primary</button>
<button class="button rectanglePrimary">
  <span class="icon">
    <i class="bm-icon-placeholder"></i>
  </span>
  <span>Rectangle Primary</span>
</button>
<button class="button rectanglePrimary">
  <span class="is-left">Rectangle Primary</span>
  <span class="icon">
    <i class="bm-icon-arrow-right"></i>
  </span>
</button>
<button class="button rectanglePrimary content-space-between">
  <span>Rectangle Primary</span>
  <span class="icon">
    <i class="bm-icon-arrow-right"></i>
  </span>
</button>
<button class="button rectanglePrimary mediumLabel">Rectangle Primary - medium button</button>
<button class="button rectanglePrimary smallLabel">Rectangle Primary - small button</button>
<button class="button rectangleSecondary">Rectangle Secondary</button>
<button class="button rectangleTertiary">Rectangle Tertiary</button>

Check

Source: elements/_controls.scss

Check can be used with <input> elements.

Example

<div class="field">
  <input id="checkExample" type="checkbox" name="checkExample" class="is-checkradio">
  <label for="checkExample">Check example</label>
</div>
<div class="field">
  <input id="checkExampleEnabledDisabled" type="checkbox" name="checkExampleEnabledDisabled" class="is-checkradio" checked disabled>
  <label for="checkExampleEnabledDisabled">Check example enabled disabled</label>
</div>
<div class="field">
  <input id="checkExampleDisabled" type="checkbox" name="checkExampleDisabled" class="is-checkradio" disabled>
  <label for="checkExampleDisabled">Check example disabled</label>
</div>

Input

Source: elements/_inputs.scss

Input can be used with <input>, <textarea>, and <select> other form based elements.

Types of inputs:

Standard input: Standard input without any accent
Positive input: Input with positive accent
Negative input: Input with negative accent

Example

<input type="text" class="input" placeholder="Placeholder text" />
<input type="text" class="input" value="Standard input" />
<div class="control has-icons-right">
  <input type="text" class="input positive" value="Positive input" />
  <span class="icon is-small is-right">
    <i class="bm-icon-check contentPositive"></i>
  </span>
</div>
<div class="control has-icons-right">
  <input type="text" class="input negative" value="Negative input" />
  <span class="icon is-small is-right">
    <i class="bm-icon-alert contentNegative"></i>
  </span>
</div>
<input type="text" class="input" disabled value="Disabled input" />

Input - hint helpers

Source: elements/_inputs.scss

Hin helpers can be used with <p> in structure with field class.

Example

<div class="field">
  <input type="text" class="input" value="Standard input" />
  <p class="help is-success">Helper success</p>
</div>
<div class="field">
  <input type="text" class="input" value="Standard input" />
  <p class="help is-danger">Helper danger</p>
</div>

Pill

Source: elements/_buttons.scss

Pills can be used with <a>, <button>, and <input> elements.

Types of pills:

Pill Primary: Standard pill
Pill Secondary: Add an secondary indication over the primary pill
Pill Tertiary: Add an tertiary indication over the other pill types

Example

<button class="button pillPrimary">Pill Primary</button>
<button class="button pillPrimary mediumLabel">Pill Primary - medium button</button>
<button class="button pillPrimary smallLabel">Pill Primary - small button</button>
<button class="button pillSecondary">Pill Secondary</button>
<button class="button pillTertiary">Pill Tertiary</button>

Radio

Source: elements/_controls.scss

Radio can be used with <input> elements.

Example

<div class="field">
  <input id="radioExample1" type="radio" name="radioExample" class="is-checkradio" checked>
  <label for="radioExample1">Radio example 1 checked</label>
  <input id="radioExample2" type="radio" name="radioExample" class="is-checkradio">
  <label for="radioExample2">Radio example 2</label>
</div>
<div class="field">
  <input id="radioExampleEnabledDisabled" type="radio" name="radioExampleEnabledDisabled" class="is-checkradio" checked disabled>
  <label for="radioExampleEnabledDisabled">Radio example enabled disabled</label>
</div>
<div class="field">
  <input id="radioExampleDisabled" type="radio" name="radioExampleDisabled" class="is-checkradio" disabled>
  <label for="radioExampleDisabled">Radio example disabled</label>
</div>

Select

Source: elements/_selects.scss

Select can be used with <select> elements.

Example

<div class="control">
  <div class="select">
    <select>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
</div>
<div class="control has-icons-right">
  <div class="select positive">
    <select>
      <option selected>Country</option>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
    <span class="icon is-right">
      <i class="bm-icon-check contentPositive"></i>
    </span>
  </div>
</div>
<div class="control has-icons-right">
  <div class="select negative">
    <select>
      <option>Select dropdown Negative</option>
      <option>With options and longer options</option>
    </select>
    <span class="icon is-right">
      <i class="bm-icon-alert contentNegative"></i>
    </span>
  </div>
</div>
<div class="control">
  <div class="select">
    <select disabled>
      <option>Select dropdown disabled</option>
      <option>With options</option>
    </select>
  </div>
</div>

Switch

Source: elements/_controls.scss

Switch can be used with <input> elements.

Example

<div class="field">
  <input id="switchExample" type="checkbox" name="switchExample" class="switch" checked="checked">
  <label for="switchExample">Switch example</label>
</div>

Tags

Source: elements/_tags.scss

Tags can be used with <div> or <span> elements.

Example

<div class="tags-static backgroundSecondary"><span class="contentPrimary">Waiting for delivery</span></div>
<div class="tags-static backgroundLightPositive">Paid</div>
<div class="tags-static backgroundLightAccent">7 days left</div>
<div class="tags-static backgroundLightNegative">4 days late</div>

Basic

Source: _icons.scss

Basic icons can be used with <i> and <span> elements and within <input> and <button>.

Example

<span class="icon">
  <i class="bm-icon-cross-circle-outlined"></i>
</span>
<span class="icon">
  <i class="bm-icon-cross-circle-solid"></i>
</span>
<span class="icon">
  <i class="bm-icon-cross"></i>
</span>
<span class="icon">
  <i class="bm-icon-check"></i>
</span>
<span class="icon">
  <i class="bm-icon-alert"></i>
</span>
<span class="icon">
  <i class="bm-icon-chat"></i>
</span>
<span class="icon">
  <i class="bm-icon-bell"></i>
</span>
<span class="icon">
  <i class="bm-icon-search"></i>
</span>
<span class="icon">
  <i class="bm-icon-options"></i>
</span>
<span class="icon">
  <i class="bm-icon-copy-v1"></i>
</span>
<span class="icon">
  <i class="bm-icon-copy-v2"></i>
</span>

Direction

Source: _icons.scss

Direction icons can be used with <i> and <span> elements and within <input> and <button>.

Example

<span class="icon">
  <i class="bm-icon-arrow-left"></i>
</span>
<span class="icon">
  <i class="bm-icon-arrow-up"></i>
</span>
<span class="icon">
  <i class="bm-icon-arrow-down"></i>
</span>
<span class="icon">
  <i class="bm-icon-arrow-right"></i>
</span>
<span class="icon">
  <i class="bm-icon-chevron-left"></i>
</span>
<span class="icon">
  <i class="bm-icon-chevron-up"></i>
</span>
<span class="icon">
  <i class="bm-icon-chevron-down"></i>
</span>
<span class="icon">
  <i class="bm-icon-chevron-right"></i>
</span>

Input states

Source: _icons.scss

User icons can be used with <i> and <span> elements and within <input> and <button>.

Example

<span class="icon">
  <i class="bm-check-enabled"></i>
</span>
<span class="icon">
  <i class="bm-check-enabled-off"></i>
</span>
<span class="icon">
  <i class="bm-bullet-enabled"></i>
</span>
<span class="icon">
  <i class="bm-bullet-enabled-off"></i>
</span>

Misc

Source: _icons.scss

Misc icons can be used with <i> and <span> elements and within <input> and <button>.

Example

<span class="icon">
  <i class="bm-icon-placeholder"></i>
</span>

Payment

Source: _icons.scss

Payment icons can be used with <i> and <span> elements and within <input> and <button>.

Example

<span class="icon">
  <i class="bm-icon-mastercard"></i>
</span>
<span class="icon">
  <i class="bm-icon-credit-card-v1"></i>
</span>
<span class="icon">
  <i class="bm-icon-credit-card-v2"></i>
</span>
<span class="icon">
  <i class="bm-icon-bank-id-sv"></i>
</span>

Progress

Source: _icons.scss

User icons can be used with <i> and <span> elements and within <input> and <button>.

Example

<svg class="bm-spinner" width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="48" cy="48" r="44" stroke="#E3E5E8" stroke-width="8"/>
    <path d="M92 48C92 23.6995 72.3005 4 48 4C23.6995 4 4 23.6995 4 48C4 72.3005 23.6995 92 48 92" stroke="black" stroke-width="8"/>
</svg>

User

Source: _icons.scss

User icons can be used with <i> and <span> elements and within <input> and <button>.

Example

<span class="icon">
  <i class="bm-profile-circular"></i>
</span>
<span class="icon">
  <i class="bm-profile"></i>
</span>