KNACSS Reborn documentation

introduction

KNACSS, c'est un peu comme une feuille de style CSS « reset » sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign).

KNACSS est principalement un ensemble de feuilles de styles de base utilisable dans tous les projets HTML, dans l'esprit totalement Responsive et Mobile-First.

KNACSS Reborn est distribué librement sur Github sous licence WTFPL, toutes contributions sont bienvenues.

nouvelle version "Reborn"

Suite à la Version 7 de KNACSS, une grosse remise en question et refonte intégrale a été démarrée pour rencentrer le projet sur notre usage personnel dans l'agence Alsacréations

Il devenait nécessaire pour nous de faire le ménage au sein d'un projet qui devenait tentaculaire et qui couvrait bien plus de besoins qu'habituellement nécessaires. Le projet KNACSS Reborn était né.

Ce qu'apporte KNACSS Reborn :

Note : les textes de remplissage en alsacien sont issus du générateur de templates Schnapsum .

compatibilité navigateurs

KNACSS est compatible avec tous les navigateurs représentant plus de 1.5% de la population, ce qui représente notamment tous les navigateurs modernes supportant CSS Grid Layout. Cela ne concerne donc pas IE10 et IE11.

La liste des navigateurs supportés est définie par le fichier .browserslistrc placé en racine du projet, sur lequel se base Autoprefixer et dont la valeur est 

>1.5%
not op_mini all

installation

Il n'y a volontairement pas de mode d'installation automatisé de KNACSS, car il est vivement recommandé de comprendre l'utilité et la portée de cet outil dans un premier temps, puis de récupérer les fichiers nécessaires à la main pour les adapter à toutes les configurations possibles de Workflow (NPM, Gulp, Docker, VueJS, WordPress, etc.).

KNACSS Reborn existe dans différentes versions, récupérables sur Github :

Le fichier principal knacss.scss a pour rôle d'importer tous les autres fichiers du projets. Les fichiers "CORE" sont indispensables pour le fonctionnement général. Les autres sont à retirer, au cas par cas, selon leur nécessité dans le projet :

// CORE
@import "abstracts/variables-sass";

@import "base/reset-base";
@import "base/reset-accessibility";
@import "base/reset-forms";
@import "base/reset-print";
@import "base/layout";

@import "abstracts/mixins-sass"; 

// UTILITY CLASSES
// @import "utils/utils-global";
// @import "utils/utils-spacers";
// @import "utils/grillade";


// COMPONENTS (add them only if you need)
// @import "components/button";
// @import "components/burger";
// @import "components/checkbox";
// @import "components/radio";
// @import "components/quote";

fichiers reset

Plusieurs fichiers incontournables permettent d'harmoniser les styles entre les navigateurs mais aussi de faciliter certaines bonnes pratiques. (reset-base, reset-accessibility, reset-forms et reset-print).

reset-base.scss

Tous les éléments changent de modèle de boîte (box-sizing) et leur taille minimale est corrigée lorsqu'ils sont flex-items ou grid-items :

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}

Des styles de base sont appliqués au document. À noter que la taille de police de HTML est proposée à font-size: 62.5% afin de faciliter le calcul des toutes les valeurs en unité rem (il suffit de multiplier par 10 pour obtenir la taille équivalente en pixel, donc 1rem vaut "10 pixels") :

html {
  font-size: $font-size-html;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

body {
  margin: 0;
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  background-color: $color-background-body;
  color: $color-text-primary;
}

Le rythme vertical suggéré est de supprimer toutes les marges hautes afin de pouvoir empiler les blocs les uns sous les autres sans craindre de fusion de marges :

(tous les éléments blocks) {
  margin-top: 0;
  margin-bottom: $spacer-small;
}

Les éléments remplacés tels que les images, vidéos, input et iframe) deviennent fluides en conservant leur ratio d'affichage :

(éléments remplacés) {
  max-width: 100%;
  height: auto;
}

reset-accessibility.scss

Une Media Query tient compte des préférences utilisateur en ce qui concerne les animations sur son écran :

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

La propriété .visually-hidden permet de masquer du contenu tout en demeurant compréhensible par une assistance technique. Cette classe peut être déclanchée sur certaines tailles d'écran uniquement, en la faisant précéder des préfixes sm:, md:, lg:, xl: :

