Nous avons déjà eu un aperçu des maquettes de notre application. Le style global est plutôt soigné, et il y aura donc une quantité importante de code dédié au design. Cependant, la mise en place du design ne concerne pas directement Angular, et beaucoup de site web ont des éléments de design en commun (mise en place d’une barre de navigation, centrer les éléments de la page, etc). Pour ces deux raisons, nous allons utiliser une librairie tierce pour implémenter le design de notre application. Heureusement, il en existe un grand nombre, et le plus dur sera de faire un choix entre toutes ces librairies. Nous allons retenir les librairies les plus connues, que vous connaissez déjà peut-être :
Bien sûr, il en existe beaucoup d’autres, et on pourrait écrire un cours entier à ce sujet. Cependant, nous devons bien choisir une librairie. Je préfère que l’on parte sur Bootstrap, qui est la solution la plus populaire :
L’avantage de partir sur la solution la plus populaire, c’est qu’il y a une communauté importante derrière cette librairie. On trouvera donc toujours une aide sur Internet en cas de problème, et on apprend à utiliser un outil qui n’aura pas disparu dans 6 mois. 😉
Cependant, comme Google voudra certainement uniformiser l’interface du projet Awesome List avec ses autres applications destinées au grand public, on pourrait ajouter une petite touche de Material Design pour leur faire plaisir, non ? Heureusement, comme Bootstrap est un projet très populaire, de nombreux thèmes ont été développés pour étendre la version standard de Bootstrap. Le site Bootswatch.com offre des thèmes d’excellente qualité pour personnaliser votre version de Boostrap.
En cherchant bien sur leur site, vous trouverez un thème appelé Materia. Il s’agit d’un thème Bootstrap imitant le Material Design. Ainsi, nous profitons de la popularité de Bootstrap, et on respecte la charte graphique de Google. Parfait !
Vous pouvez très bien essayer d’autres thèmes par curiosité. Comme beaucoup de sites utilisent la version standard de Boostrap, les thèmes proposés sur Bootswatch vous permettent de vous différencier de ces sites à peu de frais. 😎