Bootstrap a tout simplement explosé dans la communauté du développement Web. Il y aura toujours des sceptiques et des ennemis, mais dans l’ensemble, le projet a été un succès retentissant et peut toujours être vu en haut des charts Forked and Watched de GitHub.
En raison de la renommée de Bootstrap, la communauté du développement a mis en avant de nombreuses ressources connexes. Aujourd'hui, nous avons rassemblé nos favoris dans une liste de tout ce dont vous avez besoin pour commencer à utiliser Bootstrap. Des tutoriels d'introduction aux kits d'encadrements en passant par les générateurs personnalisés, il y en a pour tous les amoureux de Bootstrap.
Démarrer Bootstrap
Start Bootstrap est une plate-forme tout-en-un pour tous les types de thèmes, guides et modèles HTML pré-conçus, gratuits et premium, créés avec Bootstrap.
Le site comprend des modèles prédéfinis gratuits pour la création de pages de destination, de sites Web de CV personnels, de portefeuilles et bien plus encore. Il existe également de nombreuses dispositions de modèles Bootstrap rapides que vous pouvez télécharger pour démarrer rapidement sur vos projets de conception Web.
En outre, Start Bootstrap possède une liste exhaustive de ressources Bootstrap qui comprend des liens vers tous les types de ressources liées à Bootstrap, telles que des plugins, des générateurs de visuels, des intégrations d'infrastructure, etc.
CodyHouse
CodyHouse est une bibliothèque complète de composants Web gratuits composés de plugins HTML, CSS et JavaScript. La bibliothèque comprend des méga-menus, des modèles de portefeuille, des intégrations de paiement, des effets d’animation, des modèles de vidéo et d’autres plug-ins.
Vous pouvez télécharger ces plugins et modèles pour les intégrer facilement à vos propres conceptions de sites Web Bootstrap afin d’intégrer diverses fonctions et caractéristiques, gratuitement.
Bootsnipp
C’est encore une autre plate-forme qui propose une vaste collection de ressources et de plugins HTML et CSS. La spécialité de Bootsnipp est que cette plate-forme propose également des extraits de code et des plug-ins créés par d'autres développeurs et concepteurs Web.
Bootsnipp inclut tous les types d'extraits de code et de modèles destinés à faciliter votre processus de développement Web, notamment les modèles de formulaire, les conceptions de boutons, les barres de progression, les modèles de galerie, etc.
Vous pouvez rejoindre la plate-forme en tant qu'utilisateur enregistré et créer votre propre collection de ressources Bootstrap. Bootsnipp inclut également des ressources pour d'autres frameworks HTML tels que Foundation et Semantic UI.
Codrops
Codrops est un blog qui partage des didacticiels et des plans sur la création de modèles et d’éléments uniques avec HTML et CSS. L’avantage de ce blog est qu’en plus de vous permettre de télécharger gratuitement les modèles et les plug-ins, il décrit également en détail la manière dont chaque modèle a été créé et comment vous pouvez le personnaliser à votre guise.
Codrops comprend des ressources, des plans, des modèles et des plugins que vous pouvez intégrer à Bootstrap pour créer des sections de portefeuille tendance, des diaporamas, des arrière-plans vidéo, des animations et bien plus encore.
Eclats
Shards est un kit d’interface utilisateur moderne et minimaliste construit avec Bootstrap 4 pour la conception de sites Web étonnants réactifs et mobiles.
Lorsque vous utilisez ce kit d'interface utilisateur, vous n'avez pas à écrire de code pour attribuer un style aux éléments Bootstrap tels que les boutons et les menus. Le kit d'interface utilisateur prendra tout cela en charge pour vous.
Montre de bottes
Ce site propose une collection de thèmes personnalisés pour la structure Bootstrap dans différents modèles de couleurs et conceptions.
La liste comprend un thème Bootstrap sur le thème de l’espace, un thème de conception de matière, un thème de conception plate, des thèmes de couleur sombre, etc. Vous pouvez télécharger et utiliser ces thèmes pour personnaliser l'apparence de vos conceptions Bootstrap sans avoir à modifier le code.
Fontello
Fontello est un générateur astucieux de polices d’icônes qui vous permet de parcourir une vaste collection d’icônes de plusieurs packs d’icônes de polices populaires, notamment Font Awesome, Typicons, Brandico, et plus encore.
Les polices d'icônes sont largement utilisées dans presque tous les sites Web. Vous pouvez utiliser la fonction de recherche de Fontello pour trouver rapidement un pack de polices avec une icône associée à votre recherche, ajuster la taille de l'icône et télécharger la police de l'icône à utiliser avec vos dessins Bootstrap.
Fuel UX
Fuel UX est principalement utilisé par les concepteurs Web avancés pour suralimenter le framework Bootstrap avec des améliorations JavaScript plus complexes et plus légères. Il améliore Bootstrap avec des fonctionnalités étendues et vous donne plus de contrôle sur la personnalisation de la structure. Fuel UX fait également partie de Salesforce Marketing Cloud.
Typehead.js
Vous souhaitez ajouter une fonctionnalité d'auto-complétion de type Google à votre moteur de recherche? Ensuite, vous pouvez télécharger cette bibliothèque JavaScript légère et l'intégrer à votre site Web Bootstrap pour facilement mettre à niveau votre champ de recherche avec des phrases de recherche à remplissage automatique, des suggestions automatiques et plus encore.
Blueimp Gallery
Blueimp est une collection de modèles de galerie réactifs et tactiles que vous pouvez utiliser sur votre site Web, ajouter des galeries d'images et de vidéos ainsi que des portefeuilles.
Le plugin est conçu à partir de la bibliothèque JavaScript Swipe, surnommée le curseur tactile le plus précis. Blueimp étend les fonctionnalités de balayage en vous permettant de choisir parmi trois modèles de galerie différents, notamment le carrousel d'images, le carrousel vidéo et une galerie d'images en lightbox.
Expo Bootstrap
Ceci est un site qui présente une collection de sites Web magnifiques construits avec Bootstrap. La collection est organisée par Mark Otto, fondateur de Bootstrap et directeur du design chez Github. C'est un bon endroit pour trouver l'inspiration pour votre prochain projet et voir quelles sortes de choses étonnantes vous pouvez construire avec Bootstrap.
StyleBootstrap
Cet outil vous permet d’utiliser une interface simple pour personnaliser divers aspects de Bootstrap. La différence ici est que celui-ci se concentre principalement sur les aspects visuels, design. Vous pouvez facilement entrer et changer les couleurs, les polices, les bordures et bien plus encore.
L'application elle-même est également plus visuelle que le générateur de Twitter et vous permet de voir à quoi ressembleront vos styles avant d'appuyer sur le bouton de téléchargement.
Beaux boutons pour Bootstrap
Il s'agit d'un petit outil simple qui ne fait qu'une chose: vous aider à concevoir de superbes boutons à utiliser avec Twitter Bootstrap. Il se compose uniquement de quatre curseurs et d'une boîte permettant de copier le code CSS résultant, ni moins, ni plus. Cela ne révolutionnera pas votre façon d’utiliser Bootstrap mais c’est amusant de jouer avec.
WrapBootstrap
WrapBootstrap est une place de marché pour les thèmes et modèles Bootstrap de qualité supérieure. Impressionnez vos clients et vos visiteurs avec une base solide et solide.
Pensez à WrapBootstrap en tant que ThemeForest pour Bootstrap. Vous pouvez acheter ou vendre des thèmes Bootstrap de style personnalisé. Si vous pensez que c'est idiot de dépenser de l'argent sur un thème premium pour une ressource gratuite comme Bootstrap, il suffit de regarder le succès du marché des thèmes WordPress. Par défaut, les sites Bootstrap commencent tous à se ressembler et des thèmes bien conçus peuvent vraiment apporter une belle variation tout en vous permettant de conserver les avantages exceptionnels offerts par Bootstrap.
Construit avec Bootstrap
Built with Bootstrap est un blog Tumblr non officiel qui présente divers sites Web qui, comme leur nom l’indique, ont été créés à l’aide de Bootstrap. C’est une ressource fantastique pour les concepteurs travaillant avec Bootstrap, car elle vous permet de voir ce que les vrais développeurs font avec le cadre, ce qui vous incitera à aller plus loin.
Si vous pensez que Bootstrap n’est pas capable d’aboutir à une conception simple, cette galerie vous prouvera le contraire. Des sites comme Provo Restaurant m'ont vraiment surpris de ne pas ressembler à un clone des exemples de pages de Bootstrap.
Bibliothèque de widgets Bootstrap Twitter gratuite
Axure est une application puissante et de niveau professionnel qui vous permet de construire des structures filaires complexes et des maquettes interactives. À 589 $ par licence, c'est une solution pour les wireframers sérieux.
Si vous souhaitez utiliser Twitter Bootstrap et Axure, veillez à télécharger cette superbe bibliothèque de widgets gratuite, qui comprend des représentations parfaitement personnalisables des éléments Bootstrap qui fonctionnent de manière transparente dans Axure.
Bootstrap PSD
Je sais ce que beaucoup d'entre vous pensent? Des feux d'artifice? Axure? OmniGraffle? Donnez-moi juste un PSD !? Eh bien, vous avez de la chance, car Repix Design a pris le temps de créer et de distribuer un fichier PSD détaillé et personnalisable contenant tous les composants de Bootstrap.
Si vous aimez faire votre wireframing dans Photoshop et que vous êtes un Bootstrapper, ce téléchargement gratuit est une évidence. Allez le prendre maintenant.
Police génial
Font Awesome est probablement ma ressource Twitter Bootstrap préférée. Il s’agit d’une police d’icônes, pour que tout le monde puisse l’utiliser dans n’importe quel projet. Cependant, il a été spécialement conçu pour compléter l'esthétique visuelle de Bootstrap.
Font Awesome est gratuit pour un usage commercial, compatible avec les lecteurs d’écran et contient 150 icônes (un nombre qui ne cesse de croître). Marquez celui-ci parce que vous allez l'aimer.
Sass Twitter Bootstrap
Lorsque les utilisateurs de Twitter ont créé Bootstrap, ils ont décidé de l'améliorer encore avec LESS, un préprocesseur CSS populaire qui apporte la magie des variables, des mixins et bien plus encore à CSS.
Le problème, c’est qu’il existe une grande division dans la base de fans des préprocesseurs. Certaines personnes aiment LESS parce que c'est simple et incroyablement facile à utiliser, mais beaucoup optent pour l'alternative plus puissante: Sass. Nous ne pouvons pas reprocher aux développeurs de Twitter d’avoir choisi la route LESS, mais les fans de Sass ont aussi besoin d’amour! Heureusement, John W. Long a porté Bootstrap sur Sass, de sorte que les deux côtés du débat sur le préprocesseur peuvent au moins s’accorder sur un point: le bootstrap.
Les fans de Stylus n'ont pas besoin de regretter le fait qu'ils ne parviennent souvent pas à être mentionnés, il existe également un port Bootstrap Stylus.
Colorpicker et Datepicker pour Bootstrap
Voici quelques éléments supplémentaires que vous pouvez ajouter à Bootstrap. Les deux sont gratuits, bien documentés et s’inscrivent parfaitement dans l’esthétique Bootstrap.
Comment complétez-vous Bootstrap?
Maintenant que vous avez vu notre liste de ressources Bootstrap géniales, nous souhaitons vous entendre. Envoyez-nous un tweet pour nous dire quelles ressources tierces vous avez incorporées à ce processus.
Bootstrap
Bootstrap est une boîte à outils open source pour le développement avec HTML, CSS et JS. Notre série propose des astuces et des idées pour travailler avec Bootstrap, ainsi que des collections de modèles inspirants pour commencer rapidement!