IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Tutoriel Backbone.js : personnaliser l'interface

Cet article est la traduction de Backbone.js Tutorial: Customising the UI publié sur DailyJS.

Commentez Donner une note à l´article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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

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 concernant l'article original Backbone.js Tutorial: Customising the UI du site DailyJS.

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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.