Buttons

Présentation

Le module buttons de Scampi reprend l'essentiel du code du module buttons de Bootstrap 4 en l'adaptant aux principes de Scampi :

  • une base pour l'usage courant ;
  • des sous-modules optionnels pour ajouter des styles particuliers ;
  • la définition des variables du module dans un fichier du module et non dans le fichier de settings généraux ;
  • une attention particulière sur l'accessibilité.

Le module est composé d'un fichier maître (_buttons.scss) dans lequel sont définies toutes les variables et où l'on peut commenter ou décommenter l'import de styles complémentaires selon les besoins du projet.

Le partial _styles-buttons.scss est indispensable tandis que les autres partials scss du module préfixés _styles-buttons-xxxxxxx sont optionnels en fonction des besoins du projet.

Utilisation

La présentation des boutons passe presque uniquement par la personnalisation des variables et l'ajout de classes sur les éléments html.

Tout le socle commun des boutons est donné par la class btn ; d'autres classes viennent affiner la présentation ou ajouter des styles pour des besoins spécifiques. On trouve ainsi des partials pour :

  • buttons-block : afficher des boutons sur toute la largeur disponible offerte par le parent ;
  • buttons-color : faire varier la couleur du fond et/ou des bordures des boutons ;
  • buttons-group : regrouper les boutons en "barres" ;
  • buttons-link : donner l'aspect d'un lien à un bouton ;
  • buttons-size : faire varier les tailles des boutons.

Mixins disponibles

Le module met trois mixins à disposition, importés avec le module de base :

  • button-variant : pour créer ou modifier les fonds, bordures et couleurs de texte ; gère aussi les états active, hover, focus ;
  • button-outline-variant : comme ci-dessus mais pour des boutons outline ;
  • button-size : pour faire varier la taille des boutons (texte, padding...)

Exemples pour les éléments de base

<h3>Bouton simple (uniquement la class btn)</h3>
<p><button type="button" class="btn" title="Envoyer">Envoyer</button></p>

<h3 >Bouton primaire (class btn-primary)</h3>
<p><button type="submit" class="btn btn-primary" title="Valider">Valider</button></p>

<h3>Bouton secondaire (class btn-secondary)</h3>
<p><button type="reset" class="btn btn-secondary" title="Annuler">Annuler</button></p>

<h3>Boutons désactivés (attribut disabled)</h3>
<button type="button" class="btn" disabled>Bouton simple</button>
<button type="button" class="btn btn-primary" disabled>Bouton primaire</button>
<button type="button" class="btn btn-secondary" disabled>Bouton secondaire</button>

Démo

Boutons, module de base

La classe `btn` est à ajouter à tous les boutons.

Bouton simple (uniquement la class btn)

Bouton primaire (class btn-primary)

Bouton secondaire (class btn-secondary)

Boutons désactivés (attribut disabled)