3. Le style de notre application

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 :

• La librairie Bootstrap : C’est la librairie préférée des développeurs pour implémenter le design d’un site web. Bootstrap a été initialement développé par Twitter, et est rapidement devenue la librairie la plus populaire dans son domaine.
• La librairie Angular Material : Cette librairie permet d’implémenter le Material Design, qui est un ensemble de règles de design proposées par Google. L’utilisation du Material Design implique que votre application ressemblera beaucoup aux interfaces épurées et minimalistes de Google. De plus, le système est assez fermé, et vous aurez du mal à vous en défaire si vous souhaitez changer de design par la suite.
• La librairie Materialize : Il s’agit d’une petite librairie développée à partir du Material Design, mais qui est un peu plus haut niveau. Il y a moins d’options à personnaliser, et souvent il suffit d’ajouter quelques classes sur nos balises HTML pour obtenir le résultat voulu. Je vous présente cette librairie pour que vous puissiez faire la différence entre le Material Design et Materialize, mais cette librairie n’est pas en concurrence directe avec les deux précédentes, car il s’agit d’un projet de plus petite taille.

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. 😎