Dans le vaste monde des frameworks et des boîtes à outils de prototypage rapide CSS, il existe une multitude d'options différentes, mais depuis que Bootstrap de Twitter est arrivé sur les lieux, il semble qu'il ait largement englouti ce marché. Y a-t-il place ou raison pour autre chose?
Les gens de Zurb le pensent et ne sont pas sur le point d’abandonner leur projet de fondation largement couronné de succès. Ayant écrit à propos de Bootstrap à plusieurs reprises dans le passé, je vais passer à la fondation aujourd'hui et voir ce que je pense.
Rencontrez la Fondation
Alors, quelle est la fondation? Zurb le décrit comme «un cadre facile à utiliser, puissant et flexible pour la construction de prototypes et de code de production sur tout type d'appareil».
Dès cette description, vous pouvez dire que Zurb met beaucoup d’accent sur l’aspect inter-appareils de sa grille de présentation. Chose intéressante, le mot? Sensible? n'apparaît nulle part sur le site de la Fondation (que je puisse trouver), mais les avantages sont certainement similaires: concevoir un projet qui fonctionne partout.
Est-ce que c'est comme Bootstrap?
Ces deux projets ne sont certes pas identiques, mais ils sont aussi proches que possible de la concurrence directe. En gros, ils sont assez similaires pour que si vous en utilisez un, vous n'utilisez probablement pas l'autre.
Bootstrap et Foundation cherchent à vous fournir tous les outils dont vous avez besoin pour effectuer rapidement des travaux de mise en page et de prototypage basés sur CSS à l'aide de quelques bonus JavaScript. Ils sont également tous deux commercialisés avec un accent mis sur le design minimaliste, résultat du style par défaut étendu sur des éléments tels que la typographie. Même leurs pages d'accueil sont remarquablement similaires:
La grille
La première chose que je me tourne vers n'importe quel cadre est la grille. Le système de mise en page est souvent la pierre angulaire de l'ensemble de l'expérience. Il est donc important de bien le faire.
Avec Foundation, vous commencez avec une grille flexible de douze colonnes, qui répond bien aux redimensionnements du navigateur et utilise des requêtes multimédia pour gérer le passage à des périphériques plus petits. Dans Bootstrap, vous avez également une grille de douze colonnes qui fait un usage intensif des requêtes multimédia. Ici, vous avez la possibilité de choisir entre des colonnes fluides et statiques, ce qui est agréable.
L'implémentation de la grille Foundation devrait être un jeu d'enfant si vous avez déjà utilisé d'autres systèmes de grille. Oui, cela implique l'utilisation de noms de classe non sémantiques, donc si vous détestez les frameworks pour cette raison, ce ne sera pas celui qui changera d'avis.
Le système ici est assez simple pour que vous puissiez le récupérer presque immédiatement. Chaque fois que vous voulez une nouvelle ligne, créez une div avec la classe "row". De là, vous avez douze colonnes à remplir. Vous pouvez le diviser en deux avec deux divisions de six colonnes, le couper en trois avec trois divisions de quatre colonnes, etc. Appliquez simplement une classe qui correspond au nombre de colonnes que vous souhaitez remplir en plus des? Colonnes? classe.
Si nous recréons cet exemple dans Bootstrap, la syntaxe est extrêmement similaire, bien que plus succincte. Bootstrap ne nécessite pas les? Colonnes? classe afin que vous serez en mesure de réduire votre marge un peu. Certes,? Span6? Bien sûr, ne lit pas aussi bien que "six colonnes".
Les deux systèmes de grille disposent de toutes les fonctionnalités avancées dont vous avez besoin: imbrication, décalages, poussage / extraction, etc. Comme pour le code ci-dessus, vous constaterez que, grâce à ces fonctionnalités, la syntaxe de Foundation est un peu plus simple et facile à lire, Bootstrap est plus succinct.
Qui gagne la bataille de la grille?
Je suis un fanatique de la grille et j'aime vraiment creuser et voir ce qui fait bouger les choses. J'ai construit des pages avec les grilles Bootstrap et Foundation et, honnêtement, je trouve que les deux sont excellentes. Leur approche est si similaire que je ne pense pas que ce sera la fonctionnalité décisive pour quiconque tentera de choisir entre les deux.
Si vous en détestez un, vous les détesterez probablement tous les deux et si vous aimez l'un d'eux, il ne sera pas difficile de passer à l'autre. Auparavant, Bootstrap aurait perdu cette bataille sans réfléchir, mais maintenant que Bootstrap 2 est réactif, je le déclare nul.
Éléments d'interface utilisateur de base
Ces deux frameworks contiennent des éléments d'interface utilisateur pré-stylés mais personnalisables, qui vous permettent de créer rapidement une maquette de votre application ou de votre page Web sans trop réfléchir à la manière dont vous allez structurer différents éléments.
Commençons par examiner l’un des éléments les plus fondamentaux de l’interface utilisateur, un bouton. En base, tout ce dont vous avez vraiment besoin pour un bouton est une balise d'ancrage avec le bouton? classe appliquée.
Cependant, cela va créer un bouton incroyablement simple. Si vous voulez le rendre plus intéressant, chaque style supplémentaire a une autre classe associée. Par exemple, ci-dessous, j'ai créé un petit bouton bleu brillant avec des coins arrondis.
L'histoire est la même ici qu'avec la grille. Le style de Foundation est plus bavard, mais surtout dans ce cas, il permet une expérience plus facile à peaufiner. Au lieu de diviser les classes par ce qu'elles font, Bootstrap assigne des personnalités différentes à chaque classe. Vous pouvez donc choisir entre? Btn-info? et? btn-warning? pour différentes options de style.
En ce qui concerne le style, j'aime personnellement le look dégradé subtil que Bootstrap utilise mieux que le look Foundation brillant, mais il peut être facilement personnalisé dans les deux cadres, ce qui en fait un problème qui n’est pas un problème.
Formulaires, onglets et étiquettes Oh My
Cela ne vaut tout simplement pas la peine de passer en revue tous les éléments de l'interface utilisateur et de comparer la syntaxe, vous devriez déjà avoir une vue d'ensemble. Les deux frameworks vous stockent sur les éléments d'interface utilisateur les plus courants afin que vous puissiez les mettre en œuvre pratiquement sans aucun effort lourd.
Onglets, navigation, chapelure, formulaires, étiquettes, tableaux; si vous les voulez, vous les avez, peu importe lequel vous utilisez. Cela dit, si vous recherchez la quantité, Bootstrap prend vraiment la tête et semble emballer une tonne d'éléments d'interface utilisateur intéressants. Chaque framework a des pièces uniques pas dans l’autre, mais Bootstrap gagne le jeu des nombres.
Goodies JavaScript
Foundation n'est pas seulement une bibliothèque CSS, il possède également d'excellentes fonctionnalités JavaScript. Une de mes fonctionnalités préférées est le diaporama Orbit, très facile à mettre en œuvre et à personnaliser.
Tout ce dont vous avez besoin pour configurer un diaporama est une div contenant des images (utilisez les balises alt pour les légendes). À partir de là, il vous suffit de pointer votre code JavaScript vers cette division et d'appeler l'orbite? une fonction. Si vous voulez aller plus loin, il y a beaucoup d'options à modifier.
Il y a aussi un plugin de fenêtre modale plutôt sympa, des info-bulles, des fonctionnalités d'onglets, des menus déroulants, des messages d'alerte et une belle validation de formulaire. En passant à Bootstrap, nous voyons la plupart des mêmes types d'éléments implémentés de manière légèrement différente. Une fois encore, nous constatons que l’offre Bootstrap est un peu plus robuste.
Support pré-processeur
Un domaine dans lequel Foundation et Bootstrap se sont séparés est leur support de pré-processeur. Foundation est allé avec Sass et Compass, tandis que Bootstrap est allé avec LESS. J'ai commencé en tant que fan de LESS, mais depuis lors, j'ai acquis la puissance de Sass et je suis donc enclin à aimer mieux Foundation à cet égard, surtout compte tenu de l'intégration de Compass.
Compass est un concentré de qualité de préprocesseur et facilite vraiment le codage de CSS3 sur plusieurs navigateurs sans effort. J'ai toujours été assez surpris que Bootstrap ait plutôt choisi la route LESS.
Cela dit, il est intéressant de noter que Bootstrap sert presque de Compass pour LESS. Comme avec Compass, Bootstrap est intégré à toutes sortes de mixins utiles qui vous aident à utiliser des fonctionnalités CSS complexes avec très peu de codage manuel.
Que vous utilisiez Foundation ou Bootstrap, tirer parti du support du préprocesseur facilitera grandement la personnalisation et l’extension du cadre.
Cut The Crap, qui gagne?
Il est difficile de déclarer un gagnant ici. Comme je l'ai mentionné précédemment, Bootstrap 1 était facilement inférieur à Foundation simplement parce que la présentation était purement statique et non réactive. Cependant, avec Bootstrap 2, Twitter a vraiment amélioré son jeu et a construit un ensemble d’outils exceptionnel et Foundation a encore du pain sur la planche pour le mettre à niveau.
Bootstrap a tout simplement plus à offrir d’un point de vue strict. Il est également codé de manière plus succincte, mieux organisé et documenté de manière beaucoup plus approfondie. Cela vient du fait que la communauté des développeurs a complètement adopté Bootstrap au point qu'il est facile de trouver de superbes thèmes, plugins et autres extras de tierces parties.
Cela étant dit, il y a une question importante ici: le plus gros est-il meilleur? Le fait que Bootstrap semble en contenir davantage ne signifie pas nécessairement qu'il est supérieur. Dans le monde de la conception et du développement Web, moins est souvent plus. Foundation a une sensation plus simple et moins gonflée que j’ai vraiment appréciée. Il est incroyablement facile de le télécharger et de commencer à décomposer des pages Web en un rien de temps.
Les utilisateurs de Bootstrap insisteront ici et souligneront que l'argument gonflé ne s'applique pas, car il existe un générateur de téléchargement Bootstrap personnalisé qui vous permet de décider facilement de ce que vous voulez et de ce que vous ne voulez pas dans votre framework.
Selon vous, quel est le meilleur?
Vous devriez faire un essai sur les deux frameworks pour voir lequel vous gélifierez le mieux. Cependant, vous êtes venu ici pour un avis et j'en ai un pour vous. Si vous souhaitez uniquement télécharger l'une de ces bibliothèques, utilisez Bootstrap. Je ne suis pas un fan de Bootstrap et pour être franc, je ne l'ai même pas adopté dans mon flux de travail personnel. De plus, je considère Fondation comme l'outsider et aimerais bien lui donner le prix ici, mais je pense qu'il a du retard à rattraper avant que cela se produise.
Mais qu'est ce que je sais? Vous utilisez ce type d’outils tous les jours et je veux savoir ce que vous en pensez. Est-ce que Foundation est meilleur que Bootstrap? Pourquoi ou pourquoi pas? Envisageriez-vous d'utiliser l'un de ces éléments dans votre flux de travail si vous ne l'êtes pas déjà?