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
@import "../../scampi/modules/blockquote/blockquote";

// 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

nom Description
adobe-blank À ajouter en complément du module fonticon pour cacher des alternatives aux icônes si elles sont utilisées en fonte d'icônes.
alert Messages d'alerte (information, succès, warning, danger/erreur).
anchor-focus Corrige un bug de focus sur Chrome/Safari/IE.
blockquote Blocs de citation.
breadcrumb Fil d'ariane
browsehappy Affichage et styles d'un bloc recommandant la mise à jour des versions obsolètes d'Internet Explorer.
buttons Boutons et groupes de boutons.
collapse Affichage/Masquage de blocs de contenu.
fontface Gestion des webfonts.
fonticon Règles pour la mise en œuvre de fonte d'icônes ; à utiliser en parallèle avec le module adobe-blank pour l'accessibilité.
forms Formulaires.
input-group Gestion des groupes de champs de formulaires.
menu-simple Version basique d'un menu horizontal responsive à un seul niveau.
modal Fenêtres modales.
pagination Affichage de la pagination.
rwd-utils Fonctions, mixins et styles utilitaires pour le responsive.
site-banner-simple Version basique d'un entête de site avec logo et nom du site (peut servir de base pour un placement de marianne).
skip-link Liens d'évitement, aussi appelés liens d'accès rapides.
svg-icons Permet l'utilisation de sprite d'icônes au format svg.
tables Tableaux (dont responsive).
textarea-counter Affiche le nombre de caractères restant lorsque le champ de saisie est limité.
u-comments Afficher/maquer des "post-it" de commentaires pendant la phase de développement.
u-debug Divers utilitaires de debug : points de rupture, maps, rythme horizontal.
u-palette Création automatique d'une palette des couleurs principales d'un site en fonction des valeurs renseignées dans les settings du projet.