Bootstrap 4 vs. Foundation 6 for sites – Habiller des formulaires

  VS  

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 SASS text-inputs.

Cette fonction est déclarée dans le fichier /scss/util/_selector.scss du framework et se présente comme ceci:

@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 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *