Tutoriel Backbone.js : personnaliser l'interface

• Partie 1 : environnement de développementPartie 1t
• Partie 2 : les API Google et RequireJSPartie 2
• Partie 3 : authentification avec OAuth2Partie 3
• Partie 4 : Backbone.syncPartie 4
• Partie 5 : affichage des listesPartie 5
• Partie 6 : créer des listesPartie 6
• Partie 7 : modifier des listesPartie 7
• Partie 8 : supprimer des listesPartie 8
• Partie 9 : les tâchesPartie 9
• Partie 10 : oh non, pas plus de tâchesPartie 10
• Partie 11 : Spies, Stubs et MocksPartie 11
• Partie 12 : tester avec MocksPartie 12
• Partie 13 : routagePartie 13
• Partie 14 : personnaliser l'interfacePartie 14
• Partie 15 : mettre à jour, purgerPartie 15
• Partie 16 : plugin jQuery et déplacement des tâchesPartie 16

Avant de commencer ce tutoriel, vous aurez besoin de ce qui suit :

• alexyoung/dailyjs-backbone-tutorial en version 85c358 ;
• la clé de l'API de la partie 2 ;
• l'ID client de la partie 2 ;
• la mise à jour de app/js/config.js avec vos clés.

Pour consulter la source, exécutez les commandes suivantes (ou utilisez un outil approprié pour Git GUI) :

git clone git@github.com:alexyoung/dailyjs-backbone-tutorial.git
cd dailyjs-backbone-tutorial
git reset --hard 85c358

Jusqu'à présent, notre application Backbone a eu une interface rudimentaire. Elle est basée sur BootstrapBootstrap qui est un choix populaire pour les développeurs qui veulent une interface utilisable sans dépenser trop de temps à travailler sur le design de l'application. Cependant, Bootstrap est victime de sa propre popularité et la plupart d'entre nous commencent à se lasser de le voir partout.

Ce tutoriel porte sur les techniques pour personnaliser les projets générés avec Backbone et Bootstrap. Il existe trois approches principales auxquelles je me permets d'ajouter une originalité à mes projets Bootstrap :

1. Couleurs : obtenir le projet configuré avec un marquage approprié ;
2. Texture : une utilisation judicieuse des images pour ajouter une dimension supplémentaire à l'arrière-plan, des panneaux et boutons ;
3. Polices personnalisées et icônes : des polices personnalisées soigneusement appliquées et des icônes peuvent créer un look plus visuel.

Bootstrap a une page de personnalisationCustomize Bootstrap qui permet de changer les couleurs et les éléments typographiques. C'est explicite, donc je ne vais pas passer trop de temps là-dessus. Bootstrap est bâtie sur LESS CSSLESS CSS. Il est facile de créer vos propres versions de Bootstrap avec des couleurs personnalisées.

Pour gagner du temps lorsque je travaille sur des projets clients, je parcours souvent des sites de photos pour trouver des illustrations et textures utiles. Ce projet, cependant, nécessite juste quelque chose pour ajouter une texture à la navigation du côté gauche pour qu'elle soit visuellement distincte. Une excellente ressource pour les textures est Subtle PatternsSubtle Patterns. Un répertoire organisé de textures en mosaïque adaptées aux projets Web et mobiles. Pour des informations juridiques destinées à des projets commerciaux, voir iciAbout Subtle Patterns.

J'ai ajouté deux images en mosaïque au projet : une pour la barre de navigation et une autre pour le fond du body. L'image utilisée sur le body est blanche, tandis que la barre de navigation est gris foncé. Les éléments de la barre de navigation utilisent un mélange alpha pour rendre la texture sous-jacente plus légère (rgba (255, 255, 255,.25)).

Il est facile d'ajouter des textures à un projet pour autant que les images Subtle Patterns incluent une bonne résolution. Je trouve que c'est un second plaisir que de personnaliser Bootstrap, car il est facile d'échanger rapidement des textures pour expérimenter.

La première chose que je voulais changer était la police du logo. Plutôt que d'utiliser une image, j'ai trouvé une police appropriée sur Google Web FontsGoogle Web Fonts et j'ai appliqué quelques ombres CSS. Cette police a été ajoutée au projet en mettant à jour le fichier index.html pour charger la police et en mettant à jour la CSS pour y faire référence par son nom :

<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>

Puis, dans la CSS, la police est sélectionnée avec font-family: playball, sans-serif.

J'ai également modifié la police du body principal en PT Sans, ce qui ne semble pas radicalement différent de la valeur par défaut mais ça différencie encore le look de celui de Bootstrap.

Il existe aussi les Font AwesomeFont Awesome rapide à utiliser.

Ajouter des polices personnalisées, des textures et des icônes sont juste quelques moyens faciles pour distinguer un projet Bootstrap. Vous n'avez aucune excuse si vous créez des applications d'aspect repoussant !

Le code source de ce tutoriel se trouve ici : alexyoung / dailyjs-backbone-tutorial en version 711c9f6.

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original Backbone.js Tutorial: Customising the UI du site DailyJS.

Je remercie également zoom61 pour sa relecture attentive et assidue.