Utiliser Scampi dans un projet

Ne pas toucher à Scampi

Pour pouvoir bénéficier des mises à jour, il est conseillé d'utiliser Scampi comme une bibliothèque externe « intouchable » qu'on place à proximité des autres assets du projet. Dans Scampi-Twig par exemple, le répertoire des assets accueille deux sous-répertoires, celui de Scampi et celui du projet.

Régler et importer les settings

On commencera de toutes façons par placer dans les scss du projet une copie de _core-scampi-settings.scss, renommée et personnalisée et à l'importer dans le fichier maître. _core-mon_projet-settings.scss est le fichier qui définit toutes les variables transverses, les fontes, les breakpoints, etc.

Importer les autres fichiers

Suivront ensuite dans le fichier maître du projet les imports des fichiers de scampi utilisés tels quels, puis des fichiers personnalisant des composants de scampi et enfin des fichiers propres au projet.

À titre d'exemple, voici le fichier style.scss de ce site :

  @charset "UTF-8";

  @import "core/core-pidila-settings";
  @import "../../scampi/modules/fontface/fontface";
  @import "core/pidila-mixins";

  @import "../../scampi/core/version";
  @import "../../scampi/core/core-scampi-settings";
  @import "../../scampi/core/core-scampi-mixins";
  @import "../../scampi/core/core-scampi-basics";
  @import "../../scampi/core/core-scampi-helpers";

  @import "core/basics";

  @import "../../scampi/modules/alert/alert";
  @import "../../scampi/modules/skip-link/skip-link";
  @import "../../scampi/modules/svg-icons/svg-icons";

  @import "modules/buttons";
  @import "modules/card";
  @import "modules/code";
  @import "modules/collapse";
  @import "modules/focus";
  @import "modules/links";
  @import "modules/navbar-top";
  @import "modules/news";
  @import "modules/rwd-utils";
  @import "modules/secondary-nav";
  @import "modules/svg";
  @import "modules/tables";

  @import "partials/cat-charte";
  @import "partials/cat-scampi";
  @import "partials/footer";
  @import "partials/header";
  @import "partials/home";
  @import "partials/layout";

  // modules utilisés dans le styleguide ou la doc scampi
  @import "modules/figure";
  @import "../../scampi/modules/forms/forms";
  @import "../../scampi/modules/u-comments/u-comments";
  @import "../../scampi/modules/u-palette/u-palette";
  @import "partials/styleguide";
  @import "partials/scampi-demo";

  // ------------------------------------------------
  //  debug - section à ne pas embarquer en prod :
  //  indicateur du breakpoint
  //  + lignes horizontales pour contrôle rythme vertical
  // ------------------------------------------------

  // $debug-rwd : true;
  // @import "../../scampi/modules/u-debug/u-debug";
  // body {
  //   @include debug-rhythm();
  // }
  

Les informations données dans cette rubrique correspondent à la version 1.0 release candidate de Scampi, encore en développement. Pour lire la documentation de la version courante (0.2.1), référez-vous au readme du dépôt.