Foundation 3 et Twitter Bootstrap 2

Introduction

Si vous êtes ici, c’est que le web, vous connaissez. Vous faites du développement web toute la journée, mais le jour où vous voulez créer votre propre site, un gros problème se pose. Le site fonctionne parfaitement bien, mais il est moche. En plus, vous avez passé des journées à en arriver là. La frustration vous guette. Et pourtant, il va falloir vous y faire, vous n’êtes pas graphiste et vos goûts personnels sont plutôt discutables.

Pas de panique ! Comme toujours (ou presque), des outils sont là pour vous aider. Mais parmi eux, lequel choisir ? Je vais vous parler ici de deux d’entre eux, Foundation et le désormais fameux Twitter Bootstrap.

CSS preprocessor

Ces deux outils reposent en partie sur des framework CSS : LESS pour Twitter Boostrap et SASS pour Foundation. Je ne vais pas trop m’étendre sur cette partie, les deux outils sont assez similaires. Si vous ne souhaitez pas modifier les styles fournis, ne cherchez pas trop longtemps lequel vous correspond le mieux. Cependant, SASS semble être un peu plus complet et surtout compatible avec Compass. Si vous souhaitez plus d’informations, vous pouvez aller lire cet article comparant LESS et SASS.

Grille et Responsive design

La grille

Foundation et Twitter Bootstrap disposent tous deux d’un système de grille pour faciliter le placement des éléments sur la page. Ces grilles sont découpées en 12 colonnes par défaut mais dans chacun des frameworks, cela est configurable. Cette grille s’ajuste à la taille de l’écran (du navigateur), ce qui est indispensable si l’on souhaite faire du « responsive-design ».

Au niveau du code, voilà à quoi ça ressemble :

Foundation

1
2
3
4
5
6
7
8
<div class="row">
<div class="four columns">
        Sidebar...
    </div>
<div class="eight columns">
        Main content...
    </div>
</div>

Twitter Bootstrap

1
2
3
4
5
6
7
8
<div class="row-fluid">
<div class="span4">
        Sidebar ...
    </div>
<div class="span8">
        Main content...
    </div>
</div>

Les syntaxes sont plutôt proches mais celle de Foundation me paraît plus lisible bien que moins concise. De plus, Foundation est beaucoup plus souple sur le « Source Ordering ». C’est à dire qu’il est possible d’ordonner son code de manière différente par rapport à l’affichage voulu (ou l’inverse).

Par exemple :

1
2
3
4
5
6
7
8
<div class="row">
<div class="two columns push-ten">
        cellule 2
    </div>
<div class="ten columns pull-two">
        cellule 1
    </div>
</div>

S’affichera :

Responsive Web Design

Qu’est-ce que c’est ?

La notion de Responsive Web Design regroupe différents principes et technologies mais il indique globalement qu’un site est conçu pour s’adapter aux différentes tailles d’écran et aux différents terminaux permettant d’afficher le site (navigateur, tablette, mobile, télé connectée, …). Ainsi, les mobinautes pourront avoir une expérience adaptée à leur terminal sans dégradation et sans devoir utiliser les fonctionnalité de zoom (ou un autre type de redimensionnement). Ils pourront consulter la même information, mais organisée différemment selon le type de terminal utilisé.

Wikipedia

Pour nous aider, Foundation propose la gestion d’une deuxième grille en plus de celle à 12 colonnes. Cette grille est orientée mobile, comprendre petits écrans, et est composée de 4 colonnes (par défaut). Elle permet de conserver une disposition correcte sur des écrans à largeur réduite.

1
2
3
4
5
6
7
8
9
10
<div class="row display">
<div class="three mobile-one columns">
        3 colonnes de largeur sur écran large (sur les 12 colonnes)
        1 colonne de largeur sur écran réduit (sur les 4 colonnes)
    </div>