.visually-hidden {
  position: absolute !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

Enfin, divers attributs des spécifications ARIA ont été pris en compte par KNACSS, notamment aria-busy, aria-controls, aria-disabled, aria-hidden.

reset-forms.scss

Des styles par défaut ajoutent une consistance sur les éléments classiques des formulaires :

button,
input,
select,
textarea {
  margin: 0;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: middle;
}

Par ailleurs, divers styles sont appliqués pour corriger certaines incohérences des navigateurs Chrome, Safari et Firefox.

reset-print.scss

Divers styles sont destinés à afficher correctement les pages lorsqu'elles sont imprimées. Ces styles corrigent principalement les couleurs de fond de page, de texte, de taille de police, ainsi que les sauts de page.

layout.scss

Deux classes ont été concoctées pour gérer l'affichage de deux types de conteneurs courants :

La classe .layout-maxed est destinée à être un conteneur global de page, avec les caractéristiques suivantes :

.layout-maxed {
  display: grid;
}

@media (min-width: 576px) {
  .layout-maxed {
    grid-template-columns: minmax(1rem, 1fr) minmax(auto, 576px) minmax(1rem, 1fr);
  }
}

@media (min-width: 768px) {
  .layout-maxed {
    grid-template-columns: minmax(1rem, 1fr) minmax(auto, 768px) minmax(1rem, 1fr);
  }
}

(et ainsi de suite pour chaque Breakpoint)

La classe .layout-hero est prévue pour se comporter comme un bandeau dit "hero" ou "full bleed", avec les caractéristiques suivantes :

.layout-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: inherit;
}

Voir un exemple en ligne

breakpoints

Une liste de points de rupture (breakpoints) est présente dans le fichier variables-sass.scss. Cette liste sous forme de couple "clé:valeur" peut bien entendu être élargie.

$breakpoints : (
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1330px
);

Conformément à la démarche "Mobile First", ces valeurs correspondent à des jalons minimum : sm: '576px' correspond au Media Query @media (min-width: 576px) {...}

Des variables "alias" sont également proposées si besoin. Par exemple, la variable $small prend la valeur exprimée dans sm. Les alias par défaut sont $small, $medium, $large, $extra-large.

À partir de cette liste de breakpoints sont construites toutes les classes utilitaires de KNACSS afin d'être totalement responsive.
les clés de breakpoints peuvent être employées comme préfixes pour cibler différentes tailles d'écran.
Quelques exemples :

classes utilitaires

Les classes utilitaires (ou atomiques) sont des classes destinées à contenir une seule déclaration CSS.
À chaque classe correspond une seule fonction, ce qui offre une complète séparation entre la structure HTML des données de présentation CSS.

Les classes utilitaires de KNACSS sont largement inspirées du framework Tailwindcss que nous apprécions tout particulièrement chez Alsacréations, mais qui peut se révéler quelque peu surchargé pour certains types de projets. Nous avons donc opté pour une "version allégée" dans KNACSS.

Pour en savoir plus sur notre démarche, voici une présentation sur les différentes méthodologies actuelles.

utilitaires d'espacement

Une liste de valeurs d'espacements (spacers) est présente dans le fichier variables-sass.scss. Cette liste sous forme de couple "clé:valeur" peut bien entendu être élargie.

$spacers : (
  '0' : 0,
  '1' : .5rem,  // tiny
  '2' : .75rem, // tiny-plus
  '3' : 1rem,   // small
  '4' : 1.5rem, // small-plus
  '5' : 2rem,   // medium
  '6' : 3rem,   // medium-plus
  '7' : 5rem,   // large
  'auto' : auto
  );

Des variables "alias" sont également proposées si besoin. Par exemple, la variable $spacer-small prend la valeur exprimée dans 1rem. Les alias par défaut sont $spacer-none, $spacer-tiny, $spacer-tiny-plus, $spacer-small, $spacer-small-plus, $spacer-medium, $spacer-medium-plus, $spacer-large.

À partir de cette liste de valeurs d'espacements sont construites les classes utilitaires d'espacements de KNACSS.

Toutes les classes utilitaires de margin détaillées ci-dessous sont transposables pour les classes de padding.

marges externes (tous côtés)

Fonctionne avec m- (marges sur les 4 axes).

marges externes (tous côtés)
Classe Propriété Détails
.m-0 margin: 0; Marges externes à zéro
.m-1 margin: 0.5rem; Marges externes à 0.5rem
.m-2 margin: 0.75rem; Marges externes à 0.75rem
... ... ...
.m-7 margin: 5rem; Marges externes à 5rem
.m-auto margin: auto; Marges externes à auto

marges latérales et verticales

Fonctionne avec mx- (marges latérales), my- (marges verticales).

