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.)
- Créez un fichier _mon-module.scss dans le répertoire de votre projet.
- Commencez par définir les éventuelles nouvelles variables ou valeurs de variables (sans les faire suivre de
!default
). - Importez le module originel de Scampi
- Ajoutez ensuite vos éventuels propres mixins.
- 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.
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. Complétable par les sous-modules forms-error, forms-inline, forms-input-group, forms-required, forms-fieldset-discrete et forms-size. |
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. |
select-a11y | Module qui transforme un élément select (multiple ou non) en liste de suggestions avec champ de recherche à l'intérieur de cette liste. |
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 | Aide à la création de la palette des couleurs principales d'un site en fonction des valeurs renseignées dans les settings du projet. |