Utiliser un module

Cette page présente la méthodologie de travail pour utiliser un module et la liste des modules disponibles avec une brève présentation de chacun d'entre eux.

Le répertoire de chaque module contient un fichier qui le présente et donne des exemples d'utilisation et le code html minimal nécessaire.

Comment utiliser un module ?

Deux voies vous sont offertes (nous recommandons la seconde).

Modification directe

Importez le module et opérez directement dans celui-ci les modifications ou adaptations que vous souhaitez y effectuer.

Attention, cette méthode est la plus simple à mettre en œuvre mais ne permettra pas de bénéficier de mises à jour ou enrichissements éventuels des modules.

Personnalisations distinctes

(L'ordre de cette liste est important.)

1. Créez un fichier _mon-module.scss dans le répertoire de votre projet.
2. Commencez par définir les éventuelles nouvelles variables ou valeurs de variables (sans les faire suivre de !default).
3. Importez le module originel de Scampi
4. Ajoutez ensuite vos éventuels propres mixins.
5. Ajoutez enfin vos propres règles de style.

Exemple

// personnalisation du module de blockquote
// fichier styles/mon-projet/mes-modules/_blockquote.scss

// module blockquote

// variables projet
$blockquote-border-color: $primary-color;

// import scampi (module npm)
@import "@pidila/scampi/modules/blockquote/index";
// import scampi (submodule git)
//@import "../../scampi/modules/blockquote/index";

// mixins projet

// styles projet
.blockquote {
  @include blockquote($font-size: 1em, $font-style: italic);

  padding-bottom: 0;
  padding-top: 0;

  p {
    margin-bottom: .5em;
  }

  .blockquote-footer {
    font-style: normal;
  }
}

Modules disponibles

Les liens renvoient vers la page de documentation et démonstration de chaque module.