Accélérer le développement d'applications avec Bootstrap

Bootstrap est l'un des frameworks frontaux HTML/CSS/JS les meilleurs et les plus utilisés. Presque tous les développeurs Web qui ont créé un site Web ou deux ont entendu parler de ce framework populaire. Il offre tellement de composants et de ressources prêts à l'emploi que Bootstrap peut considérablement accélérer le développement de votre application.

Tout bon développeur est soucieux d'économiser chaque seconde dans son processus de développement. Être efficace signifie un déploiement plus rapide - plus nous déployons tôt et souvent, plus nos utilisateurs finaux obtiennent rapidement un meilleur produit. Par conséquent, passer quelques heures ou quelques jours à planifier le processus et la stratégie peut nous faire gagner non seulement quelques minutes, mais de nombreuses heures.

Personnellement, je travaille avec ce framework depuis 4 ans sur 90% de mes projets. Dans cet article, je voudrais partager avec vous quelques conseils qui peuvent vous aider à accélérer le développement de votre application sans manquer certaines des fonctionnalités impressionnantes de Bootstrap.

Comprendre Bootstrap

Même s'il s'agit d'un cadre très facile à utiliser, ne vous laissez pas berner par sa simplicité à première vue. Avant de vous lancer dans un projet, passez du temps à jouer avec le framework et découvrez les éléments clés de son infrastructure et ses composants passionnants. Cela aidera à éviter les 10 erreurs de bootstrap les plus courantes.

Consacrez une heure à lire la documentation sur le site de Bootstrap ou apprenez-en plus grâce à un excellent article sur le blog de Toptal, Qu'est-ce que Bootstrap ? Un court tutoriel sur le quoi, pourquoi et comment. Et, excellent article Bootstrap 3 Trucs et astuces que vous ne connaissez peut-être pas sur scotch.io.

Si vous trouvez que la lecture de la documentation est une tâche ennuyeuse et que vous préférez plutôt lire du code, le meilleur endroit pour commencer est le site Web de Bootstrap. Ouvrez votre inspecteur Web, parcourez le code source du site et vérifiez chaque bloc de code et ses éléments. C'est probablement l'un des meilleurs et des plus rapides moyens d'appréhender les bases.

Creusez dans la structure de la page et apprenez comment les mises en page sont construites.

 <div class="container"> <div class="row"> ... </div> </div>

… redimensionnez la fenêtre de votre navigateur ou utilisez le Viewport Resizer de Chrome pour en savoir plus sur les utilitaires de requête multimédia.

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

… et comment et quand les utiliser, familiarisez-vous avec les classes de colonnes pour obtenir les meilleurs résultats de conception réactive.

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

Jetez un œil à W3Schools où vous trouverez une référence Bootstrap complète de toutes les classes CSS, composants et plugins JavaScript - le tout avec des exemples "Essayez-le vous-même":

• Explication du système de grille de Bootstrap : grilles dans Bootstrap
• Classes CSS de base : typographie, boutons, formulaires et éléments de formulaire, classes d'assistance, images, tableaux
• Composants individuels : glyphicons, listes déroulantes, navs.

Inspectez le code source et essayez de vous familiariser avec autant de noms de classe que possible. Découvrez leurs cas d'utilisation - le comment, le quand et le pourquoi. Cela vous aidera à avancer plus rapidement lors de l'écriture de HTML et du style des éléments de l'interface utilisateur. En savoir plus sur ces composants vous aidera à éviter de gonfler vos feuilles de style avec beaucoup de code en double inutile. Gardez-le simple et propre en utilisant et en réutilisant des composants existants, au lieu d'en créer trop de nouveaux qui font la même chose que ceux qui existent déjà dans le framework.

Ceci est particulièrement important lorsque vous travaillez dans une équipe de plusieurs développeurs. Assurez-vous de ne pas finir par écrire des tonnes de code dupliqué en créant trop de styles pour le même cas à chaque fois lors de la traduction de nouvelles conceptions dans le code. Garder le développement de l'interface utilisateur cohérent et bien documenté avec des guides de style d'interface utilisateur peut également ajouter quelques nœuds au travail d'équipe productif. De plus, vous constaterez que lors de l'ajout de nouvelles fonctionnalités ou de nouvelles pages à votre application, vous avancerez avec moins de frustration. J'ai été impliqué dans plus d'une douzaine de grands projets et, en comparaison, j'ai vu un certain nombre de cas où le framework était littéralement piraté et chaque fois que le nouveau code CSS était ajouté, il cassait l'interface utilisateur sur d'autres pages. Cela deviendrait assez épuisant de parcourir tout le site et de corriger ces types de bogues. De plus, pensez au coût et à tout l'argent dépensé en temps de développement supplémentaire et en aide à l'assurance qualité.

