Twitter Bootstrap, framework CSS – JS

Flattr this!

Ceux qui me suivent sur Twitter ont sûrement vu passer quelques tweets de ma part à propos de Twitter Bootstrap. Je vais donc vous faire un petit topo sur la chose :

Twitter Bootstrap

Twitter Bootstrap

Qu'est-ce que c'est ?

Bootstrap, c'est d'abord un framework CSS proposé par Twitter sous licence Apache. C'est à dire que vous pouvez l'utiliser comme vous le souhaitez, que ce soit commercial ou non.

Qu'est-ce que ça fait ?

Bootstrap dépasse les frameworks CSS classiques et propose carrément des éléments graphiques complets avec une garantie maximale de compatibilité entre les divers navigateurs.

Ainsi Bootsrap est un "reset CSS", un "CSS grid framework" et plus. Au programme, vous avez des grids, des layouts, des typos, des tableaux, des formulaires, des alertes, des popins ainsi qu'une gestion des médias et de la navigation.

Le CSS c'est bien, mais ça ne fait pas tout le design

C'est pour ça que Twitter a aussi mis à disposition Bootstrap JS, toujours sous licence Apache. Une série de plugins jQuery, compatible 1.6.4, permettant de gérer chacun des éléments graphiques.

Ce coup-ci au programme on a donc la gestion des fenêtres modales, des menus, des onglets, des tips et même un espion de scroll. Ce dernier vous permet d'agir en fonction du scroll sur divers éléments graphiques du site.

Facilité d'accès ?

J'avoue que dans les premières versions, tout n'était pas très clair mais avec la dernière version (la 1.3 actuellement), c'est beaucoup plus clair et facile à utiliser. Le grand avantage, c'est que pour des non-designers comme moi, cela permet de faire un site propre et élégant très très rapidement et facilement. Personnellement, j'ai adopté.

De plus les exemples de la documentation couvrent la plupart des cas d'utilisation.

Customisable

Moi qui ne suis pas très bon en CSS et franchement mauvais en design, j'arrive à faire ce que je veux avec sans trop galérer. Donc oui, c'est customisable à l'aise. Le code est propre, bien organisé, peu ou pas commenté mais tellement propre qu'on s'en passe bien.

