Source: Cleanest way to customize input[type=’text’] styles, codewise.
Depuis quelques semaines (et deux projets en cours de production), je décortique avec grand intérêt le framework front-end responsive Foundation 6 for sites créé et maintenu par Zurb. J’utilise Bootstrap 3 depuis sa première release stable (et Bootstrap 2 avant ça). Mais Bootstrap 4 étant encore en version Alpha j’ai décidé, pour voir, de me tourner vers une solution que je considère comme étant son principal challenger (la première version stable de Foundation 6 ayant vu le jour il y a plus d’un an).
Les possibilités offertes par Foundation 6 en terme d’habillage des champs de formulaire
Dans Foundation 6, les styles de l’ensemble des champs de saisie textuelle des formulaires (text, password, date, datetime, datetime-local, month, week, email, number, search, tel, time, url, color mais aussi l’élément HTML textarea) sont générés à partir d’une fonction text-inputs.
Cette fonction est déclarée dans le fichier /scss/util/_selector.scss du framework et se présente comme ceci:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@function text-inputs($types: (), $modifier: '') { $return: (); $all-types: text password date datetime datetime-local month week email number search tel time url color; @if not has-value($types) { $types: $all-types; } @each $type in $types { $return: append($return, unquote('[type=\'#{$type}\']#{$modifier}'), comma); } @return $return; } |
C’est ensuite à l’aide d’un mixin foundation-form-text déclaré dans le fichier /scss/forms/_text.scss du framework que toute la batterie de styles par défaut pour l’élément input, l’ensemble de ses itérations
et l’élément textarea sont générés. Ce mixin se présente comme ceci (extrait) :
|
|
@mixin foundation-form-text { // Text inputs #{text-inputs()}, textarea { @include form-element; appearance: none; } [...] } |
Le code CSS qui en résulte ressemble à ceci (extrait) :
|
|
[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea { display: block; box-sizing: border-box; width: 100%; height: 2.4375rem; margin: 0 0 1rem; [...] } |
Annuler les styles par défaut sur une sélection d’éléments
A ce stade, nous pourrions avoir besoin d’annuler les styles par défaut sur une sélection d’éléments pour repartir from-scratch (le bon vieux concept de reset CSS) et habiller un ou plusieurs champs de notre charte qui se démarquent visuellement des standards (un champ « Recherche » dans le bandeau de votre site ou un champ d’inscription à la « Newsletter » en pied de page par exemple; cette contrainte se présente quasi systématiquement).
Pour annuler les styles standards pour l’élément de formulaire input, nul besoin d’écrire un reset. Il faut surcharger le mixin foundation-form-text en passant en paramètre $modifier une pseudo-classe :not() à laquelle on attribuerait une classe générique, mais au libellé suffisamment parlant (par exemple, .is-unstyled (extrait):
|
|
@mixin foundation-form-text { // Text inputs #{text-inputs($types: (), $modifier: ':not(.is-unstyled)')}, textarea { @include form-element; appearance: none; } |
La sortie CSS sera alors la suivante (extrait):
|
|
[type=color]:not(.is-unstyled), [type=date]:not(.is-unstyled), [type=datetime-local]:not(.is-unstyled), [type=datetime]:not(.is-unstyled), [type=email]:not(.is-unstyled), [type=month]:not(.is-unstyled), [type=number]:not(.is-unstyled), [type=password]:not(.is-unstyled), [type=search]:not(.is-unstyled), [type=tel]:not(.is-unstyled), [type=text]:not(.is-unstyled), [type=time]:not(.is-unstyled), [type=url]:not(.is-unstyled), [type=week]:not(.is-unstyled), textarea { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 2.78571rem; margin: 0 0 1.14286rem; [...] } |
Désormais, un <input type="text" class="is-unstyled" /> ne sera plus affecté par les styles standard de Foundation 6. Pas besoin d’alourdir son code CSS avec quantité de styles reset pour annuler les déclarations par défaut. On peut se concentrer sur notre habillage custom.
Petit conseil: n’utilisez cette classe .is-unstyled que pour signifier, dans votre code HTML, quels éléments input ne doivent pas hériter des styles standards de Foundation 6. Pour les styler différemment, ajoutez une classe supplémentaire. Exemple:
|
|
<input type="text" class="is-unstyled quick-search" /> |
|
|
.is-unstyled { // NADA! Cette classe est présente sur l'élément afin qu'il n'hérite pas des styles par défauts. } .quick-search { // Mes styles spécifiques pour cet élément. border: 2px solid red; background: tomato; } |
Pour finir, sachez que vous pouvez faire appel à la fonction text-inputs à (quasiment) n’importe quel endroit dans votre code SCSS pour déclarer des styles spécifiques pour un élément donné ou toute une batterie d’éléments à la fois.
Quid des possibilités offertes par Bootstrap 4 en terme d’habillage des champs de formulaire?
De prime abord, on peut trouver ça déroutant que les styles soient appliqués à des attributs d’éléments plutôt que sur les éléments eux-mêmes via des classes, surtout si on est habitué à la logique Bootstrap 3 ou 4 et à ses classes .form-group et .form-control à appliquer sur des <div> englobantes ou sur les éléments eux-mêmes. Les styles Foundation 6 habillent d’office l’ensemble des champs de formulaires et c’est embêtant quand on veut s’affranchir de la patte graphique « Foundation » pour afficher certains formulaires.
Mais dans la pratique et avec les contraintes du terrain, la décision s’avère extrêmement pertinente (surcharge de toute la batterie de champs de formulaires d’un coup !).
Il faut le reconnaître, les formulaires sont c$%!§£s à habiller. J’ai voulu faire un test très simple: j’ai récupéré le code HTML d’un formulaire sur un site réalisé avec Drupal 7 (donc n’intégrant ni Bootstrap, ni Foundation pour que la structure HTML reste totalement neutre) et le module Webform. J’ai ensuite appliqué tour à tour la CSS sortie-de-la-boite de Bootstrap 4 et de Foundation 6 sans modifier de code ni HTML, ni CSS.
N’hésitez pas à agrandir/réduire la fenêtre en largeur pour tester l’aspect Responsive.
Avec Foundation 6, la mise en page est propre. Les champs sont habillés de manière minimaliste et le tout est parfaitement Responsive. Si votre client ne souhaite pas investir trop d’argent dans les formulaires, vous n’avez quasiment aucun travail à faire (minus peut-être les boutons à habiller) sur ce point pour obtenir un affichage convenable.
Avec Bootstrap 4, rien n’est habillé. Rien n’est Responsive. Et pour cause, les classes .form-group et autre .form-control doivent être rajoutées dans le code HTML pour obtenir un résultat (on peut aussi passer par SASS pour faire pointer les styles des classes Bootstrap sur les classes déjà en place). Au travail les développeurs front-end!!
Conclusion
A partir du moment où on décide d’aborder Foundation 6, on ne peut échapper à la comparaison avec Bootstrap 4. Chaque fois que j’en parle autour de moi, mes interlocuteurs veulent savoir si c’est mieux.
Comme je le disais en introduction, j’ai utilisé Bootstrap pendant des années. J’en connais ses points forts et ses points faibles et force est de constater que ces derniers n’ont pas été gommés avec l’arrivée de la version 4. Et l’habillage des formulaires ne reste qu’un tout petit exemple. Essayez de passer d’un menu accordéon en vue Mobile à un menu horizontal déroulant en vue Desktop… Le markup HTML est toujours (passage de la version 3 à la 4) différent d’un composant à l’autre, toujours pas de prise en charge des mediaqueries via JS, toujours pas de méthode .destroy() selon les cas.
En revanche, on sent dans la logique de fonctionnement et d’articulation du code de Foundation 6 que ses concepteurs sont des développeurs front-end chevronnés. Le framework est conçu pour être facile à utiliser et à étendre. Ses composants sont étudiés pour répondre aux contraintes quotidiennes du développeur. Avec les composants de navigation Responsive inclus, passer d’un menu accordéon en vue Mobile à un menu horizontal déroulant en vue Desktop se fait avec des classes et des data-attributes à ajouter au bon endroit dans le code HTML. Même pas besoin d’écrire de JS! Et on voit avec l’exemple donné dans ce billet que le code natif est pensé pour s’adapter immédiatement à l’environnement dans lequel il est parachuté.
Je ne peux que vous motiver à tenter de produire un site avec Foundation 6. Vous m’en direz des nouvelles 😉
Hello,
this is not an issue, but more of a concern about how to make the best out of Foundation 6 out-of-the-box SCSS components for custom website design.
So, I hope some skilled Foundation users will read this and share their opinions. 🙂
I’ve found some of the mixins to either:
- include too much CSS properties for custom needs (core and skin properties are often merged within a same mixin),
- prevent developer to custom-skin HTML elements (with skin values being forced rather than being included as mixin parameters).
As an example, here’s the dropdown-container mixin that includes both core and skin CSS properties :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/// Applies styles for a basic dropdown. @mixin dropdown-container { position: absolute; <= CORE z-index: 10; <= CORE display: block; <= CORE width: $dropdown-width; <= SKIN padding: $dropdown-padding; <= SKIN visibility: hidden; <= CORE border: $dropdown-border; <= SKIN border-radius: $dropdown-radius; <= SKIN background-color: $dropdown-background; <= SKIN font-size: $dropdown-font-size; <= SKIN &.is-open { visibility: visible; <= CORE } } |
Let’s assume I have 10 elements on my website that would use the dropdown component. 9 of them would have the same design. I can set the $dropdown- variables in the _dropdown.scss file to my regular needs.
But what if I want to take profit of the dropdown component for 1 specific element, but don’t want to show a border or need custom padding compared to the regular dropdown ?
Solutions I came up with include:
1. Make use of the regular mixin and override skin properties
(I guess I could use a Gulp plugin to remove duplicated properties within the same declaration… => Gulp clean-css with removeDuplicateRules option. Or CSS nano with discardDuplicates option).
|
|
.my-specific-dropdown { @include dropdown-container; // overriding regular styles width: 60px; padding: 2px 6px; border: 4px dotted tomato; border-radius: 0; background-color: pink; font-size: rem-calc(14); } |
Edit: even with a good Gulp CSS cleaning plugin, I can see a couple of issues doing that way :
2. (heavier and not so good idea IMO) Split standard mixin in 2.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/// Applies styles for a basic dropdown. @mixin dropdown-container { position: absolute; display: block; visibility: hidden; &.is-open { visibility: visible; } } @mixin dropdown-container-skin( $zindex: 10, $dropdown-width: 300px, $dropdown-padding: 20px, $dropdown-border: 1px solid #ccc, $dropdown-radius: 6px, $dropdown-background: #fff, $dropdown-font-size: 14px) { z-index: $zindex; width: $dropdown-width; padding: $dropdown-padding; border: $dropdown-border; border-radius: $dropdown-radius; background-color: $dropdown-background; font-size: $dropdown-font-size; } |
3. Creating an SCSS placeholder that includes mixin core properties.
|
|
// @mixin dropdown-container(); %dropdown-container-core { position: absolute; z-index: 10; display: block; visibility: hidden; &.is-open { visibility: visible; } } |
Third solution is the one I prefer so far. I might dig for a Gulp plugin that removes duplicate properties and first solution might become my favourite in the end.
What would you do?
Thanks.