Mise en forme

La mise en forme sur le System builder utilise un système de "classes".

Les classes sont des petites commandes que l'on ajoute à un composant pour le faire changer de son apparence par défaut. On écrit ses commandes dans le champ "Classes" du composant. Tous les composants possèdent ce champ.

Vous pouvez donner plusieurs classes à un composant ; elles devraient toutes être séparées par un espace, et il ne devrait y a voir aucun espace inutile après une classe.

Nous utilisons les classes de Bootstrap 4 comme base pour les classes de Let's Role. Donc toutes les classes disponibles dans les outils bootstrap sont aussi disponibles dans le System Builder.

Cela étant dit, vous devriez essayer de ne pas trop changer la conception par défaut de Let's Role. C'est particulièrement important si vous souhaitez que votre feuille soit officialisée.

Couleur de fond

Les classes highlight-1 et highlight-2 sont utilisées pour une mise en avant du composant (changent la couleur de fond).

Espacement

Par défaut, il n'y a pas d'espace entre les composants, ils sont donc collés les un aux autres. Les classes d'espacement permettent de donner un peu d'ordre et d'oxygène. Il y a deux types d'espacement :

• Les marges : elles sont l'espacement extérieur du composant. Les autres composants ne pourront pas s'approcher d'un composant avec des marges.
• Les "padding" : traduisez rembourage ou mattelasure, sont des espaces intérieurs au composant. Les composants à l'intérieur ne pourront pas toucher les bords du composant qui les contient avec un padding.

Ces classes ont une nomenclature un peu spéciale, mais facile à comprendre grâce à cette documentation.
En voici un bref résumé : m[coté]-[n][chiffre] :

• La première lettre est soit m pour marge soit p pour padding ;
• La deuxième lettre désigne le côté ou appliquer l'espacement : gauche, droite, gauche et droite, haut, bas, haut et bas, associer respectivement aux lettres l, r, x, t, b, y. S'il n'y a pas de lettre, l'espacement est de tous les côtés ;
• Un tiret sépare l'endroit de l'espacement de sa valeur ;
• On peut ajouter un n devant le chiffre, pour appliquer une marge négative : au lieu de se séparer, les composants de superposeront (ne fonctionne pas avec les padding) ;
• Et enfin un chiffre entre 0 et 5 qui caractérise la taille de l'espace (on peut mettre auto à la place d'un chiffre pour les marges).

Mise en forme de text

On utilise les classes suivantes essentiellement dans les label et dans les choices.

Les classes text-tiny, text-small, text-medium, text-large, text-giant, text-gargantuan donnent une taille différente au texte (de gauche à droite, du plus petit au plus grand).

Titre

La classe text-title donne l'aspect d'un titre au texte.

Mettre en gras

La classe text-bold met le texte en gras.

Figer l'espace

La classe text-monospace remplace la police de texte par une autre dont les espacements sont fixes. Simule une police supplémentaire pour votre feuille. Utile pour une belle interface.

Largeur et Hauteur

Vous pouvez donner une largeur et/ou une hauteur fixes (en pixel) à un composant grâce aux commandes w-[nombre]px et h-[nombre]px.

• "w" pour width qui signifie largeur,
• et "h" pour height qui signifie hauteur.

Les nombres de pixels que vous pouvez choisir en largeur sont 25, 50, 75, 100, 125 150, 175, 200 et 300 (exemple w-25px). Les autre nombres (comme 80 ou 101) ne fonctionneront pas.

Les nombres de pixels que vous pouvez choisir en hauteur sont tous ceux de la largeur, plus 400, 500, 600 et 700 (exemple h-700px).

Cacher des composants

Il y a deux classes pour cela, avec une petite nuance entre elles deux :

• La classe d-none cache le composant comme s'il n'existait pas. Il ne prend ainsi plus aucun espace.
• La classe invisible cache le composant en conservant sa place et ses espacements. Pratique si vous voulez ajuster l'alignement entre deux lignes contenants des éléments différents.

Ces deux classes ne fonctionnent pas sur les containers.

Montrer qu'un objet est cliquable

La class clickable affiche le curseur main et change le texte en orange lorsque vous survolez le composant. Exactement le même effet visuel que lorsque vous cochez l'option « Cliquable » pour un label. Si vous l'utilisez sur une colonne ou une rangée, elle s'applique à tous les composants qu'elle contient.

Transformation des icônes

À noter qu'une partie des classes de transformation des Font Awesome sont disponibles dans Let's Role :

• fa-rotate-90 = rotation de 90° (dans le sens horaire)
• fa-rotate-180 = rotation de 180°
• fa-rotate-270 = rotation de 270°
• fa-flip-horizontal = miroir horizontal
• fa-flip-vertical = miroir vertical
• fa-flip-both = miroir horizontal et vertical