marges latérales et verticales
Classe Propriété Détails
.mx-1 margin-left: 0.5rem; margin-right: 0.5rem; Marges latérales à 0.5rem
... ... ...
.mx-7 margin-left: 5rem; margin-right: 5rem; Marges latérales à 5rem
.my-1 margin-top: 0.5rem; margin-bottom: 0.5rem; Marges verticales à 0.5rem
... ... ...
.my-7 margin-top: 5rem; margin-bottom: 5rem; Marges verticales à 5rem
.mx-auto margin-left: auto; margin-right: auto; Marges latérales à auto

marges externes (un seul côté)

Fonctionne avec mt- (margin-top), mr- (margin-right), mb- (margin-bottom), ml- (margin-left).

marges externes (un seul côté)
Classe Propriété Détails
.ml-0 margin-left: 0; Marge gauche à zéro
.ml-1 margin-left: 0.5rem; Marge gauche à 0.5rem
.ml-2 margin-left: 0.75rem; Marge gauche à 0.75rem
... ... ...
.ml-7 margin-left: 5rem; Marge gauche à 5rem
.ml-auto margin-left: auto; Marge gauche à auto
.mr-auto margin-right: auto; Marge droite à auto

classes responsive

Toutes les classes utilitaires de margin et padding sont prévues pour être Responsive, grâce aux préfixes sm: (small), md: (medium), lg: (large), xl: (extra-large).

classes responsive
Classe Propriété Détails
.sm:ml-0 @media (min-width: 576px) { .sm:ml-0 { margin-left: 0;}} Marge gauche à zéro sur écran small et au-delà
.sm:mx-auto @media (min-width: 576px) { .sm:mx-auto { margin-left: auto; margin-right: auto;}} Marge latérales automatiques sur écran small et au-delà
.md:pt-5 @media (min-width: 768px) { .md:pt-5 { padding-top: 2rem;}} Padding haut de 2rem sur écran medium et au-delà
.lg:py-3 @media (min-width: 1024px) { .md:py-3 { padding-top: 1rem; padding-bottom: 1rem;}} Padding verticaux de 1rem sur écran large et au-delà

utilitaires globaux

Les classes utilitaires globales ont différentes actions : elles peuvent modifier la valeur de display, affecter le positionnement flexbox, aligner les éléments ou modifier l'ordre d'affichage par exemple.

Toutes les classes utilitaires globales sont prévues pour être Responsive, grâce aux préfixes sm: (small), md: (medium), lg: (large), xl: (extra-large).

valeurs de display

classes de display
Classe Propriété
.hidden display: none;
.block display: block;
.inline display: inline;
.inline-block display: inline-block;
.flex display: flex;
.grid display: grid;

propriétés de Flexbox

propriétés de Flexbox
Classe Propriété
.flex-row flex-direction: row;
.flex-col flex-direction: column;
.flex-wrap flex-wrap: wrap;
.flex-no-wrap flex-wrap: nowrap;
.flex-shrink flex-shrink: 1;
.flex-no-shrink flex-shrink: 0;
.flex-grow flex-grow: 1;
.flex-no-grow flex-grow: 0;
.item-first order: -100;
.item-last order: 100;

propriétés de Float

propriétés de Float
Classe Propriété
.float-left float: left;
.float-right float: right;
.float-none float: none;

propriétés de texte

propriétés de texte
Classe Propriété
.text-bold font-weight: bold;
.text-italic font-style: italic;
.text-uppercase text-transform: uppercase;
.text-lowercase text-transform: lowercase;
.text-normal font-weight: normal; font-style: normal; text-transform: none;
.text-smaller font-size: smaller;
.text-bigger font-size: bigger;
.text-left text-align: left;
.text-right text-align: right;
.text-center text-align: center;
.text-justify text-align: justify;
.text-wrap overflow-wrap: break-word;

propriétés d'alignements

propriétés d'alignements
Classe Propriété
.justify-start justify-content: flex-start;
.justify-end justify-content: flex-end;
.justify-center justify-content: center;
.justify-between justify-content: space-between;
.justify-around justify-content: space-around;
.justify-evenly justify-content: space-evenly;
.justify-items-start justify-items: start;
.justify-items-end justify-items: end;
.justify-items-center justify-items: center;
.align-start align-content: start;
.align-end align-content: end;
.align-center align-content: center;
.align-between align-content: space-between;
.align-around align-content: space-around;
.align-evenly align-content: space-evenly;
.align-items-start align-items: flex-start;
.align-items-end align-items: flex-end;
.align-items-center align-items: center;
.place-center place-content: center;
.justify-self-auto justify-self: auto;
.justify-self-start justify-self: start;
.justify-self-end justify-self: end;
.justify-self-center justify-self: center;
.justify-self-stretch justify-self: stretch;
.align-self-auto align-self: auto;
.align-self-start align-self: flex-start;
.align-self-end align-self: flex-end;
.align-self-center align-self: center;
.align-self-stretch align-self: stretch;
.align-top vertical-align: top;
.align-bottom vertical-align: bottom;
.align-middle vertical-align: middle;

