Saviez-vous que Bootstrap est livré avec un ensemble de classes d'aide CSS conçues pour vous aider avec vos vues ? Vous souhaitez optimiser vos activités de création de thèmes et tirer le meilleur parti de MendixL'intégration de Bootstrap ? Si c'est le cas, lisez la suite.
Qu'est-ce qu'une classe d'assistance
Tout d'abord, qu'est-ce qu'une classe d'assistance exactement ? Pour bien comprendre le concept, il est bon de prendre du recul et d'examiner la situation générale de CSS. Bien que de nombreux développeurs soutiennent que CSS n'est pas un langage de programmation, les bonnes pratiques CSS sont assez similaires aux bonnes pratiques de codage bien établies. En particulier celles comme DRY (Don't Repeat Yourself) et l'utilisation du concept d'architecture sur laquelle s'appuyer (BEM, OOCSS et Smaccs sont trois des plus populaires).
En soi, CSS a une très forte tendance à devenir – ce que tout codeur reconnaît probablement depuis son premier projet – du « code spaghetti ». Le code est dispersé partout, il manque une structure décente et il s'agit d'une combinaison de beaucoup de répétitions de code et de morceaux de code inutilisés. CSS en soi n'a pas de concept de portée, est complètement lié au HTML (il y a une dépendance intéressante pour vous) et est assez souvent assez obscur en raison de concepts comme la spécificité.
En toute logique, beaucoup de gens ont pensé que, à l'ère moderne, cela était totalement interdit. Ils ont donc élaboré des concepts architecturaux afin de rendre le code CSS plus modulaire, évolutif, maintenable et réutilisable, même si la vue HTML elle-même devait changer. Le code CSS de Bootstrap est un très bon exemple de ces pratiques. Comparez les règles CSS suivantes :
#newButton {
display: inline-block;
padding: 6px 12px;
color: #333;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
background-color: #fff;
}
#deleteButton {
display: inline-block;
padding: 6px 12px;
color: #fff;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
background-color: #f00;
}
Imaginez que vous deviez thématiser un projet de taille moyenne avec ce type d'écriture (nous aurions besoin de cibler chaque bouton de l'application entière, en écrivant essentiellement le même code encore et encore). Pire encore, imaginez qu'il faille implémenter une petite refonte de l'application. Heureusement, une architecture appropriée et des bonnes pratiques comme celles que nous trouvons dans Bootstrap rendent la vie tellement plus facile :
.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
}
.btn-default {
color: #333;
background-color: #fff;
}
.btn-warning {
color: #fff;
background-color: #f00;
}
Et voilà, nous avons un CSS entièrement modulaire. Il s'agit simplement de combiner les noms de classe sur les éléments HTML. (Remarque : les avantages de cette façon d'écrire deviendront plus évidents si vous stylisez dix boutons, mais je ne voulais pas vous ennuyer avec autant de code CSS répétitif).
En gros, nous avons arrêté de styliser les éléments individuels et avons commencé à ajouter un comportement visuel aux éléments. Nous créons un système ou une architecture qui fait tout le travail à notre place. C'est là qu'un concept comme les classes d'assistance entre en jeu.
En substance, une classe d'assistance peut être décrite comme une « règle de comportement visuel indépendante », ce qui signifie qu'elle n'est liée à aucun élément HTML ou groupe d'éléments spécifique, et qu'elle est utilisée comme classe supplémentaire sur un objet pour éviter la répétition de code tout en obtenant le comportement souhaité. Fondamentalement, l'avantage devient évident lorsque vous avez juste besoin de ce petit comportement supplémentaire sur votre élément, par exemple un bouton positionné sur le côté droit de l'écran au lieu du côté gauche.
Bien que limité en nombre, Bootstrap dispose de classes d'assistance assez astucieuses que nous pouvons utiliser dans Mendix projets. Je vais énumérer les plus importants et décrire brièvement leurs objectifs.
Classes d'aide aux couleurs Bootstrap
Les classes d'aide à la couleur peuvent être divisées en deux catégories : celles qui modifient la couleur du texte et celles qui modifient la couleur de l'arrière-plan.
Couleurs textuelles :
- .text-muet
- .text-primaire
- .text-succès
- .text-info
- .text-avertissement
- .text-danger
Couleurs d'arrière-plan :
- .bg-primaire
- .bg-succès
- .bg-info
- .bg-avertissement
- .bg-danger
Si vous avez déjà joué avec le style Bootstrap, vous reconnaîtrez peut-être « primaire », « réussite », « info » et autres parmi les types de boutons qui peuvent être utilisés. Dans Bootstrap, ces termes sont utilisés pour définir un type de couleur.
Classes d'aide au positionnement Bootstrap
Bien souvent, le style spécifique d'un élément en lui-même doit être indépendant de sa position sur la page. Pour tenir compte des positions que la mise en page normale ne prend pas automatiquement en charge, nous disposons de certaines classes d'assistance qui nous aident à positionner les éléments au bon endroit.
Régulateurs à flotteur :
- .tirer à gauche
- .tirer à droite
- .clearfix
Nous pouvons faire flotter un élément dans notre mise en page en utilisant les classes .pull-left et .pull-right, créant ainsi respectivement un flotteur gauche ou droit. Le problème le plus courant avec le comportement flottant est le fait que le conteneur parent ne sait plus quelles sont les dimensions de son contenu. Nous pouvons utiliser la classe d'assistance .clearfix pour résoudre ce problème, en redonnant au conteneur parent sa hauteur correcte.
Centrage du contenu :
- .bloc central
Malheureusement, le centrage du contenu dépend fortement du contexte dans lequel il se trouve, en particulier pour le centrage vertical du contenu. La classe d'assistance .center-block facilite le centrage horizontal des éléments de niveau bloc avec des largeurs connues.
Classes d'aide à la visibilité Bootstrap
Outre le positionnement des éléments, les applications interactives nécessitent également assez souvent des changements de visibilité en raison, par exemple, de l'état d'une page que nous consultons.
Aides à la visibilité standard :
- .invisible
- .hidden
- .spectacle
CSS utilise deux types de « masquage » de contenu : définir la visibilité sur « none » ou définir l'affichage sur « none ». Une visibilité sur « none » signifie que l'élément n'est pas visible mais qu'il est toujours un « acteur » dans la mise en page, occupant de l'espace. Un affichage sur « none » signifie que le navigateur ignorera l'élément comme s'il n'existait pas. Nous pouvons utiliser .invisible pour rendre un élément invisible et nous utilisons .hidden pour définir son affichage sur « none ». La classe d'assistance .show est en fait utilisée pour contrer la classe .hidden. Ces classes d'assistance de visibilité de base peuvent être d'une aide immense pour créer un comportement interactif personnalisé via des widgets personnalisés JavaScript.
Aides à la visibilité exotiques :
- .sr-uniquement
- .texte-masquer
La classe .sr-only signifie qu'un élément n'est visible que sur un lecteur d'écran en tant que support. La classe .text-hide masque le contenu textuel d'un élément et est assez souvent utilisée pour remplacer le texte par une image d'arrière-plan.
Un exemple
Bien que les possibilités soient infinies, un petit exemple peut facilement être montré. Ci-dessous, deux captures d'écran d'une petite application créée dans Mendix. Un .bg-info a été utilisé sur l'en-tête de la page avec .pull-right pour le contenu textuel. Les trois en-têtes de tuiles ont été enrichis avec différentes classes de couleurs de texte. Tout cela a été fait en moins d'une minute de travail.
Avant
Après
En conclusion
Créer un thème dans Mendix ne signifie pas toujours écrire beaucoup de code CSS. Parfois, il suffit d'ajouter un nom de classe à l'intérieur du Mendix Le modélisateur est tout ce dont vous avez besoin, tirant le meilleur parti de ce qui existe déjà.
N'oubliez pas que si vous aimez le concept de classes d'aide dans votre travail de création de thèmes, vous pouvez toujours créer les vôtres et les utiliser également.