Helpers / Classes d’aide

Les classes d’aide permettent d’appliquer des styles CSS particuliers à des objets qui ne sont pas des composants ou à des composants qui n’ont pas ces styles spécifiques (p. ex. : mettre une position: relative, faire un clearfix, masquer un objet…).

Les aides, comme tout élément des fondations, ne sont pas un composant en tant que tel, elles font partie du « core », c’est à dire des éléments obligatoires.

Style & code

Dépendances :

  • Classe sipaui sur un parent (par exemple le <body>).

Clearfix

Le clearfix est un hack CSS permettant de faire en sorte que des objets flottants (avec la propriété CSS float) puissent prendre leur place dans la page et ainsi pousser le contenu suivant en dessous d’eux, plutôt que de passer par-dessus. La classe de clearfix doit être posée sur le parent du/des bloc(s) flottant(s). SipaUI propose 2 classes pour le clearfix : su-clearfix et su-cf qui font la même chose (la seconde est une version courte).

<div style="border: 1px solid #ccc;" class="su-clearfix">
    Bloc parent comportant le clearfix.
    <div style="float: right; background: #efefef; height: 70px">Bloc flotant de 70px de haut.</div>
</div>
<div style="border: 1px solid #ccc;">Autre contenu</div>

Masquages

SipaUI propose 2 classes génériques, 20 classes liées aux points de rupture et 4 classes liées aux écrans tactiles pour masquer un objet.

Classes génériques

  • su-hidden,
  • su-visually-hidden.

La première supprime l’objet de la page pour tous les navigateurs (combinaison de display: none et de visibility: hidden). La seconde le rend juste invisible pour les navigateurs visuels ; l’objet reste accessible aux lecteurs d’écran (pour les personnes avec handicap visuel).

Classes de point de rupture

  • su-hidden-xs,
  • su-hidden-sm,
  • su-hidden-md,
  • su-hidden-lg,
  • su-hidden-xl,
  • su-visible-xs,
  • su-visible-sm,
  • su-visible-md,
  • su-visible-lg,
  • su-visible-xl,
  • su-visible-inline-block-xs,
  • su-visible-inline-block-sm,
  • su-visible-inline-block-md,
  • su-visible-inline-block-lg,
  • su-visible-inline-block-xl,
  • su-visible-table-cell-xs,
  • su-visible-table-cell-sm,
  • su-visible-table-cell-md,
  • su-visible-table-cell-lg,
  • su-visible-table-cell-xl.

Avec les classes su-hidden-.. les objets normalement visibles sont masqués pour le point de rupture spécifié en fin de nom de classe.

<div class="su-hidden-xs" style="background-color: #70b2ff">1. su-hidden-xs</div>
<div class="su-hidden-sm" style="background-color: #74ef37">2. su-hidden-sm</div>
<div class="su-hidden-md" style="background-color: #fdff2e">3. su-hidden-md</div>
<div class="su-hidden-lg" style="background-color: #ffc850">4. su-hidden-lg</div>
<div class="su-hidden-xl" style="background-color: #ff5858">5. su-hidden-xl</div>

Avec les classes su-visible-.. les objets sont invisibles par défaut et visibles en mode display: block pour le point de rupture spécifié en fin de nom de classe.

<div class="su-visible-xs" style="background-color: #70b2ff">1. su-visible-xs</div>
<div class="su-visible-sm" style="background-color: #74ef37">2. su-visible-sm</div>
<div class="su-visible-md" style="background-color: #fdff2e">3. su-visible-md</div>
<div class="su-visible-lg" style="background-color: #ffc850">4. su-visible-lg</div>
<div class="su-visible-xl" style="background-color: #ff5858">5. su-visible-xl</div>

Il vous est par ailleurs possible de choisir un autre type de display lors de l’affichage de l’objet avec les classes su-visible-inline-block-.. et su-visible-table-cell-...

Classes pour les écrans tactiles

  • su-visible-touch,
  • su-visible-touch-table-cell,
  • su-visible-touch-inline-block,
  • su-hidden-touch

N. B. 1 – Ces classes sont moins fortes que les classes de point de rupture ci-dessus.

N. B. 2 – Ces classes ne sont pas testables ici.

Displays

Cinq classes sont disponibles pour forcer un mode d’affichage :

  • su-block,
  • su-inline-block,
  • su-table,
  • su-table-row,
  • su-table-cell.

Elles peuvent bien sûr servir à changer l’implantation d’un objet dans son environnement, mais elles sont surtout utiles pour rendre visible via JS un objet qui était préalablement invisible.

Positions

Le framework offre 3 classes pour forcer une position :

  • su-relative,
  • su-absolute,
  • su-fixed.

Alignements

Il y a 5 classes d’alignement ; 4 pour du texte et une pour un block :

  • su-text-center : centre le texte dans son parent,
  • su-text-justify : justifie le texte dans son parent,
  • su-text-left : ferre (aligne) le texte à gauche dans son parent,
  • su-text-right : ferre (aligne) le texte à droite dans son parent,
  • su-block-center : centre un bloc dans son parent.
  • su-block-left : ferre à gauche un bloc dans son parent.
  • su-block-right : ferre à droite un bloc dans son parent. 
