Bootstrap http://twitter.github.com/bootstrap/

Cédric Dussart & Antoine Guédès

29 janvier 2013

Sommaire

1. Introduction 2. Qu'est-ce que Bootstrap ? 3. À qui s'adresse Bootstrap ? 4. Pourquoi l'avons-nous utilisé ? 5. Avantages & Inconvénients 6. Quelques exemples 7. Comment débuter ? 8. Conclusion 9. Questions & réponses

• Créateur : Mark Otto (@mdo) et Jacob Thorton (@fat), chez Twitter

• But : uniformisation et maintenance des outils internes • Date de création : Août 2011 - Première version open-

source • Origine du nom

1. Introduction

2. Qu'est-ce que Bootstrap ?

• Un Framework HTML, CSS & JavaScript • Fonctionnant sur n'importe quelle technologie

serveur ou environnement serveur. • Avec une dizaine de composants, et plugin

JavaScript • Son concept : Création et maintenance rapide d'un site

internet avec rendu correct, et interface complète

3. À qui s'adresse Bootstrap ?

• Aux graphistes • Aux intégrateurs • Aux développeurs

4. Pourquoi l'avons-nous utilisé ?

• Besoin de gain de temps • Méthodologie commune nécessaire • Meilleure compréhension entre designers, intégrateurs,

et développeurs • Facilité de maintenance d'un projet après la mise en

ligne

5. Avantages & Inconvénients

• Avantages : o Facilité & Accessibilité o Structure & Méthodologie o Vitesse de développement accrue o Framework porté vers le futur o Grille fixe ou fluide o Personnalisable & Modulable o Compatibilité sur les différents browsers

(amélioration progressive sur IE7, et 8)

5. Avantages & Inconvénients

• Inconvénients : o Rendu des composants parfois limites sous IE o L'héritage de classes peut devenir lourd o Contrainte au niveau du design suite à l'utilisation de

la grille o Peut prendre un certain temps pour qu'un site ait un

rendu unique

6. Quelques exemples

• Utilisation des grilles, et du CSS : Pernod Ricard • Utilisation des composants JavaScript :Bossa

LovaLima • Utilisation d'un layout fluide :SnackTracks Mobile • Exemple d'un CMS personnalisée pour un e-

commerce :Fluid Admin

7. Comment débuter ?

• Implémentation • Personnalisation & utilisation de Less • Starter files • Comment l'utiliser :

o Utilisation à la carte, ou partielle o Personnalisation du template

8. Conclusion

• Verdict positif : tant de la part des dev que des intégrateurs

• Intégralement intégré au workflow • Suivi des MAJs • Bootstrap 3 : drop de IE7 et FF3, icônes implémentées

via @font-face et plus par png, un seul fichier css (fluide et static sont ensemble)

9. Questions & réponses