SlideShare une entreprise Scribd logo
1  sur  12
Télécharger pour lire hors ligne
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
1. Introduction

•   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
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

Contenu connexe

Tendances

Comment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationComment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationBenoit Tostain
 
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!Romain Linsolas
 
Comment creer un site internet
Comment creer un site internetComment creer un site internet
Comment creer un site internetestreetz
 
Un site web en 5 minutes avec le CMS Wordpress- SFD Douala 2014
Un site web en 5 minutes avec le CMS Wordpress-  SFD Douala 2014Un site web en 5 minutes avec le CMS Wordpress-  SFD Douala 2014
Un site web en 5 minutes avec le CMS Wordpress- SFD Douala 2014Mak YIMEN
 
Node.js et MongoDB: Mongoose
Node.js et MongoDB: MongooseNode.js et MongoDB: Mongoose
Node.js et MongoDB: Mongoosejeromegn
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.jsTelecomValley
 
Nuxeo Tech Talk AngularJS
Nuxeo Tech Talk AngularJSNuxeo Tech Talk AngularJS
Nuxeo Tech Talk AngularJSNuxeo
 
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...Olivier Nourry
 
Les avantages qu'offre WordPress pour créer son blog
Les avantages qu'offre WordPress pour créer son blogLes avantages qu'offre WordPress pour créer son blog
Les avantages qu'offre WordPress pour créer son bloginformagenie
 
Industrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.jsIndustrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.jsGuillaume Meyer
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Alexandre Marie
 
Adopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front SideAdopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front SideThomas Champion
 

Tendances (20)

Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Comment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formationComment transformer WordPress en portail de formation
Comment transformer WordPress en portail de formation
 
Cms Podcamp 2009
Cms Podcamp 2009Cms Podcamp 2009
Cms Podcamp 2009
 
Livre Blanc Web temps réel - Node JS
Livre Blanc Web temps réel - Node JSLivre Blanc Web temps réel - Node JS
Livre Blanc Web temps réel - Node JS
 
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
Softshake 2013 - Du JavaScript propre ? Challenge Accepted!
 
Sulu LE CMS Ultime
Sulu LE CMS UltimeSulu LE CMS Ultime
Sulu LE CMS Ultime
 
Node.js
Node.jsNode.js
Node.js
 
Comment creer un site internet
Comment creer un site internetComment creer un site internet
Comment creer un site internet
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
Un site web en 5 minutes avec le CMS Wordpress- SFD Douala 2014
Un site web en 5 minutes avec le CMS Wordpress-  SFD Douala 2014Un site web en 5 minutes avec le CMS Wordpress-  SFD Douala 2014
Un site web en 5 minutes avec le CMS Wordpress- SFD Douala 2014
 
Node.js et MongoDB: Mongoose
Node.js et MongoDB: MongooseNode.js et MongoDB: Mongoose
Node.js et MongoDB: Mongoose
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
 
Nuxeo Tech Talk AngularJS
Nuxeo Tech Talk AngularJSNuxeo Tech Talk AngularJS
Nuxeo Tech Talk AngularJS
 
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
 
Vue Introduction
Vue IntroductionVue Introduction
Vue Introduction
 
Les avantages qu'offre WordPress pour créer son blog
Les avantages qu'offre WordPress pour créer son blogLes avantages qu'offre WordPress pour créer son blog
Les avantages qu'offre WordPress pour créer son blog
 
Industrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.jsIndustrialisation des développements d'Apps SharePoint avec Node.js
Industrialisation des développements d'Apps SharePoint avec Node.js
 
Prismic
PrismicPrismic
Prismic
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
Adopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front SideAdopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front Side
 

En vedette

Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
 
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)cornnery
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 
Accessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site web
Accessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site webAccessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site web
Accessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site webLaurie-Anne Bourdain
 
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...Microsoft
 
avoir le trac: chevaucher le tigre
avoir le trac: chevaucher le tigreavoir le trac: chevaucher le tigre
avoir le trac: chevaucher le tigreElena Moltó
 
Chapter 2 The Internet And World Wide Web
Chapter 2 The Internet And World Wide WebChapter 2 The Internet And World Wide Web
Chapter 2 The Internet And World Wide Webnorzaini
 
Le trac en public: Causes et remèdes
Le trac en public: Causes et remèdesLe trac en public: Causes et remèdes
Le trac en public: Causes et remèdesFreeSuccess
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introductionJean Michel
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrapZunair Sagitarioux
 
