@alpeshabitat/bootwind NPM

Bootwind

Thème Bootstrap 5.3 inspiré de Tailwind CSS

⚠️ Disclaimer

Ce thème à été pensé pour les besoins spéfiques d'Alpes Isère Habitat et n'est pas destiné à une utilisation par le grand public. Il est fourni tel quel sans garantie d'aucune sorte.

Installation

npm i @alpeshabitat/bootwind

Utilisation

Le thème met a disposition un fichier du js et du css qui peut être utilisé directement dans votre projet.

Pour une utilisation avec un import en js

import '@alpeshabitat/bootwind' // js de bootstrap + sidebar
import '@alpeshabitat/bootwind/theme' // css du thème (bootstrap + custom)

Si besoin d'importer du js pour des composants spécifiques, ce package expose une copie du js de bootstrap original:

import { Popover } from '@alpeshabitat/bootwind/bootstrap' // js de bootstrap

Le fichiers js/css de boostrap sont inclus, vous n'avez pas besoin de l'installer dans votre projet.

Le thème contient également un script pour gérer une sidebar (voir exemple dans docs/exemples/twig). Il suffit d'ajouter la classe sidebar à un élément pour qu'il soit géré par le script. le js va alors surveiller les clicks sur un élément avec la classe sidebar-toggle pour ouvrir/fermer la sidebar en lui ajoutant/enlevant la classe sidebar--toggled.

<!-- SIDEBAR -->
<div class="sidebar sidebar--toggled">
    <!-- ... -->
</div>

<!-- SIDEBAR TOGGLE -->
<i class="fas fa-bars sidebar-toggle"></i>

⚠️ IMPORTANT:

La sidebar à été pensée pour l'intégrer avec le moins de code possible en utilisant un layout précis, (structure exacte en exemple dans docs/exemples/twig). Dans le cas contraire, il faudra adapter le style pour que la sidebar fonctionne correctement.

Exemples

Le dossier docs/exemples/twig contient un exemple d'utilisation du thème avec un layout basique (en twig, pour une utilisation avec symfony)

Personnalisation

Le thème est personnalisable via les certaines variables css. Les couleurs du theme sont prédéfinies et destinées à être utilisées telles quelles. Il est cepeandant possible de les modifier en modifiant les variables css suivantes: (remplacer variante par la variante souhaitée:

primary, secondary, success, danger, warning, info, light, dark)

:root {
    --theme-[variante]: ... ;
}

On aura notamment 8 variantes de couleurs possibles pour gérer les bordures, le texte et les fonds des différents composants qui se basent sur les couleurs du thème. Par ex:

:root {
    --theme-primary: ... ;
    --theme-primary-text: ... ;
    --theme-primary-darker: ... ;
    --theme-primary-lighter: ... ;

    /* notamment utilisé par les btn-outline-[variante] */
    --theme-primary-outline: ... ;
    --theme-primary-outline-text: ... ;
    --theme-primary-outline-darker: ... ;
    --theme-primary-outline-lighter: ... ;
}

Différences avec Bootstrap

Classes utilitaires

Le théme intégrera des classes dites "utilitaires" en fonction des besoins à venir. Actuellement, les classes suivantes sont disponibles:

.cursor-pointer: applique cursor: pointer;
.cursor-not-allowed: applique cursor: not-allowed;
.sorted .asc et .sorted .desc: applique une flèche de tri ascendant/descendant sur un élément
.badge-[variante]: applique une couleur de fond et de texte à un badge (voir variantes plus haut)
.shadow-[sm, md, lg, xl, xxl, inner]: Plus de variantes disponibles pour les ombres
.sidebar: applique le style de la sidebar (voir utilisation)

Couleurs

Les couleurs sont modifiables via des variables css spécifiques (voir Personnalisation)

Développement

Pour développer le thème, il est nécessaire d'installer les dépendances:

npm i

Pour compiler le thème:

npm run build
# ou
npm run watch

Les fichiers demo.html et app-layout.html sont des fichiers de démonstration du thème utiles pour voir rapidement les changements apportés et les potentiels impacts sur le reste des composants.

La commande suivante permet de compiler et publier le package sur NPM: