Welcome

Source: introduction\Welcome.md

Hello, BLiPPER!

This is the documentation for BLiP Toolkit. Here you will get to know the classes and patterns which compose the elements from BLiP's platform.

BLiP Toolkit is a compilation of SCSS configuration and Vanilla JS components made to fit BLiP's needs. The toolkit was created in order to standardize CSS specifications and component behavious between all of BLiP's products. From the simplest details, like typography and section dividers, to more complex components, such as tag selectors, BLiP Toolkit makes for an easy implementation of styles and functionalities.

It is important to read the documentation and be aware of our design patterns. That way, the project's code will be more organized and future changes will be easier.

Design Principles

Our design principles help maintain a visual quality that reflects the values and characteristics of our brand.

  • Reliability through consistency: componentes must communicate with each other and be hierarchical, representing BLiP's design as a family in the smallest details.
  • Empowering users through simplicity: our design mitigates visual interference, helping users focus on what is important, learn and evolve faster.
  • Familiarity, elegance and innovation: Elements reproduce behaviour that mimics the real world: they have weight and are influenced by light, moviment and other phenomenons.
  • Constant evolution - "Level Up": Improvements are made alongside users, strengthening BLiP's community.

Installation

To install BLiP Toolkit in your project, use npm install blip-toolkit

You can also check our GitHub or NPM JS page.

Button

Source: components\Button.md

Buttons are implemented through the base class bp-btn. They have a min-width of 160px, an opaque background that darkens on hover and no border.

Size

There are two size variations that modify a button's minimum width: bp-btn--small (120px) and bp-btn--large (240px).

Flat

The variation bp-btn--flat has a transparent background and a solid border. Usually, its text and border have the same color and they darken on hover.

Dashed

The variation bp-btn--dashed has a transparent background and a dashed border. Usually, its text and border have the same color and they darken on hover.

Arrow

The variation bp-btn--arrow adds a pointy fashion to the button. It works for both base and flat buttons.

Text-only

The variation bp-btn--text-only not only makes the base button's background color transparent, but also its size fits the text inside. Its min-width is 0px, its height is auto, its line-height is 18px and its horizontal padding is smaller.

Custom colored: Base Button

Buttons have custom-colored variations for all colors in BLiP's palette. They can be applied using the variation bp-btn--{color}.

On the base class, the variation bp-btn--{color} sets the button's background color to the palette color and its text color to either black or white.

Custom colored: Flat & Dashed Buttons

In the flat and dashed variations, bp-btn--{color} sets the button's border and text color to the palette color.

Custom colored: Text-only Button

In the text-only variation, bp-btn--{color} sets only the button's text color to the palette color. The variation bp-btn--c-colorName will work the same way in this case.

Text color

The variation bp-btn--c-colorName modifies the button's text color.

Background color

The variation bp-btn--bg-colorName modifies the button's background color.

Checkbox

Source: components\Checkbox.md

Checkboxes are implemented with four elements in a certain configuration:

  • a label with class bp-input--check--wrapper englobing the others;
  • an input with class bp-input;
  • a div with class bp-input--checkbox;
  • and a span containing the text.

The code MUST be exactly as the following example's in order to get the desired result.

Divider

Source: components\Divider.md

Dividers are implemented through either bp-divider-h (horizontal) or bp-divider-v (vertical). They are basically lines with a width ranging from 1 to 3 px, depending on their variation: base (1px), bp-divider--medium (2px) or bp-divider--large (3px).

Radio

Source: components\Radio.md

Radios are implemented with four elements in a certain configuration:

  • a label with class bp-input--check--wrapper englobing the others;
  • an input with class bp-input;
  • a div with class bp-input--radio;
  • and a span containing the text.

The code MUST be exactly as the following example's in order to give the desired result.

Table

Source: components\Table.md

Tables are styled through the base class bp-table. They MUST respect the standards of a HTML5 table: have <table> englobing <thead><tr><th></th></tr></thead> and <tbody><tr><td></td></tr></tbody>.

The text-align property of bp-table is not defined for more flexibility.

Vertical Scroll

Tables also can have the bp-table--scroll-y variation, which allows its <tbody> to have vertical scroll if overflown. For that to work, you must manually declare the <tbody>'s maximum height.

Important: This variation transforms the table's display into flex. If you don't want any unexpected layout breaks, you must set all <th> and <td>'s width accordingly, so they respect one another.

Google Charts

Since Google Charts do not allow the addition of classes in its tables, you can use bp-table-chart and bp-table-chart--scroll-y on the table's parent. Also, bp-table-chart--sort can be used to add pointer cursor onto headers' sorting arrows and remove their outline.

Color

Source: style\Color.md

BLiP's color palette consists of three groups of colors: Corporates, Semiotics and Neutrals.

Insert classes containing a root followed by a color's name to apply color on:

  • Backgrounds: bp-bg-{color}
  • Borders: bp-bc-{color}
  • Text: bp-c-{color}

Corporate Palette

Corporate colors are nuances which feature BLiP's brand and must be used for highlighting and catching users' attention.

Semiotic Palette

Semiotic colors carry recurrent meanings and transmit messages to users.

Neutral Palette

Neutral colors are tones used in typography and the biggest part of the platform's components. These colors create a fluid experience, with no visual noise.

Gradients

Gradients are used in specific cases and consists of colors from the palette's spectrum.

Insert a class containing bp-grad-{gradient} to apply it as a background-image.

Typography

Source: style\Typography.md

BLiP's typography is defined by one particular font family: Nunito.

Although Nunito is embedded throughout every BLiP Toolkit component, you can apply it using bp-ff-nunito.

Font Size

There are eight custom font sizes, ordered by decrescent size.

Line Height

There are eight custom line heights, ordered by decrescent size and based on all font sizes.

These line heights are calculated by multiplying their respective font size by 1.5, according to W3's accessibility specifications.

There are also four relative line-height classes: bp-lh-zero (0%), bp-lh-simple (100%), bp-lh-plus (160%) and bp-lh-double (200%).

Font Weight

There are three custom font sizes: regular, bold and extra bold.

Toolkit

No matches.