propriétés multiples

propriétés multiples
Classe Propriétés
.is-unstyled list-style: none; padding-left: 0;
.is-disabled opacity: 0.6; cursor: not-allowed !important; filter: grayscale(1);

grillade

Grillade, est le système de grille de KNACSS bâti sur les spécifications CSS Grid Layout.
La version actuelle de Grillade est dorénavant très inspirée du framework Tailwindcss et tire parti de classes utilitaires pour créer les colonnes ainsi que les gouttières, y placer les éléments et modeler le gabarit en fonction des tailles d'écran.

Toutes les classes de Grillade sont prévues pour être Responsive, grâce aux préfixes sm: (small), md: (medium), lg: (large), xl: (extra-large).

création des colonnes de grille

Ces classes sont à appliquer sur le parent de la grille (grid container). Pensez à lui appliquer au préalable une classe .grid (avec ou sans préfixes de breakpoint) pour que la grille soit activée.

Le nombre de colonnes prévu par défaut est indiqué par la variable $grid-columns: 6;.

classes de colonnes
Classe Propriété
.grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
.grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));
... ...
.grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));

grid-cols-3

Exemple de grille simple de 3 colonnes

1
2
3
4
5
6
7
8
<div class="grid grid-cols-3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6

Exemple de grille Responsive passant de 1 colonne à 2, puis 4, puis 6 selon la taille d'écran.

1
2
3
4
5
6
7
8
<div class="sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

appliquer des gouttières

Ces classes sont à appliquer sur le parent de la grille (grid container).

Le nombre de tailles disponibles pour les gouttières est indiqué par la variable de liste $spacers: (...);.

classes de gouttières
Classe Propriété
.gap-0 gap: 0;
.gap-1 gap: 0.5rem
... ...
.gap-7 gap: 5rem;
.column-gap-5 column-gap: 2rem;
.row-gap-5 row-gap: 2rem;

grid-cols-3 gap-1 sm:gap-3 lg:gap-5

Exemple de grille simple de 3 colonnes avec gouttières variables selon la taille d'écran.

1
2
3
4
5
6
7
8
<div class="grid grid-cols-3 gap-1 sm:gap-3 lg:gap-5">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

placer les éléments dans la grille

Ces classes sont à appliquer sur les enfants de la grille (grid item).

classes de grid item
Classe Propriété
.col-start-1 grid-column-start: 1;
.col-start-6 grid-column-start: 6;
.col-end-1 grid-column-end: 1;
.col-end-6 grid-column-end: 6;
.row-start-1 grid-row-start: 1;
.row-start-6 grid-row-start: 6;
.row-end-1 grid-row-end: 1;
.row-end-6 grid-row-end: 6;
.col-span-1 grid-column: span 1 / span 1;
.col-span-2 grid-column: span 2 / span 2;
.col-span-full grid-column: 1 / -1;
.row-span-1 grid-row: span 1 / span 1;
.row-span-2 grid-row: span 2 / span 2;

col-start-3

Exemple de placement dans la grille avec .col-start-*

1
2
3
4
5
6
7
8
<div class="grid grid-cols-3 gap-3">
    <div>1</div>
    <div class="col-start-3">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

row-span-2

Exemple de fusion verticale dans la grille avec .row-span-*

1
2
3
4
5
6
7
8
<div class="grid grid-cols-3 gap-3">
    <div>1</div>
    <div class="row-span-2">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

md:col-span-2 lg:col-span-full

Exemple de fusion horizontale variable selon les tailles d'écran.

1
2
3
4
5
6
7
8
<div class="grid grid-cols-3 gap-3">
    <div class="md:col-span-2 lg:col-span-full">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

composants

KNACSS se veut un framework "agnostique" et ne souhaite pas apporter de styles graphiques qu'il faudra finalement écraser dans vos projets.

Toutefois, nous avons souhaité donner du style à quelques composants choisis pour leurs design par défaut pauvre ou perfectible. Il s'agit des composants suivants :

Les sections suivantes détaillent les styles et la structure nécessaires pour ces composants.

checkboxes

KNACSS prend en compte les styles de base des cases à cocher, il suffit d'appliquer la classe .checkbox sur l'élément input afin de le voir en action.