7 erreurs de style les plus courantes qui font perdre du temps

1. Lors du centrage du texte ou des divs

Si vous avez besoin de centrer une div et/ou du contenu, vous pouvez utiliser l'une de ces classes :

Utiliser le centre de texte

 <p class="text-center">I am centered text</p>

… ou bloc central

 <div class="center-block">I am centered text</div>

pas .center ou <center>

2. Lorsque vous modifiez la taille de la police

Si vous avez besoin de polices plus petites ou plus grandes, vous pouvez utiliser l'une de ces classes :

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

Si vous avez besoin d'en-têtes plus grands ou plus petits, n'oubliez pas .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small . Utilisez-le comme ceci :

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. Lorsque vous nettoyez des flotteurs ou que vous forcez des éléments à nettoyer eux-mêmes leurs enfants

Pas besoin de créer des classes comme .clear, vous pouvez toujours utiliser le .clearfix de Bootstrap à la place.

 <div class="clearfix">...</div>

4. Lors de la suppression des marges de la classe .row

Utilisez simplement .clearfix au lieu de définir vos propres styles (ou pire, en utilisant des styles en ligne) :

 <div class="clearfix">...</div>

5. Lors du déstylement ou de l'intégration de listes non ordonnées et d'autres éléments

Supprimez le style de liste par défaut et la marge de gauche sur les éléments de la liste. Cela ne s'applique qu'aux éléments de la liste des enfants immédiats. Si vous devez appliquer la même chose pour les listes imbriquées, vous devrez également ajouter le nom de la classe à celles-ci.

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

De même, pour les cases à cocher ou les boutons radio, nous avons .checkbox-inline et .radio-inline .

Et vous pouvez toujours ajouter .form-inline à vos formulaires (qui ne doivent pas nécessairement être un <form> ) pour les contrôles alignés à gauche et en ligne.

6. Lors du dimensionnement des boutons

Envie de boutons plus grands ou plus petits ? Ajoutez .btn-lg , .btn-sm ou .btn-xs pour des tailles supplémentaires.

7. Lorsque vous flottez et alignez des éléments à droite ou à gauche

Faire flotter un élément vers la gauche ou vers la droite avec une classe. !important est inclus pour éviter les problèmes de spécificité. Les classes peuvent également être utilisées comme mixins avec n'importe quel préprocesseur CSS.

Utilisez .pull-right , .pull-left , .text-right , .text-left au lieu de .right , .left , .left- float , .right-float .

 <div class="pull-left">...</div> <div class="pull-right">...</div>

Réalignez facilement le texte sur les composants grâce aux classes d'alignement de texte.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

Ne personnalisez pas directement les fichiers de base du framework

Lorsque je travaillais sur de gros projets, j'ai trouvé que la meilleure façon d'utiliser efficacement le framework était de s'en inspirer et de ne pas personnaliser directement ses fichiers principaux. Ce concept est similaire à d'autres plates-formes et bibliothèques que vous pourriez utiliser pour le projet.

Cependant, si vous créez un petit site et que vous avez une maquette de conception qui ne nécessite pas beaucoup de modifications ou de mises à jour, vous constaterez peut-être que la personnalisation du cadre en fonction de vos besoins est une meilleure option. Par exemple, vous pouvez supprimer tous les éléments dont vous n'avez pas besoin directement dans les fichiers de structure, ou vous pouvez accéder à la section de personnalisation du site de Bootstrap où vous pouvez facilement configurer tous les composants, variables et plugins jQuery pour obtenir votre très propre version. Dans ce cas, vous pouvez accélérer le développement de votre site et réduire le temps de style ou de gestion des remplacements.

Cependant, si vous démarrez ou travaillez sur un gros site avec plusieurs développeurs ou plus, il est préférable de garder les choses séparées et bien organisées. Déplacez les fichiers de structure en dehors du dossier CSS personnalisé principal et conservez-les dans un dossier non modifiable sans version et supprimez les CSS inutilisés en utilisant les plugins Grunt ou Gulp grunt-uncss ou gulp-uncss. Une autre alternative pour le garder séparé est de le servir via CDN. Avoir le code du framework séparé et intact vous offre une option meilleure et plus rapide lors de la mise à niveau vers la dernière version. Cela permet également de minimiser un certain nombre de problèmes d'évolutivité et de style, ou d'être ralenti lors d'ajouts avec des changements rapides et continus de l'interface utilisateur.