Introduction to github slideshare
Introduction to github slideshareIntroduction to github slideshare
Introduction to github slideshareRakesh Sukumar
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Cedric Spillebeen
 
La Stratégie d'Amazon selon Jeff Bezos
La Stratégie d'Amazon selon Jeff BezosLa Stratégie d'Amazon selon Jeff Bezos
La Stratégie d'Amazon selon Jeff BezosRalph Ward
 
Git 101: Git and GitHub for Beginners
Git 101: Git and GitHub for Beginners Git 101: Git and GitHub for Beginners
Git 101: Git and GitHub for Beginners HubSpot
 
Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
Utiliser Joomla 3 et Bootstrap 3 depuis une application externeUtiliser Joomla 3 et Bootstrap 3 depuis une application externe
Utiliser Joomla 3 et Bootstrap 3 depuis une application externeWeb21 France
 

En vedette (20)

Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
Plateforme De DéVeloppement En Php5 (Zend + Doctrine)
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Accessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site web
Accessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site webAccessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site web
Accessibilité et Bonnes Pratiques : Comment évaluer en 20 minutes un site web
 
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
Retour d’expérience GlobeCast : Réduisez votre TCO avec les abonnements...
 
Intrenet lessons
Intrenet lessonsIntrenet lessons
Intrenet lessons
 
avoir le trac: chevaucher le tigre
avoir le trac: chevaucher le tigreavoir le trac: chevaucher le tigre
avoir le trac: chevaucher le tigre
 
Chapter 2 The Internet And World Wide Web
Chapter 2 The Internet And World Wide WebChapter 2 The Internet And World Wide Web
Chapter 2 The Internet And World Wide Web
 
Le trac en public: Causes et remèdes
Le trac en public: Causes et remèdesLe trac en public: Causes et remèdes
Le trac en public: Causes et remèdes
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introduction
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Css
CssCss
Css
 
Introduction to github slideshare
Introduction to github slideshareIntroduction to github slideshare
Introduction to github slideshare
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
 
La Stratégie d'Amazon selon Jeff Bezos
La Stratégie d'Amazon selon Jeff BezosLa Stratégie d'Amazon selon Jeff Bezos
La Stratégie d'Amazon selon Jeff Bezos
 
Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Git 101: Git and GitHub for Beginners
Git 101: Git and GitHub for Beginners Git 101: Git and GitHub for Beginners
Git 101: Git and GitHub for Beginners
 
CSS et CSS3
CSS et CSS3CSS et CSS3
CSS et CSS3
 
Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
Utiliser Joomla 3 et Bootstrap 3 depuis une application externeUtiliser Joomla 3 et Bootstrap 3 depuis une application externe
Utiliser Joomla 3 et Bootstrap 3 depuis une application externe
 

Similaire à Twitter Bootstrap par Antoine Guédès et Cédric Dussart

Alphorm.com support de la formation Drupal 8 webmaster configurateur
Alphorm.com support de la formation Drupal 8 webmaster configurateurAlphorm.com support de la formation Drupal 8 webmaster configurateur
Alphorm.com support de la formation Drupal 8 webmaster configurateurAlphorm
 
Solutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPressSolutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPressStéphane Plante
 
Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]Jean-Noël Aubry
 
Accéder au développement Dot.Net et Asp.Net
Accéder au développement Dot.Net et Asp.NetAccéder au développement Dot.Net et Asp.Net
Accéder au développement Dot.Net et Asp.NetFrédéric Vandenbriele
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousjwajsberg
 
Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)TribuAndCo
 
présentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdfprésentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdfghiz-
 
Les particularités de Drupal en gestion de projet: une histoire d’amour et de...
Les particularités de Drupal en gestion de projet: une histoire d’amour et de...Les particularités de Drupal en gestion de projet: une histoire d’amour et de...
Les particularités de Drupal en gestion de projet: une histoire d’amour et de...Symetris
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...ENSIBS
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Cellenza
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfboulonvert
 
Presentation Drupal 8 au DrupalCamp Paris 2013
Presentation Drupal 8 au DrupalCamp Paris 2013Presentation Drupal 8 au DrupalCamp Paris 2013
Presentation Drupal 8 au DrupalCamp Paris 2013Chipway
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Ippon
 