<div class="nine mobile-three columns">
        9 colonnes de largeur sur écran large (sur les 12 colonnes)
        3 colonnes de largeur sur écran réduit (sur les 4 colonnes)
    </div>
</div>

Par défaut, les éléments se seraient retrouvés les uns en dessous des autres, ce qui peut être un comportement déjà satisfaisant.

Avec Twitter Bootstrap, le responsive design est aussi au rendez-vous. Lorsque la largeur de la fenêtre du navigateur/terminal change, la largeur des colonnes change et les éléments s’empilent si l’ écran n’est plus assez large.

Les deux frameworks donnent aussi la possibilité d’afficher ou cacher certains éléments selon la largeur du terminal utilisé, en partie à base de media queries. Foundation propose aussi la détection des écrans tactiles et des modes paysages et portraits.

Pour ma part, je donnerais donc un point à Foundation pour la gestion de la deuxième grille.

Typographie

Au niveau de la typographie (h1, h2, p, ul …), les deux frameworks fonctionnent à peu près de la même manière. Les tailles des caractères et des hauteurs de lignes sont prédéfinies mais peuvent être entièrement personnalisées, soit en utilisant le configurateur en ligne, soit en modifiant après coup le CSS via des variables globales LESS ou SASS. Match nul sur ce point.

Éléments graphiques et Javascript

Vous trouverez un bon nombre d’éléments HTML déjà stylisés en utilisant ces frameworks. Plus besoin de passer des heures sur les styles de vos boutons, formulaires, tableaux… et la liste est longue. Mais ça ne s’arrête pas là. Tous les éléments courants en web sont présents. Tool-tips, breadcrumbs, onglets, fenêtres modales, menus déroulants, accordéons, carrousels…

Là, Twitter Bootstrap semble gagner la manche par le nombre de composants disponibles. Cependant vous trouverez peut-être dans l’un ou l’autre, LA fonctionnalité que vous recherchiez.

Conclusion

Les deux frameworks présentés ne sont pas si différents l’un de l’autre. Alors, lequel choisir ? Déjà, cela dépendra de vos obligations, professionnelles ou personnelles. Foundation n’étant pas compatible IE7, ça peut refroidir plus d’un DSI. Cependant, cela explique quelques unes des différences au niveau du responsive design. Ensuite, la communauté autour de Twitter Bootstrap semble plus grande (je n’ai pas dit plus active). Environ 35000 « stars » et 8000 « forks » sur github pour Twitter et presque 6000 « stars » et 800 « forks » pour Foundation (je ne suis pas sûr que la métrique soit la meilleure). Ce qui peut être un avantage en environnement professionnel.

Au niveau des licences, Twitter Bootstrap est sous licence Apache 2 et Foundation sous licence MIT. Ce qui ne devrait pas changer grand chose pour vous.

J’entends déjà les « Ouais mais moi j’veux pas avoir le même site que les autres ». Bon déjà, comme vu dans l’introduction, quand on a pas bon goût, on évite de se plaindre. Ensuite, il existe des sites pour vous aider à choisir la palette de couleurs qu’il vous faut, et ainsi personnaliser le plus possible votre site. Vous en trouverez une liste ici.

Vous voilà maintenant au courant. Fini les : « je sais que c’est moche mais j’ai fait ça vite fait ! ».

VN:R_U [1.9.22_1171]
Rating: 0 (from 0 votes)
Share
Ce contenu a été publié dans Non classé. Vous pouvez le mettre en favoris avec ce permalien.

Une réponse à Foundation 3 et Twitter Bootstrap 2

  1. Hugo Cordier dit :

    Et si vous n’arrivez pas à départager les deux frameworks, voici un article qui pourra vous y aider :
    http://designshack.net/articles/css/framework-fight-zurb-foundation-vs-twitter-bootstrap/

    Enfin, départager… C’est vite dit, l’auteur lui même n’est pas bien sûr :)

    VN:R_U [1.9.22_1171]
    Rating: 0 (from 0 votes)

Laisser un commentaire