Utilisez des outils d'échafaudage tels que Yeoman ou Slush, et des gestionnaires de packages tels que Bower, Python's pip, Node's NPM ou Ruby Gems, car ils font bien plus que simplement ajouter des fichiers au chemin de votre application. J'apprécie vraiment la puissance de Bower - il peut certainement faire un peu plus que simplement télécharger un fichier ou deux. L'utilisation d'un gestionnaire de packages est une bonne idée car la complexité de votre projet augmentera très probablement et la quantité de plug-ins tiers et la façon dont vous les maintenez deviendront insensés et prendront du temps. Bower vous aidera à garder une trace de chaque plugin et de ses dépendances, y compris tout ce qui concerne Bootstrap.

Utiliser les ressources Bootstrap disponibles pour le développement d'applications

La popularité de Bootstrap s'accompagne d'une multitude de ressources utiles : articles, didacticiels, plug-ins et extensions tiers, modèles, générateurs de thèmes, etc. Ainsi, que vous soyez à la recherche d'inspiration ou d'extraits de code, vous aurez tout ce dont vous avez besoin pour accélérer votre progression.

On pourrait penser qu'avec autant de ressources disponibles, tout le monde en profiterait et l'utiliserait dans ses projets, mais croyez-le ou non, ce n'est pas le cas. Certains développeurs perdent leur temps et ralentissent la progression du projet en sautant certains extraits de code ou ressources. Bien que vous ne deviez pas simplement copier et coller aveuglément, vous devez comprendre les bonnes parties et les adapter à votre style de codage et à vos besoins techniques. La capacité de trouver et de trier de bonnes ressources et de pouvoir les utiliser efficacement est également une compétence et nécessite des années d'expérience et de connaissances.

Vous trouverez ci-dessous une liste de ressources utiles pour commencer :

Modèles, thèmes et plugins

Thèmes officiels des créateurs de Bootstrap : themes.getbootstrap.com.

Places de marché avec thèmes et modèles Bootstrap premium : wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Thèmes et modèles Bootstrap gratuits : startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

"The Big Badass List" - une liste de 319 ressources Bootstrap utiles : bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI écrit en AngularJS pur par l'équipe AngularUI.

ReactJS

React-Bootstrap est une bibliothèque de composants frontaux réutilisables. Vous aurez l'apparence de Twitter Bootstrap, mais avec un code beaucoup plus propre, via le framework React.js de Facebook.

Django

Intégration de Bootstrap 3 avec Django : https://github.com/dyve/django-bootstrap3

Jekyll

Jekyll-Bootstrap est un échafaudage de blog complet pour les blogs basés sur Jekyll.

Wordpress

Thème de démarrage WordPress Sage avec un workflow de développement frontal moderne. Basé sur HTML5 Boilerplate, gulp, Bower et Bootstrap.

Conception matérielle

Material Design for Bootstrap est un thème pour Bootstrap 3 qui vous permet d'utiliser le nouveau Google Material Design dans votre framework frontal préféré.

Conclusion

Bootstrap est l'un des meilleurs frameworks disponibles qui vous offre de nombreux outils et ressources de qualité afin d'accélérer et d'accélérer votre processus de développement d'applications.

Cela vous fait gagner de nombreuses heures/jours de travail lors de la conception et du codage d'une interface utilisateur impressionnante. Chaque composant et plugin est soigneusement documenté avec des exemples en direct et des blocs de code pour une utilisation et une personnalisation plus faciles. Il est fortement recommandé par de nombreux développeurs et très populaire pour le prototypage et la production. C'est un très bon outil pour créer des sites Web réactifs adaptés aux mobiles. Bootstrap vous offre un excellent point de départ pour de nombreux types de projets, la possibilité de le confier à un designer et de dire "faites en sorte que ce soit chic!" sans qu'ils aient besoin de se frayer un chemin à travers le code. Plus important encore, cela vous permet de développer d'abord la structure, puis de traiter les polices, les couleurs et les styles sophistiqués plus tard. Prenez le temps d'étudier ce qu'il peut faire et soyez intelligent sur la meilleure façon de l'utiliser afin que vous puissiez vous rendre où vous voulez plus rapidement.