J’ai découvert récemment, grâce à des collègues, un superbe outil web. Il s’agit de Bootstrap.

C’est ce qu’on appel un framework, autrement dit, c’est un outil générique qui sert de base au développement d’un site web.

Mais alors Bootstrap, qu’est ce que c’est ?

En gros et pour faire simple, vous téléchargez un .zip avec une page html, des fichiers de styles CSS, d’autres en javascript et jQuery et la bibliothèque Bootstrap …

Pour télécharger le .zip avec le fichier HTML de base, je vous conseil d’aller sur initializr.com, sinon, pour plus de personnalisation du package, mais sans le fichier HTML directement sur le site Bootstrap.

Bootstrap est très puissant car son CSS est extrêmement bien pensé et complet. Il intègre des fonctionnalités jQuery intéressantes et permet l’ajout en toute simplicité d’autres éléments basés sur la fameuse bibliothèque.

Le framework utilise HTML5 et CSS3 avec brio, tout est d’un logique et d’une simplicité déconcertante quand il s’agit de mettre une page à sa sauce, et notamment grâce au guide très complet disponible sur le site officiel.

 

« Designed for everyone, everywhere. »

Cette phrase est, à mon avis, on ne peu plus justifiée. Tout est fait pour être facile d’accès à la fois pour le développeur, le designer et l’utilisateur qu’il soir sur PC, Netbook, Tablette ou Smartphone !

 

Voici les 9 forces misent en avant sur le site de Bootstrap :

  •  Construit par des geeks pour des geeks, autrement dit ; les gars qui sont derrière ont le niveau.
  • Pour tous les niveaux de connaissances et de compétences. Tout le monde peut se lancer dans la création d’un site grâce à Bootstrap, les débutants se contenteront de mettre du contenu et de toucher légèrement au style alors que les plus avertis s’en serviront comme d’un support générique pour développer des applications web, des sites corporate pour leurs client, etc.
  • Multi-plateforme : Compatible mobile, tous navigateurs ou du moins les principaux du marché (même IE7).
  • Système de GRID à 12 colonnes pour designer rapidement les pages. Cela fonctionne comme un système de largeur de bloc prédéfini. Par exemple avec une classe .span12 le bloc fera la largeur complète de la page. En revanche avec une classe .span6 le blog fera exactement la moitié de la largeur de la page.
  • Un design responsif ! Pour faire simple, votre contenu s’adapte à la largeur de votre navigateur, donc plus de soucis d’affichage sur netbook, tablette et smartphone, le contenu s’organise de façon à s’afficher parfaitement sur tous les supports.
  • Un guide complet a disposition pour connaitre toutes les fonctionnalités et les styles disponibles et savoir comment les utiliser.
  • Une bibliothèque évolutive et grandissante pour apporter toujours plus de fonctionnalités.
  • Des plugins jQuery facilement personnalisable ici
  • Compatible avec LESS (Framework CSS pour utiliser des fonctions à l’intérieur des feuilles de styles).

 

Bootstrap2

Vous l’aurez compris, c’est un outil qui mérite le détour, et pour ma part, après avoir bidouillé un petit site avec Bootstrap j’ai bien envie d’aller plus loin et de vous proposer des petits tutos sur ce dernier.

D’ailleurs, en faisant quelques recherches, je suis tombé sur des thèmes Bootstrap pour WordPress ! Ca me paraît très intéressant…à suivre donc.

 

EDIT : Je suis également tombé par hasard sur ce site bootswatch.com qui propose des thèmes pour Bootstrap, si vous avez des feedbacks, je suis preneur.

Brice Capobianco

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager…
Responsable commercial en agence web, je suis également développeur freelance WordPress à Rennes.

Coorganisateur des Meetups WordPress Rennes et fondateur de b-website.com.