<p class="su-text-center">Paragraphe avec texte centré. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="su-text-justify">Paragraphe avec texte justifié. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="su-text-left">Paragraphe avec texte ferré à gauche. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="su-text-right">Paragraphe avec texte ferré à gauche.  Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p style="width: 60%;" class="su-block-center">Paragraphe à largeur fixée et centré.  Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p style="width: 60%;" class="su-block-left">Paragraphe à largeur fixée et centré.  Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p style="width: 60%;" class="su-block-right">Paragraphe à largeur fixée et centré.  Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Tailles

Deux classes permettent de forcer la largeur d’un composant à 100% ;

  • su-fullwidth
  • su-fullwidth-mobile

La seconde n’applique la largeur à 100% que sous le palier mobile.

<button class="su-button su-secondary su-fullwidth-mobile">Bouton en pleine largeur sur mobile</button>

Colonnes

Il est possible de créer des colonnes simplement sur une suite d’éléments (typiquement une liste) qui s’appuiera sur la classe CSS column. Pour ça vous disposez de 7 classes :

  • su-columns-2
  • su-columns-3
  • su-columns-4
  • su-columns-desktop-2
  • su-columns-desktop-3
  • su-columns-desktop-4
  • su-columns-no-cut

Les 3 premières appliquent de 2 à 4 colonnes dans tous les cas, les 3 suivantes ne les imposent que sur les grands écrans (à partir de 980px de large). En cas de cumul de classes su-columns et su-columns-desktop, c'est cette dernière qui gagne en desktop. Ces colonnes ont une gouttière de 20px.

Vous pouvez aussi utiliser 2 largeurs minimum pour vos colonnes afin d’éviter de vous retrouver avec des colonnes trop étroites dans certains contextes (p. ex. sur mobile). Ces classes sont construites sous la forme su-columns-min-width-xxx où xxx est une largeur en px. Vous avez ainsi :

  • su-columns-min-width-200
  • su-columns-min-width-300

La dernière classe, su-columns-no-cut, permet 2 choses :

  • empêcher un enfant de se partager sur plusieurs colonnes, tout son contenu restant dans sa colonne de départ
  • contourner un bug de Firefox (en tout cas, à ce jour…) qui coupe et envoi dans la colonne suivante une marge basse ou même un espace vide (un élément qui aurait un min-height par exemple) d’un enfant…

Colonnes tout le temps

Cas avec une liste

<ul class="su-columns-2">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
    <li>Élément 4</li>
    <li>Élément 5</li>
    <li>Élément 6</li>
    <li>Élément 7</li>
    <li>Élément 8</li>
    <li>Élément 9</li>
    <li>Élément 10</li>
    <li>Élément 11</li>
    <li>Élément 12</li>
    <li>Élément 13</li>
    <li>Élément 14</li>
    <li>Élément 15</li>
</ul>

Colonnes en desktop

Cas avec des paragraphes

<div class="su-columns-desktop-4">
    <p>Élément 1</p>
    <p>Élément 2</p>
    <p>Élément 3</p>
    <p>Élément 4</p>
    <p>Élément 5</p>
    <p>Élément 6</p>
    <p>Élément 7</p>
    <p>Élément 8</p>
    <p>Élément 9</p>
    <p>Élément 10</p>
    <p>Élément 11</p>
    <p>Élément 12</p>
    <p>Élément 13</p>
    <p>Élément 14</p>
    <p>Élément 15</p>
</div>

Cumul de cas

<ul class="su-columns-2 su-columns-desktop-4">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
    <li>Élément 4</li>
    <li>Élément 5</li>
    <li>Élément 6</li>
    <li>Élément 7</li>
    <li>Élément 8</li>
    <li>Élément 9</li>
    <li>Élément 10</li>
    <li>Élément 11</li>
    <li>Élément 12</li>
    <li>Élément 13</li>
    <li>Élément 14</li>
    <li>Élément 15</li>
</ul>

Avec une largeur minimum

Cette largeur minimum empêche le colonnage en mobile.

<ul class="su-columns-2 su-columns-desktop-4 su-columns-min-width-200">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
    <li>Élément 4</li>
    <li>Élément 5</li>
    <li>Élément 6</li>
    <li>Élément 7</li>
    <li>Élément 8</li>
    <li>Élément 9</li>
    <li>Élément 10</li>
    <li>Élément 11</li>
    <li>Élément 12</li>
    <li>Élément 13</li>
    <li>Élément 14</li>
    <li>Élément 15</li>
</ul>

Usage de la classe su-columns-no-cut

<div class="su-columns-2 su-columns-no-cut">
    <p>Élément 1</p>
    <p>Élément 2</p>
    <p>Élément 3 long<br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Élément 4</p>
    <p>Élément 5</p>
</div>

Aides texte

Pas de retour à la ligne

