Proposition de design pour Librezo
https://librezo.fr
content | ||
sass/css | ||
static | ||
templates | ||
.gitignore | ||
config.toml | ||
README.md |
Nouveau site web de Librezo
Utilisation
# tester en local
zola serve
# compiler en démo publique
LIBREZO_WEBSITE=dev zola build
# compiler en prod
zola build
Contribution
Le site devrait respecter les points suivants.
Note : il n'est pas nécessaire de s'y conformer immédiatement en faisant une MR. La relecture de MR est là pour ça.
- Validité
- Testez votre code avec le validateur du W3C.
- Accessibilité et Responsive
- Testez votre code avec le validateur WAVE.
- Suivez les recommandations d'accessibilité du W3C et du MDN.
- Toutes les fonctionnalités doivent être accessibles au clavier exclusivement (tab, flèches, entrée, espace). Essayez éventuellement avec un lecteur d'écran comme Orca (Linux), NVDA (Windows) ou TalkBack (Android).
- Les images doivent être optionnelles.
- JavaScript doit être optionnel.
- Les modes clair et sombres doivent être utilisables. (sous Firefox, CTRL+Maj+i puis icônes Soleil et Lune)
- Testez la page avec différentes tailles d'écran. (sous Firefox, CTRL+Maj+m)
- Testez la page avec des simulateurs de daltonisme. (sous Firefox, CTRL+Maj+i puis onglet Accessibilité)
- Performance
- Limitez l'utilisation de frameworks.
- Compressez bien les images. YOGA Image Optimizer peut être utile.
- Réduisez les requêtes externes.
- Évitez les animations en continu et les lectures automatiques.
- Style de code
- Respectez l'indentation.
- La convention de nommages des
id
etclass
est hiérarchique, avec les niveaux de hiérarchie séparés par des tirets-
. Les underscores_
marquent un espace mais pas un niveau hiérarchique.
Exemple :header-menu-button
serait un bouton du menu de l'entête.
- Légalité
- Respectez le RGPD et la loi Informatique et Libertés.
- Sauf exception, n'utilisez que des œuvres et formats libres, et respectez leur licence. (images, polices, bibliothèques)