Twitter Bootstrap 3 vs Foundation 4

J’ai passé beaucoup de temps à comparer Bootstrap et Foundation Framework en vu de la refonte d’un important projet. Étant convaincu que Foundation était la meilleure alternative et je me suis réjouis qu’il passe à la version 4, une version « mobile-first ». Mais en y regardant de plus près, quelques changements important comme la fin du support de IE8 et l’utilisation de la librarie javascript zepto à la place de jQuery, m’ont fait me tourner vers Bootstrap 3, la nouvelle version du framework responsive de Twitter.

Résumé de quelques fonctionnalités que chacun a à offrir

Système de grille

Bootstrap 
960 pixels non-responsive ou multi-break responsive (mobile < 768px / tablette > 768px / écran > 992px et >1200 px)
Foundation 
Single-break responsive (768px).
Création d’une grille qui inclut 2 points de break et trois grilles (petit, moyen, grand) pour Foundation 5. Cette option peut commencer à être utilisée à l’avance en vue de la future version de Foundation.

CSS

Similaire : La navigation, le breadcrumbs, la typographie, les tables, les formulaires, les boutons, les classes de visibilité, la pagination, les alertes, les barres de progression, les vignettes.

Bootstrap 
Différent: images, badges, list groups
Foundation
Différent: Block grid, flex video, inline lists, pricing tables

Javascript

Bootstrap 
jQuery
Foundation
Zepto / jQuery

Composants Javascript

Identique ou similaire : Modal windows, drop downs, pop-overs, scrollspy, sections/tabs/accordion, tool tips, a responsive lightbox

Foundation 
Different: Interchange – adaptive images, Joyride – site tour, Abide – form validation

Navigateurs supportés

Bootstrap 
Supporte IE8 à l’exception des propriétés CSS3.
Foundation 
Pas de support d’IE8. Les composants de base fonctionnent, mais la grille ne fonctionne pas du tout.

Conclusion

Voici les points essentiels et les différences entre les 2 systèmes. Ce qui est clair c’est que le choix de Foundation de ne pas supporter IE8 m’a inévitablement poussé à faire des recherches du coté de Bootstrap. Le support d’IE8 est (malheureusement) encore nécessaire vu que 10% du trafic se fait encore avec ce navigateur en 2013. Je ne sais pas si vous avez déjà été chez votre frère ou cousin qui n’ont pas mis leur navigateur à jour depuis qu’ils ont acheté leur ordinateur, mais c’est plus courant qu’on ne le pense. Les gens ne font pas toutes les mises à jour !

Bootstrap est plus populaire que Foundation, sa communauté est plus large, par contre la documentation de Foundation est vraisemblablement plus complète.

Un point me fait peur avec Foundation, ils parlent déjà de la version 5 alors que la version 4 est récente. J’ai bien peur que cela devienne compliqué pour la documentation et que ça ne devienne un projet de geek (L’utilisation de Zepto me semble d’ailleurs un peu expérimentale). Je ne suis pas à l’abri de quelque chose de similaire avec Bootstrap, mais avec Bootstrap je ne pense pas être complètement à la rue avec mon projet lorsqu’il sortira.

J’espère que ces quelques lignes pourront vous aider et n’hésitez pas à laisser un commentaire pour me faire part de votre avis.

Ressources
http://foundation.zurb.com
http://getbootstrap.com
http://zeptojs.com
http://css-tricks.com/sass-vs-less
http://abetteruserexperience.com/...

2 réflexions au sujet de « Twitter Bootstrap 3 vs Foundation 4 »

  1. Il ne faut pas oublier non plus que IE 8 est très utilisé en entreprise. Un projet web à destination des professionnels ne devra donc surtout pas faire l’impasse sur ce navigateur encore très courant. Et opter de fait pour Bootstrap.

  2. Merci beaucoup pour ce post très sympa et bien utile. J’étais parti aussi pour utiliser Foundation 4. Ce qui me plaisait, c’était l’utilisation de compas et la personnalisation facile des thèmes du framework. En revanche, je suis également un peu ennuyé par la non prise en charge de IE 8, même si l’on peut trouver des scripts qui palis à ce problème, mais ça fait un peu bidouille. Je pense que ce qui fait la force de Bootstrap, c’est en effet sa communauté nombreuse et active. Même si je lui reproche un peu d’être assez complexe à personnaliser, les marqueurs CSS étant un peu longs à mon goût pour au final modifier la couleur d’un lien de menu au survol par exemple…

Laisser un commentaire

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