diff --git a/docs/website/index.html b/docs/website/index.html index c9a6b1c..bb49dee 100644 --- a/docs/website/index.html +++ b/docs/website/index.html @@ -16,5202 +16,7 @@ -
- -
-
- -
-
- -
-
-

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.

-
-
- -
-
-
-

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:

-
    -
  • Background: bp-bg-{color}
    • -
  • Border: bp-bc-{color}
    • -
  • Text: bp-c-{color}
    • -
  • Button: bp-btn-{color} - see Button section for more!
    • -
  • Svg/Use fill: bp-fill-{color} - see below for more!
    • -
-

SVG fillings

- -

SVG icons, if inline or created with a use tag, can have their fill colors stylized. For that, you can use fill classes for the base element and for some pseudo classes:

-
    -
  • Base color: bp-fill-{color}
    • -
  • Hover color: bp-fill-{color}--hover
    • -
  • Active color: bp-fill-{color}--active
    • -
  • Disabled color: bp-fill-{color}--disabled
    • -
-

Those classes apply for all svg and use tags inside the component, so be careful!

-

Corporate Palette

- -

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

-
-
- - - Example - -
-
-
-
-
- - -
- - -

Semiotic Palette

- -

Semiotic colors carry recurrent meanings and transmit messages to users.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -
-
- -
-

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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%).

-
-
- - - Example - -
-
-
-
-
- - -
- - -

Font Weight

- -

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

-
-
- - - Example - -
-
-
-
-
- - -
- - -
-
- -
-
-
-

Icons and Logos

- - Source: - _icons\Hand-off.md - -

Icons and logos are handed-off as compressed SVGs, with specific names and sizes.

-

Icons are symbols used as semantic images, usually as action buttons or menu links. These symbols mostly will be saved on 24 pixels by 24 pixels (24x24px) SVG files. It is important to compress such files for smaller sizes. We recommend using Vecta's Nano SVG Compressor.

-

One-colored Icons

- -

One-colored icons must be saved with no fill modification (visually, they will be black). When a designer is creating such icons, they must think SVG areas should always be painted black (not filled) and hollow on the inside. It is better NOT to use masks or other tricks, but draw exactly the shape a designer wants before saving the SVG. In other words, icon shapes must be draw as they are, not be created with visual effects.

-

After saving one or many SVGs, one must pass such SVGs through cleaning-scripts and compression. These processes ensure the removal of unecessary bits inside the SVG for smaller sizes and better performance.

-
-
- -
-
-
-

Arrow

- - Source: - _components\Arrow.md - -

Arrows can be represented through SVGs also, but you can use the CSS arrow with bp-arrow followed by bp-arrow--up, bp-arrow--down, bp-arrow--right or bp-arrow--left. Their size is related to their current font size.

-

Since CSS arrows are made from a border hack, you must change border color in order to customize these arrows.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

-
-
- -
-

Badge

- - Source: - _components\Badge.md - -

Badges are interface elements that can contain or not text inside (usually numbers). They use the class bp-badge and have their size and padding related to their font-size. They have a minimum size of 1.6em, line-height of 1.6em and horizontal padding of 0.5em. A badge has blip-light as default background color and white as default text color. Also, they have bottom vertical alignment.

-

If you wish to use a badge only as a colored circle with no text, you can use the variant bp-badge--no-text. They have a smaller size of 1em, with no line-height and padding.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

-
-
- -
-

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

Size

- -

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

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

Rounded

- -

The variation bp-btn-rounded adds a rounding fashion of 8 pixels to the button.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

Arrow

- -

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

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

Text color

- -

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

-
-
- - - Example - -
-
-
-
-
- - -
- - -

Background color

- -

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

-
-
- - - Example - -
-
-
-
-
- - -
- - -
-
- -
-

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -
-
- -
-

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

-
-
- - - Example - -
-
-
-
-
- - -
- - -
-
- - - Example - -
-
-
-
-
- - -
- - -
-
- -
-

Dropdown

- - Source: - _components\Dropdown.md - -

Dropdowns are implemented through the base class bp-dropdown. They only delimit a dropdown's container CSS. Its size is decided by its content.

-

Dropdowns must have at least one variation of orientation - bp-dropdown--right or bp-dropdown--left - and one of visibility - bp-dropdown--show or bp-dropdown--hide.

-
-
- - - Example - -
-
-
-
-
- - -
- - -
-
- -
-

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -
-
- -
-

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.

-
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

- -
- - -
-
- - - Example - -
-
-
-
-
- - -
- - -

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.

-
-
- -
-
-
-

- - Toolkit -

- -
-
- - - -
-
- -
-
- -
- - Getting Started - -
- -
- - Welcome - -
- -
-
- -
- - Style - -
- -
- - Color - - - Typography - -
- -
-
- -
- - Icons - -
- -
- - Icons and Logos - -
- -
-
- -
- - Components - -
- -
- - Arrow - - - Badge - - - Button - - - Checkbox - - - Divider - - - Dropdown - - - Radio - - - Table - -
- -
-
- -
- No matches. -
- -
- - Generated by Stylemark - -
-
- - - - - - - - - - - - - +

Olá! Essa documentação foi descontinuada

+

Favor acessar design.take.net =)

+