I. Préparation

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) :

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

II. Personnaliser Bootstrap

Image non disponible

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.

III. Les couleurs

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.

IV. La texture

Image non disponible

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.

V. Les polices personnalisées et les icônes

Image non disponible

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 :

 
Sélectionnez
<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.

VI. En avant pour la personnalisation

Image non disponible

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éer des applications d'aspect repoussant !

Vous trouverez une version de bTask à l'adresse todo.dailyjs.com. Ce n'est pas exactement identique à la version du tutoriel pour le moment parce que je l'ai écrite lors de mes recherches pour cette série de tutoriels, mais finalement je vais basculer et utiliser le même code que le projet GitHub. Il n'implémente pas tout ce que prend en charge Google Tasks (comme les sous-tâches par exemple), mais je l'utilise tous les jours au travail.

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

VII. Remerciements

Cet article a été publié avec l'aimable autorisation de Alex Young. L'article original peut être lu sur le site DailyJSDailyJS : Backbone.js Tutorial: Customising the UIBackbone.js Tutorial: Customising the UI.

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