Comment modifier Bootstrap simplement et efficacement
Bootstrap est loin d’être le seul cadre d’interface HTML / CSS disponible, mais je pense que c’est sûr de dire que cela a changé le jeu. Cette pile de code incluse dans l'évier de la cuisine a facilité la conception et le développement de nombreuses applications (et sites Web) et popularisé le gigantesque framework HTML en tant que sous-produit.
Malheureusement, l'étendue de son ensemble de fonctionnalités fait appel aux aspects plus paresseux de la nature humaine, et beaucoup de ceux qui choisissent de l'utiliser utilisent les valeurs par défaut. Maintenant, faites attention, les styles par défaut et la grille de mise en page ne sont pas mauvais du tout. Ils sont le résultat d'un travail acharné et de tests approfondis effectués par l'équipe Twitter. Ils sont une base solide sur laquelle bâtir.
Mais c'est tout ce qu'ils sont: une fondation. Frameworks, comme leur nom l'indique, ne sont pas destinés à être utilisés comme une solution complète à vos besoins en matière d'UX. La seule exception à cette règle pourrait être que vous développiez quelque chose d’intérieur que le public ne verra jamais. Mais même à ce moment-là, l’idée est de les approfondir, de les développer et de les modifier.
Les développeurs de Bootstrap ont en fait fait du très bon travail pour rendre cela facile à faire: leur code est modulaire; et vous pouvez télécharger les composants individuels du framework à utiliser comme bon vous semble. Ils ont même fourni un outil de personnalisation de base sur leur site Web qui vous permet de modifier toutes les variables selon vos besoins.
Le reste, cependant, est à nous. Et certains, concepteurs et développeurs vraiment impressionnants ont intensifié leurs efforts en créant des mods et des outils qui ne nous donnent aucune excuse. Il n'y a aucune raison de se contenter des défauts.
Évaluer vos projets individuels; Peut-être que la typographie par défaut de Bootstrap est adaptée à vos besoins, mais que les couleurs et la grille ne le sont pas, vous avez peut-être besoin de différentes icônes. Identifiez les endroits où Bootstrap ne répond pas à vos besoins et consultez les ressources suivantes.
Modems Bootstrap
Ce sont des mods à part entière qui prennent l'interface utilisateur de base du bootstrap et la transforment en quelque chose de presque méconnaissable. Leurs utilisations sont quelque peu spécifiques et limitées; mais s'ils répondent à vos besoins, ils peuvent vous faire économiser du temps et de l'argent.
Interface utilisateur plate
Le premier mod de cette liste est Interface utilisateur plate Publié par les gars à Designmodo , Flat UI a atteint une popularité instantanée dans la communauté du design et pour une bonne raison: c'est magnifique.
Créé pour ceux qui aiment le design plat - par opposition aux tendances un peu squelettiques de Bootstrap - chaque élément de l'interface utilisateur a été entièrement repensé avec une toute nouvelle esthétique.
Avec des icônes vectorielles, une nouvelle police d’icône de glyphe, des éléments d’interface utilisateur personnalisés (comme une liste de tâches) et plusieurs schémas de couleurs faciles à modifier, une interface utilisateur plate a fait que je repense probablement à Bootstrap.
Ma bête noire: la taille du texte de votre élément de paragraphe de base est un peu petite pour un site Web. Pour être juste, il est probablement juste pour une interface d'application où vous pourriez mettre du texte dans des espaces plutôt petits.
Flat UI est gratuit, mais vous pouvez payer pour une version pro avec des éléments supplémentaires, des fonctionnalités et des fichiers PSD.
Fbootstrapp
Rappelez-vous comment j'ai dit que certains de ces mods avaient des cas d'utilisation plutôt spécifiques? Eh bien, je ne plaisantais pas. Fbootstrapp a été complètement retravaillé pour être compatible avec les éléments d’interface utilisateur de Facebook.
Pourquoi quelqu'un ferait ça? Eh bien, dans leurs propres mots, "Fbootstrapp est une boîte à outils conçue pour lancer le développement d'applications Facebook iFrame dans les deux tailles pertinentes. Il comprend des bases CSS et HTML pour la typographie, les formulaires, les boutons, les tableaux, les grilles, la navigation, etc., dans le style typique de Facebook. "
Les développeurs d'applications Facebook, prenez note: votre travail est plus facile.
Modèles d'administration de l'interface utilisateur Jumpstart
Bootstrap peut être destiné à être utilisé dans des applications, mais il nécessite un peu de travail si vous envisagez de créer une "interface d'administration" classique. Interface utilisateur Jumpstart vous apporte trois modèles différents qui le font admirablement.
Les icônes de l'interface d'administration, les styles de widget, les plug-ins de visualisation de données basés sur jQuery et bien plus encore sont regroupés dans des mises en page propres, personnalisables et entièrement réactives.
Ces mods sont différents des autres d'une manière majeure, cependant. Il n'y a pas de version gratuite; vous devez les payer directement. Ils ne coûtent pas très cher: ils se situent entre 15 et 20 dollars américains. En raison des efforts considérables qu’ils ont déployés, je dirais que cela en vaut la peine, s’ils répondent à vos besoins spécifiques.
BootMetro
Certaines personnes l'aiment et beaucoup le détestent avec passion. mais il ne fait aucun doute que Windows 8 et son interface utilisateur Metro ont fait sensation dans le monde du design. Pour ma part, je ne peux pas vraiment penser à un cas d'utilisation (en dehors d'une sorte de magasin de logiciels) où ce type d'interface serait particulièrement utile. Mais bon, en BootMetro nous en avons un!
Il est gratuit et semble avoir une fonctionnalité complète. Cela peut ne pas être particulièrement utile pour la plupart des gens, mais c'est une expérience de code intéressante. (Je veux dire vraiment? Bootstrap et Metro? Je n'ai pas vu ça venir.)
Outils de personnalisation bootstrap
Ainsi, vous souhaitez adapter votre configuration Bootstrap pour mieux répondre à vos besoins d'interface utilisateur / UX. Où commencez-vous? Eh bien, vous pouvez plonger directement dans le code. J'ai fait ça. Je vais vous dire, cependant, cela peut être difficile.
Si vous voulez changer toute la typographie, ou les couleurs des boutons et des liens, ou les styles de la barre de navigation manuellement, vous allez être là un moment. Vous pouvez modifier toutes les variables de l'application de personnalisation sur le site Web Bootstrap, mais vous devez connaître les codes HEX pour toutes les couleurs et vous ne recevez aucun retour visuel lorsque vous apportez des modifications.
Heureusement pour nous, il y a pas mal de créateurs de thèmes Bootstrap créés spécialement à cet effet. Ce sont les deux meilleurs que j'ai trouvés jusqu'ici.
StyleBootstrap
Si vous pouvez ignorer l'interface disgracieuse, StyleBootstrap est un outil puissant pour l'édition de la plupart des éléments d'interface utilisateur par défaut que vous trouverez dans la structure. Si vous voulez commencer rapidement, en ne changeant que les choses les plus évidentes, alors c'est le bon point de départ.
Bootstrap Magic
Bootstrap Magic est l'outil à utiliser si vous souhaitez procéder à un rebranding en profondeur du framework. Il possède une interface plus simple et plus simple et vous permet de modifier beaucoup plus d'éléments que StyleBootstrap. Soyez averti, cependant ... cela prendra plus de temps. Cela dit, cela ne prendrait pas autant de temps que de tout changer manuellement.
Modules complémentaires et extraits
Il suffit de dire qu'il y a des choses que Bootstrap n'a pas que vous pourriez trouver utiles. Pour commencer, nous avons des icônes.
Police génial
Les icônes de glyphes de Bootstrap sont géniales, mais limitées. Vous avez des icônes sombres, puis vous avez des icônes lumineuses, toutes installées dans une jolie petite image de sprite. Les polices Icon, cependant, sont beaucoup plus polyvalentes. Tout ce que vous pouvez faire avec du texte avec CSS3, vous pouvez le faire avec ces icônes. Changer la taille, la couleur, leur donner une ombre portée; c'est littéralement aussi simple que d'écrire des CSS. Avec quelques 361 icônes au moment de la rédaction de cet article, Police génial vaut la peine de vérifier.
Bootsnipp
Bootsnipp est une bibliothèque d'extraits HTML conçus pour fonctionner avec Bootstrap, sans avoir à ajouter de bibliothèques supplémentaires. Les extraits de code incluent: des formulaires d'inscription et de connexion par onglets, des carrousels, de meilleurs calendriers, une interface de messagerie qui ressemble à Gmail, une interface utilisateur de lecteur multimédia, etc.
Si vous êtes bloqué en train d’essayer de rassembler des éléments dans votre interface utilisateur, jetez un coup d’œil à la bibliothèque Bootsnipp. S'ils n'ont pas exactement ce dont vous avez besoin, les exemples de code peuvent vous aider à le faire.
Ce n'est pas tout ...
Le framework favori de Twitter étant aussi largement adopté, il y a probablement plus d'informations sur la façon de personnaliser Bootstrap que n'importe quelle liste.
Après tout, à quoi sert Internet, n'est-ce pas? Cela et ... les chats.
Avez-vous modifié Bootstrap? Avez-vous fait manuellement ou utiliser une ressource? Faites le nous savoir dans les commentaires.