Getting Started

How start to use Biscuit Design Components.

Quick start (CDN)

html
<head>
    <link href="https://libs.iraiser.eu/libs/biscuit-design-components/2.0.0/biscuit-components.min.css" rel="stylesheet">
    <script src="https://libs.iraiser.eu/libs/biscuit-design-components/2.0.0/biscuit-components.min.js"></script>
</head>

The icon system is based on "Font Awesome" icons library by default.

html
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
</head>

Then include the BDC markup of each component. Of course, you can use any other library if you wish.

Installing locally (Package Manager)

NPM

terminal
npm install git+ssh://git@gitlab.iraiser.eu:suite/front/biscuit-design-components.git

Usage

Styles

You can load the main styles with two different way...

...all-in-one...

Load all styles in one time.

sass
@use "~@iraiser/biscuit-design-components/components/bdc-biscuit";

...or by component

Each component can be load independently of the others, example for text field component:

sass
@use "~@iraiser/biscuit-design-components/components/textfield/styles";

All Biscuit Design Components use the new Sass Module System, read this article for know everything about it and to use all components in good way.

JavaScript

Some components need to instantiate this own javascript, example for text field component:

javascript
import { BDCTextField } from '@iraiser/biscuit-design-components/components/textfield';

let textField = new BDCTextField(document.querySelector('.bdc-text-field'));
Menu