Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Click here to load reader
-
Upload
la-feweb -
Category
Technology
-
view
2.254 -
download
1
description
Transcript of Twitter Bootstrap par Antoine Guédès et Cédric Dussart
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