Voici le code HTML recommandé : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label>

<form action="#">
  <ul class="is-unstyled">
    <li>
      <input type="checkbox" class="checkbox" id="c1">
      <label for="c1">Salade</label>
    </li>
    <li>
      <input type="checkbox" class="checkbox" id="c2" checked="checked">
      <label for="c2">Tomate</label>
    </li>
    <li>
      <input type="checkbox" class="checkbox" id="c3" checked="checked" disabled="disabled">
      <label for="c3">Oignon</label>
    </li>
    <li>
      <input type="checkbox" class="checkbox" id="c4" disabled="disabled">
      <label for="c4">Choucroute</label>
    </li>
  </ul>
</form>

radios

KNACSS prend en compte les styles de base des boutons radio, il suffit d'appliquer la classe .radio sur l'élément input afin de le voir en action.

Voici le code HTML recommandé : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label>

<form action="#">
  <ul class="is-unstyled">
    <li>
      <input type="radio" class="radio" name="radio" id="r1">
      <label for="r1">Salade</label>
    </li>
    <li>
      <input type="radio" class="radio" name="radio" id="r2" checked="checked">
      <label for="r2">Tomate</label>
    </li>
    <li>
      <input type="radio" class="radio" name="radio" id="r3" checked="checked" disabled="disabled">
      <label for="r3">Oignon</label>
    </li>
    <li>
      <input type="radio" class="radio" name="radio" id="r4" disabled="disabled">
      <label for="r4">Choucroute</label>
    </li>
  </ul>
</form>

burger button

Un élément possédant la classe .burger-button et contenant un élément vide devient un bouton de navigation stylé et prêt à l'action (avec un peu de renfort de JavaScript ou CSS pour déclencher l'événement bien sûr).

Pour des raisons d'accessibilité, il est fortement recommandé d'utiliser la structure HTML ci-dessous pour votre bouton.

<button class="burger-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>

Voici le bout de code JavaScript employé pour activer ce bouton 

<script>
/**!
Navigation Button Toggle class
*/
(function() {

// old browser or not ?
if ( !('querySelector' in document && 'addEventListener' in window) ) {
return;
}
window.document.documentElement.className += ' js-enabled';

function toggleNav() {

// Define targets by their class or id
var button = document.querySelector('.burger-button');
var target = document.querySelector('body > nav');

// click-touch event
if ( button ) {
  button.addEventListener('click',
  function (e) {
      button.classList.toggle('is-active');
    target.classList.toggle('is-opened');
    e.preventDefault();
  }, false );
}
} // end toggleNav()

toggleNav();
}());
</script>

citations

Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz here's some code rossbolla sech choucroute un schwanz geburtstàg

<blockquote>
   <p>Lorem Elsass Ipsum mitt picon bière munster du ftomi! Ponchour bisame. Bibbeleskaas jetz here's some code rossbolla sech choucroute un schwanz geburtstàg</p>
</blockquote>

mixins

Le fichier regroupant les mixins et fonctions Sass se nomme sass/_config/_mixins.scss. Il contient des raccourcis Sass qui facilitent la vie de l'intégrateur.

mixin "respond-to()"

Ce mixin permet de faciliter et d'harmoniser les points de ruptures. Écrivez ceci dans votre fichier Sass :

p {
  color: blue;
  @include respond-to("small-up") {
    color: hotpink;
  }
}

Le résultat après compilation sera :

p {
  color: blue;
}
@media (min-width: 576px) {
  p {
    color: hotpink;
  }
}

Les paramètres et les intervales correspondants sont :

$bp-aliases: (
  'small' : (max-width: #{$small - 1}),
  'medium' : (max-width: #{$medium - 1}),
  'large' : (max-width: #{$large - 1}),
  'extra-large' : (max-width: #{$extra-large - 1}),
  'small-up' : (min-width: #{$small}),
  'medium-up' : (min-width: #{$medium}),
  'large-up' : (min-width: #{$large}),
  'extra-large-up' : (min-width: #{$extra-large})
  );

à propos

KNACSS (prononcez "Knèckess") est un outil construit avec amour et du CSS par Raphaël Goetter et Alsacréations.

Alsacréations est une innovante agence web alsacienne créée en 2006 qui répond à tous types de projets (développement, intégration, accessibilité, mobilité).

Un grand merci à Matthieu Bousendorfer pour le design du site web, à Stéphanie Walter pour la conception du logo, ainsi qu’à Hugo Giraudel, Philippe Vayssière, Xavier Zawala, Nicolas Hoffmann pour leurs conseils et astuces pour faire évoluer l'outil.