Helpers

Ajouter une bordure à un élément

is-bordered permet d'ajouter une bordure avec sa couleur par défaut.

Il n'existe pas de Helper pour changer la couleur d'une bordure.

Arrondir un élément

has-border-radius-small, has-border-radius et has-border-radius-large permettent d'arrondir la bordure d'un élement.

is-rounded permet d'arrondir un élement complètement.

Il n'existe pas de Helper pour décider spécifiquement d'une taille d'arrondi.

Supprimer la bordure d'un élément

is-radiusless permet de supprimer le border-radius d'un élement.

Il n'existe pas de Helper pour spécifier le breakpoint où appliquer cette suppression.

Supprimer la marge d'un élément

is-marginless permet de supprimer la marge d'un élement.

Il n'existe pas de Helper pour spécifier le breakpoint ou le(s) côté(s) où appliquer cette suppression.

Supprimer le padding d'un élément

is-paddingless permet de supprimer totalement le padding d'un élement.

Il n'existe pas de Helper pour spécifier le breakpoint ou le(s) côté(s) où appliquer cette suppression.

Supprimer l'ombre d'un élément

is-shadowless permet de supprimer l'ombre d'un élément via box-shadow: none.

Il n'existe pas de Helper pour spécifier le breakpoint où appliquer cette suppression.

Interdire la sélection d'un élément

is-unselectable permet d'empêcher l'utilisateur de sélectionner du texte via user-select: none.

Autoriser le passage à la ligne d'éléments flex

is-multiline permet de passer à la ligne des éléments flex via flex-wrap: wrap.

Il n'existe pas de Helper pour spécifier le breakpoint où appliquer ce passage à la ligne.

Aligner des éléments flex sur l'axe principal

is-justified-start, is-justified-center et is-justified-end permettent de gérer l'alignement des éléments flex sur l'axe principal (selon que le composant est orienté "row" ou "column") et sur tous les breakpoints. Pour spécifier le breakpoint où appliquer cet alignement, il suffit d'ajouter en suffixe le breakpoint souhaité.

Aligner des éléments flex sur l'axe perpendiculaire

is-aligned-start, is-aligned-center et is-aligned-end permettent de gérer l'alignement des éléments flex sur l'axe perpendiculaire (selon que le composant est orienté "row" ou "column") et sur tous les breakpoints. Pour spécifier le breakpoint où appliquer cet alignement, il suffit d'ajouter en suffixe le breakpoint souhaité.

Visibilité des éléments

Il est possible d'afficher ou de masquer les éléments selon la propriété CSS display et visibility grâce aux classes suivantes : is-invisible, is-hidden, is-display-block, is-display-inline-block, is-display-flex, is-display-inline-flex et is-display-inline. Ces classes appliquent alors la règle adéquate à l'ensemble des viewports. Vous pouvez définir plus finement, en fonction du viewport, la visibilité de vos éléments, avec les classes listées ci-après :