Utilitaires de design
Les utilitaires de design sont principalement des variables à placé dans la balise style pour ajuster les éléments avec des valeurs personnelles.
Vue d'ensemble
Sass Swing met à disposition des variables utilitaires au lieu de simple classe pour controller le design. Seulement quelques classes utilitaires globales sont disponibles faciliter l'intégration.
Les avantages d'utiliser des variables, sont de ne pas polluer l'attribut class et surtout de permettre de passer des valeurs ou d'autres variables préalablement déclarées. Ces variables sont utiles pour modifier les valeurs des propriétés par défaut des classes utilisées sur un élément.
Le seul désavantage, est que l'on ne peut pas modifier les valeurs, en fonction de la surface d'affichage. Dans ce cas, il faudra créer une classe CSS dédiée.
Liste des variables utilitaires disponibles pour contrôler le design :
--bg Modifie le background-color
<style="--bg:valeur;">
--bgi Modifie le background-image
<style="--bgi:valeur;">
--txt Modifie la couleur du texte
<style="--txt:valeur;">
--op Modifie l'opacité'
<style="--op:valeur;">
--bdr Modifie toute les bordures
<style="--bdr:valeur;">
--bdrt Modifie la bordure en haut
<style="--bdrt:valeur;">
--bdrb Modifie la bordure en bas
<style="--bdrb:valeur;">
--bdrl Modifie la bordure gauche
<style="--bdrl:valeur;">
--bdrr Modifie la bordure droite
<style="--bdrr:valeur;">
--fs Modifie la taille de la police
<style="--fs:valeur;">
--fw Modifie le poids de la police
<style="--fw:valeur;">
--bdrw Modifie la largeur de la bordure
<style="-btlr:valeur;">
--bdrc Modifie la couleur de la bordure
<style="-btrr:valeur;">
--bdrs Modifie le style de la bordure
<style="-btlr:valeur;">
--br Border radius
<style="--br:valeur;">
--btlr Border top left radius
<style="-btlr:valeur;">
--btrr Border top right radius
<style="-btrr:valeur;">
--bblr Border bottom left radius
<style="-btlr:valeur;">
--bbrr Border bottom right radius
<style="-bbrr:valeur;">
--crs Modifie le style du curseur de la souris
<style="-crs:valeur;">
Classes utilitaires
Sass Swing fournit quelques classes utilitaires pour facilité le design d'élément. Les classes .ui--? permettent de styliser boites et liens ou autres bloque de type div par exemple.
Les styles disponibles sont : primary, primary-alt, secondary, secondary-alt, info, info-alt, success, success-alt, warning, warning-alt, danger, danger-alt
Une boite avec le style "primary"
Une boite avec le style "primary-alt"
Une boite avec le style "secondary"
Une boite avec le style "secondary-alt"
Une boite avec le style "info"
Une boite avec le style "info-alt"
Une boite avec le style "success"
Une boite avec le style "success-alt"
Une boite avec le style "warning"
Une boite avec le style "warning-alt"
Une boite avec le style "danger"
Une boite avec le style "danger-alt"
Autres classes utilitaires
Il existe également, d'autres classes spécialisées comme .shadow pour personnaliser les ombres via des variables locales CSS :
--ho : offset horizontal--vo : offset vertical--blur : blur--spread : spread--clr : couleur de l'ombre. Par défaut la couleur est 100% noir. L'opacité peut alors est spécifiée via la variable --op
Ou pour supprimer les bordures et les ombres.
.ui--noborder Enlève les bordures
<class="ui--noborder">
.ui--noshadow Enlève les ombres
<class="ui--noshadow">
Une boite avec le style "success-alt" sans bordure
Une boite avec le style "warning" avec une ombre personnalisée
Une boite avec le style "info" avec une ombre personnalisée