Alphorm.com Formation Drupal 7 pour les utilisateurs
Alphorm.com Formation Drupal 7 pour les utilisateurs Alphorm.com Formation Drupal 7 pour les utilisateurs
Alphorm.com Formation Drupal 7 pour les utilisateurs Alphorm
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Microsoft
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilitéNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilitéJulien Dubois
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileIppon
 

Similaire à Twitter Bootstrap par Antoine Guédès et Cédric Dussart (20)

Alphorm.com support de la formation Drupal 8 webmaster configurateur
Alphorm.com support de la formation Drupal 8 webmaster configurateurAlphorm.com support de la formation Drupal 8 webmaster configurateur
Alphorm.com support de la formation Drupal 8 webmaster configurateur
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Solutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPressSolutions Web « prêtes à porter » avec WordPress
Solutions Web « prêtes à porter » avec WordPress
 
Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]Responsive design - Twitter Bootstrap [FR]
Responsive design - Twitter Bootstrap [FR]
 
Accéder au développement Dot.Net et Asp.Net
Accéder au développement Dot.Net et Asp.NetAccéder au développement Dot.Net et Asp.Net
Accéder au développement Dot.Net et Asp.Net
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)Mythes et réalités des projets Web (Webschool tours)
Mythes et réalités des projets Web (Webschool tours)
 
présentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdfprésentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdf
 
Les particularités de Drupal en gestion de projet: une histoire d’amour et de...
Les particularités de Drupal en gestion de projet: une histoire d’amour et de...Les particularités de Drupal en gestion de projet: une histoire d’amour et de...
Les particularités de Drupal en gestion de projet: une histoire d’amour et de...
 
Usine à site
Usine à siteUsine à site
Usine à site
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
 
Objectif fluid<fab />
Objectif fluid<fab />Objectif fluid<fab />
Objectif fluid<fab />
 
Presentation Drupal 8 au DrupalCamp Paris 2013
Presentation Drupal 8 au DrupalCamp Paris 2013Presentation Drupal 8 au DrupalCamp Paris 2013
Presentation Drupal 8 au DrupalCamp Paris 2013
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014
 
Alphorm.com Formation Drupal 7 pour les utilisateurs
Alphorm.com Formation Drupal 7 pour les utilisateurs Alphorm.com Formation Drupal 7 pour les utilisateurs
Alphorm.com Formation Drupal 7 pour les utilisateurs
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilitéNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
 

Plus de La FeWeb

jQuery deffered objects
jQuery deffered objectsjQuery deffered objects
jQuery deffered objectsLa FeWeb
 
Introduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolboxIntroduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolboxLa FeWeb
 
Introduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design toolIntroduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design toolLa FeWeb
 
NoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learnedNoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learnedLa FeWeb
 
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETICNoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETICLa FeWeb
 
That's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETICThat's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETICLa FeWeb
 
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikLa FeWeb
 
Introduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmilyIntroduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmilyLa FeWeb
 
Le community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise MatonLe community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise MatonLa FeWeb
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Less CSS by Gauthier Eloy
Less CSS by Gauthier EloyLess CSS by Gauthier Eloy
Less CSS by Gauthier EloyLa FeWeb
 

Plus de La FeWeb (11)

jQuery deffered objects
jQuery deffered objectsjQuery deffered objects
jQuery deffered objects
 
Introduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolboxIntroduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolbox
 
Introduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design toolIntroduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design tool
 
NoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learnedNoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learned
 
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETICNoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
 
That's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETICThat's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETIC
 
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
 
Introduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmilyIntroduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmily
 
Le community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise MatonLe community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise Maton
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Less CSS by Gauthier Eloy
Less CSS by Gauthier EloyLess CSS by Gauthier Eloy
Less CSS by Gauthier Eloy
 

Twitter Bootstrap par Antoine Guédès et Cédric Dussart

  • 1. Bootstrap http://twitter.github.com/bootstrap/ Cédric Dussart & Antoine Guédès 29 janvier 2013
  • 2. 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
  • 3. 1. Introduction • 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
  • 4. 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
  • 5. 3. À qui s'adresse Bootstrap ? • Aux graphistes • Aux intégrateurs • Aux développeurs
  • 6. 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
  • 7. 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)
  • 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
  • 9. 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
  • 10. 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
  • 11. 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)
  • 12. 9. Questions & réponses