{"id":339,"date":"2014-02-11T20:02:48","date_gmt":"2014-02-11T19:02:48","guid":{"rendered":"http:\/\/louis.hatier.me\/blog\/?p=339"},"modified":"2018-08-18T14:12:27","modified_gmt":"2018-08-18T13:12:27","slug":"foundation-5-vs-bootstrap-3","status":"publish","type":"post","link":"https:\/\/louis.hatier.me\/blog\/foundation-5-vs-bootstrap-3\/","title":{"rendered":"Foundation 5 vs Bootstrap 3"},"content":{"rendered":"

\"Logo<\/a>Foundation et Bootstrap sont des frameworks CSS\/JS, qui permettent de cr\u00e9er rapidement un site ou une application web, gr\u00e2ce \u00e0 une base de styles et de fonctionnalit\u00e9s JavaScript int\u00e9gr\u00e9s.<\/p>\n

Il existe des frameworks moins fournis, pour d\u00e9marrer avec quelque chose de plus light, comme Pure<\/a>\u00a0ou Gumby<\/a>.<\/p>\n

\"Logo<\/a><\/p>\n

Si vous aimez les interfaces Google, vous pouvez par exemple partir sur TODC Bootstrap<\/a>\u00a0ou Bootplus<\/a>\u00a0qui sont bas\u00e9es sur Bootstrap.<\/p>\n

Nous nous int\u00e9ressons ici \u00e0 Foundation<\/a>\u00a0et Boostrap<\/a>, qui sont respectivement en version 5 et 3.<\/p>\n

<\/p>\n

Compatibilit\u00e9<\/h2>\n

Le probl\u00e8me de comptabilit\u00e9 vient souvent du c\u00f4t\u00e9 d\u2019Internet Explorer, de ce c\u00f4t\u00e9 l\u00e0, Bootstrap supporte \u00e0 partir de la version 8, Foundation \u00e0 partir de la version 9 (impl\u00e9mentation de jQuery 2).<\/p>\n

Il faut donc prendre en compte ce param\u00e8tre avant de partir sur l\u2019un des deux, en fonction de l\u2019utilisateur final.<\/p>\n

 <\/p>\n

Documentation<\/h2>\n

Bonne documentation des deux c\u00f4t\u00e9s, avec des exemples et des templates pour partir sur une structure de page sp\u00e9cifique.<\/p>\n

Il existe un bon nombre de plugins existant pour Bootstrap, cr\u00e9\u00e9s par la communaut\u00e9.<\/p>\n

Foundation lui, dispose d\u2019un playground<\/em> o\u00f9 vous trouverez des plugins (responsive table par exemple) et autre bout de code.<\/p>\n

 <\/p>\n

Pr\u00e9processeurs<\/h2>\n

Pour la g\u00e9n\u00e9ration du CSS, Bootstrap utilise LESS<\/a>, alors que Foundation utilise Sass\/SCSS<\/a>.<\/p>\n

Ces deux pr\u00e9processeurs sont assez similaires, plusieurs sujets existent sur le web si vous voulez les comparer.<\/p>\n

 <\/p>\n

CSS\/HTML<\/h2>\n

Pas beaucoup de diff\u00e9rence \u00e0 ce niveau, la plupart des \u00e9l\u00e9ments ont un style pr\u00e9d\u00e9finis (table, navigation, pagination, button, grid, responsive).<\/p>\n

Foundation se veut plus Flat UI avec moins d\u2019arrondi et plus d\u2019espace, un design un peu moins marqu\u00e9 que Bootstrap.<\/p>\n

L\u2019IconFont, qui est pr\u00e9sent dans Bootstrap, est en cours d\u2019impl\u00e9mentation dans Foundation 5, je l\u2019ai test\u00e9 manuellement \u00e7a marche plut\u00f4t bien.<\/p>\n

Les structures HTML sont un peu moins lourdes dans certains cas pour Foundation, avec moins d\u2019encapsulation de div<\/em>.<\/p>\n

Possibilit\u00e9 de faire sa sauce dans les 2 cas au niveau du design.<\/p>\n

 <\/p>\n

JavaScript<\/h2>\n

Du c\u00f4t\u00e9 des plugins, encore une fois on retrouve plus ou moins les m\u00eames fonctionnalit\u00e9s r\u00e9currentes pour un site web : dropdown, tabs, carousel, alert.<\/p>\n

Les plugins Foundation me paraissent plus int\u00e9ressants, notamment le Modal qui permet de charger du contenu en Ajax, et d\u2019encha\u00eener sur d\u2019autres Modal.<\/p>\n

Je noterais \u00e9galement le Joyride, le Lightbox, et la validation de formulaire, qui sont absent de Bootstrap.<\/p>\n

Les autres sont globalement similaires.<\/p>\n

 <\/p>\n

Conclusion<\/h2>\n

Pour avoir essayer les deux, j\u2019aurais plut\u00f4t tendance \u00e0 partir sur Foundation, de part le choix du pr\u00e9processeur, de son design par d\u00e9faut plus \u00e9pur\u00e9 et moins lourd en HTML, mais aussi pour les diff\u00e9rences au niveau des plugins JavaScript.<\/p>\n

Seul inconv\u00e9nient, il ne g\u00e8re pas IE8, qui est la derni\u00e8re version d\u2019Internet Explorer sous XP.<\/p>\n

 <\/p>\n

Edit : Bootstrap dispose maintenant d\u2019une version Sass<\/a> en plus de la version LESS.<\/em><\/p>\n

\"Share<\/a>