Classe permettant de bloquer le retour à la ligne du texte dans un conteneur (peut servir par exemple pour des cellules de tableau…) : su-text-nowrap

<table>
    <tr>
        <td class="su-text-nowrap">Texte long sans retour à la ligne.</td>
        <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    <tr>
</table>

Troncatures

Il est possible de couper un texte trop long pour son conteneur en ajoutant des points de suspension (« … »). Pour ce faire, ajouter la classe su-truncate-1, su-truncate-2, ou su-truncate-3 en fonction du nombre de lignes à garder.

<p class="su-truncate-2" style="width: 130px">Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>

Interlignages

Voici 5 classes pour forcer l’interlignage du texte : su-line-height-xs (1), su-line-height-s (1.2), su-line-height-m (1.35), su-line-height-l (1.5) et su-line-height-xl (2).

<p class="su-line-height-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="su-line-height-s su-margin-top-m">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="su-line-height-m su-margin-top-m">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="su-line-height-l su-margin-top-m">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="su-line-height-xl su-margin-top-m">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Justifications

Vous pouvez changer la justification des textes avec les classes su-text-center, su-text-justify, su-text-left et su-text-right.

<article class="su-article">
    <p class="su-text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
<article class="su-article su-margin-top-m">
    <p class="su-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
<article class="su-article su-margin-top-m">
    <p class="su-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>
<article class="su-article su-margin-top-m">
    <p class="su-text-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</article>

Aides graphiques standards

Les aides « graphiques standards » sont des classes qui permettent d’ajouter un design basique et standardisé suivant les thèmes, comme des bordures, des paddings…

Bordure sur un bloc

La classe su-standard-border permet d’ajouter une bordure standard liée au thème, ainsi qu’éventuellement des coins arrondis, à un bloc de contenu.

Padding tournant

La classe su-standard-padding permet d’ajouter en plus un padding standard à l’intérieur du bloc, sur les 4 côtés.

Coins arrondis

La classe su-standard-radius permet d’arrondir les coins des blocs.

N. B. – Il est possible que dans certains thèmes, cette classe ne produise aucun effet, le thème ne prévoyant pas d’arrondi.

Exemple utilisant les 3 classes :

<div class="su-standard-border su-standard-radius su-standard-padding">Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</div>

Divers

Incapacité

Classe permettant de rendre visuellement l’incapacité / l’indisponibilté d’un objet en le rendant en partie transparent : su-disabled

N. B. – Si la balise est une balise HTML qui accepte l’attribut disabled, mettre aussi cet attribut. Sinon, ajouter aria-disabled="true" pour l’accessibilité.

<p class="su-disabled" aria-disabled="true">Paragraphe utilisant cette classe.</p>

Blocage du scroll

Classe permettant de bloquer le scroll de la page, ou d’un composant : su-no-scroll

<body class="su-no-scroll"></body>

Composant sur fond sombre

De façon exceptionnelle on peut avoir besoin d’afficher un composant en négatif, comme par exemple du texte sur un fond sombre. Pour ce faire, il y a la classe su-negative.

Attention, tous les composants ne sont pas forcément compatibles avec cette classe ! Se référer au composant proprement dit pour savoir si c'est bien la cas…

<p class="su-negative" style="background: DimGray">Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.</p>

Liste des classes disponibles

Clearfix

  • su-clearfix ou su-cf

Masquages

  • su-hidden
  • su-visually-hidden
  • su-hidden-xs
  • su-hidden-sm
  • su-hidden-md
  • su-hidden-lg
  • su-hidden-xl
  • su-visible-xs
  • su-visible-sm
  • su-visible-md
  • su-visible-lg
  • su-visible-xl
  • su-visible-inline-block-xs
  • su-visible-inline-block-sm
  • su-visible-inline-block-md
  • su-visible-inline-block-lg
  • su-visible-inline-block-xl
  • su-visible-table-cell-xs
  • su-visible-table-cell-sm
  • su-visible-table-cell-md
  • su-visible-table-cell-lg
  • su-visible-table-cell-xl

Displays

  • su-block
  • su-inline-block
  • su-table
  • su-table-row
  • su-table-cell

Positions

  • su-relative
  • su-absolute
  • su-fixed

Alignements

  • su-text-center
  • su-text-justify
  • su-text-left
  • su-text-right
  • su-block-center

Tailles

  • su-fullwidth
  • su-fullwidth-mobile

Colonnes

  • su-columns-2
  • su-columns-3
  • su-columns-4
  • su-columns-desktop-2
  • su-columns-desktop-3
  • su-columns-desktop-4
  • su-columns-no-cut
  • su-columns-min-width-200
  • su-columns-min-width-300

Aides texte

  • su-text-nowrap
  • su-truncate-1
  • su-truncate-2
  • su-truncate-3
  • su-line-height-xs
  • su-line-height-s
  • su-line-height-m
  • su-line-height-l
  • su-line-height-xl

Aides graphiques standards

  • su-standard-border
  • su-standard-padding
  • su-standard-radius

Divers

  • su-disabled
  • su-no-scroll
  • su-negative

Le code a bien été copié !