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
idetclassest 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-buttonserait 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)