Bootstrap m'a tué, Foundation m'a sauvé

Portrait de BILLY robin
Catégorie: 
Foundation

Plus qu'un article confrontant les deux principaux Framework du design Front-End, j'ai pour vocation de vous faire partager mon expérience sur l'utilisation de ces deux outils dans mon quotidien de développeur Back-End.

Parlons d'abord un peu de moi : je suis Ingénieur d'études J2EE et je travaille principalement sur la création de Web Services. Malheureusement mon équipe ne dispose pas d'intégrateurs web, c'est donc à moi que revient la charge de mettre en page les sites sur lesquels je travaille. Hors, sans formation d'intégrateur, c'était le casse-tête pour réussir à faire un site moderne et ergonomique.

Puis en 2011 j'ai découvert Bootstrap, leader sur le marché des Frameworks Front-End. Son fonctionnement m'a immédiatement séduit : on télécharge la version minifiée du code source, un copier/coller dans notre projet et on dispose de l'ensemble des fonctionnalités offertes par le Framework.

Après quelques heures d'apprentissage, Bootstrap a changé mon approche sur le design d'un site internet : sa puissance m'a permis de créer des interfaces d'administration user-friendly en quelques heures, un véritable gain de temps pour moi.

Bootstrap

Le Framework Bootstrap est développé et maintenu depuis 2010 par deux développeurs de Twitter, Mark Otto et Jacob Thornton. Il offre de nombreux outils afin d'aider les développeurs à créer rapidement des interfaces au design réussi.

Celui-ci est basé sur l'utilisation d'une grille de placement, constituée de 12 colonnes. Cette grille permet d'agencer les contenus comme bon vous semble et avec l'assurance que ces derniers seront placés au bon endroit et cela uniquement via l'utilisation des attributs HTML "class".

Bootstrap offre également des ensemble de styles par défaut, nous retrouvons ainsi des styles de boutons, de tableaux, de barres de chargements, des messages d'alertes ou encore de typographies, ces éléments étant tous prévus pour être intégrés ensembles dans un style graphique très travaillé.

Cet ensemble d'éléments font de Bootstrap un Framework CSS très complet, robuste et éprouvé. De nombreux sites à forte afluence, tels que Spotify, MongoDB ou encore la NASA utilisent cet outil, preuve de sa puissance et de sa renommé auprès des développeurs Front-End.

Dans un premier temps l'aspect simple de cet outil m'a grandement séduit. Celui-ci m'a en effet permis de développer de nombreuses interfaces très rapidement. J'en ai ainsi profité pour développer des outils me permettant d'automatiser des tâches que j'effectue quotidiennement tout en disposant d'une interface agréable à utiliser.

Mes premières réticences sont apparues lorsque j'ai commencé à utiliser Bootstrap au sein de mes projets professionnels. N'ayant pas eu de formation "Front-End" à proprement parler, je n'avais que très peu d'expérience sur les langages Sass et Less, permettant de compiler le CSS et ainsi de modifier simplement les styles par défaut fournis avec Bootstrap.

Et sans ces outils, la modification des styles par défaut est un parcours du combattant : il faut rechercher dans les miliers de lignes du code source chaque couleur afin de les modifier une par une, et ce pour chaque élément.

N'ayant pas le temps d'apprendre et d'intégrer des langages permettant de modifier rapidement les styles par défaut fournis avec Bootstrap, et ne pouvant les laisser, ceux-ci ne correspondant pas avec les chartes graphiques de mes clients, j'ai décidé de rechercher des solutions alternatives.

Foundation

Suite aux problèmes de personnalisation que j'ai rencontrés avec Bootstrap, j'ai découvert le second plus grand acteur du marché des Frameworks CSS, Foundation.

Foundation est un Framework développé par la société Zurb depuis 2011. Comme son concurrent, il fourni aux développeurs de nombreux outils permettant de développer des interfaces graphiques rapidement et simples à maintenir.

De manière générale, Foundation fonctionne de la même manière que Bootstrap : on dispose d'une grille de placement constituée par défaut de 12 colonnes. On dispose également de nombreux styles prédéfinis permettant de créer une interface sobre de manière très simple. Seule la syntaxe changeant, j'ai mis très peu de temps pour prendre en main ce nouvel outil.

Le premier point positif que j'ai pu noter pour Foundation, c'est le parti qu'a pris Zurb en personnalisant très peu les styles graphiques fournis par défaut : ici notre interface n'est pas mauve par défaut ! De plus, ces styles sont très facilement surchargeables depuis un fichier CSS.

Le second point positif que j'ai trouvé à ce Framework est l'intégration très poussée du Responsive Design. Cette notion commençait seulement à émerger en 2011, lorsque j'ai commencé à utiliser Bootstrap mais était bien présente dans les demandes des clients lorsque je suis passé à Foundation.

Et sur le Responsive Design, Foundation se démarque réellement : pas besoin de faire de nombreux tests et de prévoir une interface pour chaque type d'écran existant (Smartphone, Tablette, Ordinateur, Grand écran), le Framework s'occupe de tout et réagence automatiquement l'interface en fonction de la taille de l'écran utilisé. Seuls les quelques petits bugs et cas particuliers restent à corriger, ce qui est nettement moins long que de penser plusieurs designs par page.

Un choix à faire

Depuis mes débuts dans l'utilisation des Frameworks CSS j'ai eu le temps d'apprendre à utiliser les compilateurs CSS Sass et Less. Aujourd'hui, la personnalisation de Bootstrap (et de Foundation) n'est donc plus un problème pour moi, mais je garde toujours une préférence pour Foundation. En effet, en utilisant ce dernier je n'ai pas besoin de réinitialiser la moitié des styles ne me plaisant pas (boutons arrondis, couleurs, ect...), ceux-ci étant par défaut très simples ; et je peux donc commencer à ajouter ma charte graphique très rapidement.

Le second point qui me fait préférer Foundation est la simplicité de la mise en place d'une interface Responsive Design, dans la plupart des cas tout se fait automatiquement, il n'y a rien à paramétrer.

Je pense donc que Bootstrap s'adresse plus aux intégrateurs Front-End ayant des compétences poussées dans la personnalisation des interfaces et aux développeurs voulant créer des interfaces rapides sans se soucier des styles par défaut.

Je pense par contre que Foundation est plus adapté aux développeurs Back-End devant affronter des tâches d'intégration, celui-ci étant très simple à personnaliser et disposant d'une documentation très bien détaillée.