Côté JS, le code est propre aussi, pas commenté outre mesure, très simpliste mais correct et efficace.

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans Dev. Web, avec comme mot(s)-clef(s) , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • http://www.novius-labs.com/ Gilles FELIX

    Ça m’intéresse fortement cette histoire Mathieu.
    Si je comprend bien c’est une sorte de jQuery UI avec une grosse sous-couche CSS permettant de skinner même ce qui n’est pas widget ?

    • http://www.mathieurobin.com/ Mathieu

      On peut le voir comme ça en effet. jQuery UI est quand même un gros framework JS qui utilise pas mal CSS. Là c’est surtout un framework CSS qui dispose de quelques méthodes JS. Mais dans l’idée, on a le même résultat : un outil qui simplifie le travail de design au développeur.

      Et oui, contrairement à jQuery UI, ici tout est skinné, même et surtout ce qui n’est pas widget. Ils se basent avant tout sur un bon framework de « reset CSS » donc à partir de là, t’as déjà une redéfinition graphique globale qui finalement est très pratique.

  • http://www.novius-labs.com/ Gilles FELIX

    Je sais que, dans la roadmap de jQuery UI, il est prévu des widgets pour les éléments de base. Mais ça sera appliqué que si on appelle explicitement l’initialisation javascript.
    Je vais regarder d’un peu plus prêt ce bootstrap twitter pour voir si je peux y piocher de l’inspiration, sachant que le logiciel qu’on est en train de développer sera basé entièrement sur jQuery UI mais qu’il nous manque ce traitement sur les éléments de base.

    Merci.

    • http://www.mathieurobin.com/ Mathieu

      Pour les éléments de base, si ma mémoire est bonne, rien de spécial prévu dans la roadmap pour la 1.9, pas mal de gestion de formulaires pour la 2.0. Mais je ne pense pas que jQuery UI poussera au delà du graphisme. Bootstrap propose également une mise à plat des typos, des tableaux, entres autres. Ce que ne fait pas jQuery UI. Et même si il prévu un composant Grid, je ne suis pas sûr que ça atteigne la simplicité de la redéfinition des tables par Bootstrap. Ceci dit vu que ce dernier fait simple, il fait peu de choses par rapport à Grid. C’est un choix à faire pour le coup : les fonctionnalités vs le design.

  • http://www.pure-tentation.fr/ Syndrael

    Justement Bootstrap + JQueryUI ça fonctionne comme on veut ?? Ou il y a des précautions à prendre ??
    S.

    • http://www.mathieurobin.com/ Mathieu

      A mon avis, pas de conflits à craindre sur l’utilisation croisée. Dans la feuille de styles de jQuery UI, tous les styles, et on peut même dire toutes les classes, commencent par « ui-« . Ce qui les isolent du reste. Bootstrap n’a pas cette politique protectrice mais c’est facile de l’y rajouter. Du côté du JS, jQuery UI comme Bootstrap utilisent les méthodes de construction de plugins, introduites avec jQuery 1.5, du coup peu de chances que les noms se croisent. Même si je serais plus prudent à ce sujet, concernant les tabs notamment.

  • http://www.geek-directeur-technique.com Amaury

    Merci pour l’info. Je vais regarder, ça a l’air intéressant.

    J’ai déjà essayé d’utiliser les styles définis par jQuery-UI, pour styler d’autres éléments sur un site, mais ça donne un résultat pas vraiment satisfaisant.

    • http://www.geek-directeur-technique.com Amaury

      Bon, je viens de refactorer une interface d’administration en utilisant Bootstrap. Le résultat est effectivement très bon. On obtient un rendu propre et professionnel relativement facilement.

      Par contre, la documentation n’est pas terrible. C’est le gros point noir, à mon sens. On est obligé d’étudier le code source des pages qui présentent Bootstrap pour savoir comment l’utiliser. Heureusement que Firebug existe, hein.

      Pour terminer, on peut vite se lasser du blanc/gris/noir. Un petit éditeur de thème, même très simple, serait bien.

      • http://www.mathieurobin.com/ Mathieu

        C’est vrai que ça manque, mais j’ose croire qu’il y aura bien un designer qui nous pondra ça, vu la qualité de l’outil, c’est fortement probable. Perso j’ai changé à la main les styles mais bon c’est pas ce qu’il y a de plus simple.

        Merci de ton retour en tout cas !

    • http://www.geek-directeur-technique.com Amaury

      Autre critique : Boostrap « fournit » 3 exemples d’utilisation basique (une grande zone + 3 petites zones en-dessous, la même chose avec un design fluide et une colonne à gauche, et un design tout simple). Mais même ces exemples contiennent des définitions de styles spécifiques dans leurs en-têtes HTML.
      C’est quand même dommage qu’un framework CSS oblige ses utilisateurs à redéclarer systématiquement des styles supplémentaires…
      Et dès qu’on veut « sortir des clous » un tant soit peu, on se retrouve à mettre les mains dans le CSS.

      Mais je dois reconnaître que ça m’a permis de faire un petit développement super-rapidement, sans me prendre la tête au niveau du design. Au final, c’est le plus important.

  • http://www.geek-directeur-technique.com Amaury

    Pour info, il existe un thème jQuery-UI qui respecte le design de Bootstrap : http://addyosmani.github.com/jquery-ui-bootstrap/

    À utiliser si vous souhaitez mélanger les deux.

    • http://www.mathieurobin.com/ Mathieu

      Ah mais niquel ça, effectivement, c’est une très bonne info. Merci Amaury ! ça sera certainement au menu lundi dans mon billet hebdo 😉

Articles liés