Les différentes composantes de Bootstrap

Bootstrap se compose de plusieurs éléments aidant la fondation d’un bon design web.

Scafolding

• Utilisation de HTML5
• Un « reset » CSS très simple basé sur Normalize.css
• Un système de grille css (grid system)
• Un système simple de « layout »
• Un système pour faire un site « responsive » vraiment très bien fait

Framework CSS

• Un système de typographique
• Gestion des styles et « helper » pour les tableau HTML
• Gestion des éléments de formulaire
• Des boutons personnalisables (très chics)
• « helper » pour les images
• Un kit d’icônes d’actions fournis par Glyphicons

Composants de design 

• Groupes de boutons
• « Labels » et badges
• Fils d’ariane (breadcrumbs)
• « Alerts box » : Info, succès, échec, attention
• Barres de progression
• « Thumbnails »
• …

Framework Javascript

• « Modal box » très bien faites et facile à modifier
• Gestion des transitions
• Système de « tabs »
• Système de « tooltips »
• Alert javascript amélioré
• Autocompletion pour formulaire
• Système de « Popover » très bien fait
• …

Boostrap est hautement « skinable »

Le plus interessant avec Bootstrap, c’est qu’on peut créer des thèmes (« skins ») assez facilement. La cerise sur le gâteau c’est que, à l’instart de WordPress, il existe des thèmes gratuit ou payant développés par une communauté grandissante. VOus en trouverez une bonne quantité sur le site http://wrapbootstrap.com

Conclusion sur Bootstrap

Bootstrap est définitivement un outil à connaître pour tout bon développeur web. Il permet de créer des interfaces très rapidement et très proprement. Je ferais quelques tutoriels dans les prochains articles. 

Ressources pour le framework Bootstrap

• Bootstrap home
• Wrap Bootstrap

Comment lancer le débogueur 3D de Firefox

Rien de plus facile! Ouvrez votre firefox et aller sur votre site préféré : Undisconnected.com par exemple 😉 Ensuite « cliquez droit » sur un élément de la page que vous aimeriez inspecter et choisissez l’option contextuelle « Examiner l’élément ». Ceci a pour effet de lancer la console web et de vous afficher l’élément sélectionné dans l’arbre du DOM (Document Object Model) et de vous afficher le CSS relié à cet élément. Jusque là rien de bien nouveau!

Diriger vous ensuite en bas à droite de la fenêtre de firefox, vous devriez voir un bouton 3D apparaître. Cliquer sur ce bouton … et ô magie, une vue 3D de la page apparaît. Il est possible de sélectionner des éléments de la page et d’en voir le CSS ainsi que leur place dans le DOM. 

Vidéo de la vue 3d dans Firefox : TILT en action 

Pour mieux voir à quoi cela ressemble rien de tel qu’une petite vidéo. 

[youtube]http://www.youtube.com/watch?v=lu_h6ko-ugk[/youtube]

Conclusion 

Soulignons l’effort de la fondation Mozilla pour amener aux développeurs une nouvelle génération d’outils puissants pour le débogage. J’espère que cet article vous aidera à gagner du temps et aussi à perdre moins de cheveux 😉 Si vous avez des questions ou que vous souhaitez partager votre expérience de l’outil laissez un commentaire.

Explication du bug CSS

Dans le header de ce site j’ai un css qui permet à une div avec un width de 100% d’avoir un background  positionné à 50% sur l’axe des x comme suit : 

#branding {
width:100%;
height:392px;
background-position: 50% 50%;
background-repeat: no-repeat;
}

Dans tous les navigateurs (Testé dans Chrome, Firefox, Safari, IE 8,9) ce CSS fonctionne parfaitement et permet d’avoir une image en background qui s’affichera toujours à 100% de la taille du navigateur. Il faut bien évidemment une image assez grande (1600px minimum) pour que l’effet soit réussit. MAIS sous Safari mobile, seule une partie du background s’affiche. Cela provient du viewport (partie affiché à l’écran) qui est différent sur IOS. Voici un lien à lire pour comprendre le viewport.

Résolution du bug en utilisant viewport

J’ai donc réussit à résoudre ce bug en ajoutant une meta qui permet de fixer la largeur du viewport désiré dans webkit mobile. En fait pour simplifier j’ai utiliser la largeur maximale du content de mon site. Cela donne dans le head de votre HTML : 

<meta name = "viewport" content = "width = 590">

Ce paramètre va permettre à Webkit de savoir la partie que vous souhaitez afficher à l’écran et va donc exécuter un « zoom » sur la largeur (width) que vous avez définie.

Conclusion 

Je pense que je vais intégrer cela dans tous mes développements car cela permet de toute façon de fixer la façon dont vous souhaitez que Webkit affiche vos pages sur un navigateur basé sur webkit (la plupart maintenant) en plus de résoudre certains bug CSS.