Material design
Il existe aujourd'hui plusieurs mouvances dans le design web. Elles vont et viennent au gré des modes et de l'avancée des technologies qui gravitent autour du développement web. Exemples de "types de design" (ils peuvent, pour certains, être combinés) :
- Material design -> impulsé par Google pour Android. Il joue sur les effets de hauteur avec les ombres, et d'animation des éléments pour simuler une application où il y aurait plusieurs couches superposées.
- Flat design -> propulsé par le besoin de "responsive design" (design qui s'adapte à la taille de l'écran). Il est souvent opposé au "Skeuomorphism design".
- Skeuomorphism design -> très utilisé par Apple à une époque, beaucoup moins aujourd'hui. Il essaye de faire ressembler les interfaces utilisateurs à des éléments réels.
Pour aller plus loin :
Couleur de fond
En "Material design", lorsqu'on travaille sur un thème sombre, il est conseillé, pour augmenter les contrastes, de travailler avec un gris sombre : #121212, les utilisateurs ayant l'impression que les couleurs claires ressortent mieux sur ce gris, plutôt que sur le noir pur.
Les variables CSS
En développement, on évite de dupliquer du code car, lorsqu'on le fait, si l'on doit changer un élément dans un code dupliqué, on devra repasser sur toutes les copies pour modifier le même élément. Pour éviter ça, en CSS, on utilise des variables.
En CSS, on écrit les variables sur un élément qui englobe tous les autres :root et on les écrit avec ce format : --nom-de-la-variable :
:root {
--title-font-family: "Londrina solid", cursive;
}Elles s'utilisent ensuite avec le mot-clé var() :
p {
font-family: var(--title-font-family);
}Les coins arrondis
Pour arrondir les coins d'un élément, on utilise la propriété CSS : border-radius. Celle-ci, selon la valeur qu'on va lui donner, va plus ou moins arrondir les angles. Si on utilise la valeur :
div {
border-radius: 5px;
}...on obtient le résultat suivant :
Si on veut arrondir spécifiquement un ou plusieurs des angles, on peut décomposer la valeur :
div {
border-radius: 5px 5px 0 0;
}La première valeur correspond au coin en haut à gauche et les valeurs suivantes se retrouvent dans le sens des aiguilles d'une montre : haut-droite, bas-droite et bas-gauche.
Pour finir, si l'on veut qu'un élément soit totalement rond, exemple pour faire une médaillon d'avatar, on peut utiliser le code :
div {
width: 100px;
height: 100px;
border-radius: 50%;
}widht & height soient égaux.Utilisation d'une banque d'icônes
Dans ce projet, j'utilise la librairie mdi icons car elle est très complète et elle englobe plusieurs autres librairies comme :
- Google icons ;
- une partie de Favicon ;
- et d'autres contributions.
Pour l'utiliser, il suffit de se rendre sur cette page : Docs > Material design icons docs > Getting started > Getting Started with the Webfont. On copie le lien vers le fichier CSS qui se trouve en haut dans setup, quand j'ai écrit le cours, c'était : https://cdn.jsdelivr.net/npm/@mdi/font@7.1.96/css/materialdesignicons.min.css (on voit dans le lien, le numéro de version, donc pour avoir toutes les icônes à jour, prenez la version actuelle).
Vous copiez ce lien dans un <link/> :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css"/>Ensuite pour utiliser une icône, vous faites votre choix et vous cliquez dessus :
...et vous prenez son nom, ici "star" tout en haut de la fenêtre de dialogue et vous l'utilisez dans votre code avec une balise <i> en lui ajoutant une première classe mdi, puis une seconde mdi-le-nom-de-l_icone :
<i class="mdi mdi-star"></i>Ces icônes sont considérées comme du texte, elles sont donc soumises aux mêmes propriétés CSS : color, font-size, font-weight...