Bicustomstyle NPM

Sommaire

Installation
Unitlisation
- Importation
- Liste des classes disponible

Installation

npm install bicustomstyle

Utilisation

Importation

Chacun des fichiers est indépendant et peut-être importé seul. Si vous avez besoin de tous les fichiers, alors préférez importer seulement le fichier global bicustomstyle.scss. Il faudra obligatoirement importer le fichier utilities/variables.scss avant tout autre import.

Importer le fichier global :

@import "bicustomstyle/src/styles/utilities/variables";
@import "bicustomstyle/src/styles/bicustomstyle";

Importer un fichier spécifique :

@import "bicustomstyle/src/styles/utilities/variables";
@import "bicustomstyle/src/styles/base/root";
@import "bicustomstyle/src/styles/base/buttons";

Vous pouvez surcharger chacune des variables en important les vôtres juste après l'import du fichier utilities/variables.scss:

@import "bicustomstyle/src/styles/utilities/variables";

@import "..." // Importez vos variables ici

@import "bicustomstyle/src/styles/bicustomstyle";

Liste des classes disponibles

Important : les classes indispensables pour chaque élément sont mises en gras.

Boutons : importer le fichier `buttons.scss`

btn
btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark
btn-large
btn-no-border
btn-bg
btn-nowrap
btn-full-width
btn-border-color

Grids : importer le fichier `grids.scss`

container
container-fluid
- container-content
- row
- col, col-1, col-2, col-3, col-4, col-5, col-6, col-7, col-8, col-9, col-10, col-11, col-12

Alerts : importer le fichier `alerts.scss`

alert
alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, alert-dark
- alert-link

Navbar : importer le fichier `navbar.scss`

navbar
navbar-primary, navbar-secondary, navbar-success, navbar-danger, navbar-warning, navbar-info, navbar-light, navbar-dark
- navbar-brand

Table : importer le fichier `table.scss`

table-component
- input
- btn-toggle
  - toggle-icon
  - toggle-content
    - toggle-item
- container-table-filters
  - table-filters
- container-table
  - table
  - table-striped
    - th
      - th-sort
        sort-icon
        sort-icon-selected
- container-table-pagination
  - pagination-informations
  - pagination-navigation

Formulaire : importer le fichier `forms.scss`

container-form
- container-input
  - form-input
  - container-checkbox-radio
  - align-row / align-column
    - disabled
    - form-input-checkbox / form-input-radio
      - checkmark
  - form-error
  - submit-input