Le front-end

Le terme front-end désigne la partie du code associée à l’affichage des données issues du back-end.

Il s’agit donc de la partie du code définissant le design et l’affichage, mais aussi de l’ergonomie, la réactivité et l’expérience utilisateur. Sa mise en place est basée sur trois langages :

• Le HTML, aidé du langage de gabarit de Django ;

• SASS (en) pour les feuilles de style ;

• JavaScript pour les interactions.

Node.js (en), yarn (en) (gestionnaire de paquet pour Node.js) et Gulp (en) sont utilisés pour générer le code final minifié et cohérent. Le développement du front-end requiert donc des outils spécifiques dont l’installation est expliquée ici.

Navigateurs supportés : Les dernières versions de Mozilla Firefox, Google Chrome, Safari et Microsoft Edge.

• Arborescence des dossiers
  • assets/
  • dist/
  • templates/
• Charte de l’interface de Zeste de Savoir
  • Normalisation des styles
  • Recommandations pour un SCSS propre
• Eléments spécifiques au site
  • Les boîtes modales
  • Les infobulles CSS
  • Les menus déroulants (ou dropdown)
  • La lecture zen
  • Les boîtes représentant les contenus et les derniers sujets
  • Les membres et listes de membres
  • Les alertes de modération
  • Ajouter un design temporaire
• Helpers Javascript
  • $().tooltip()
  • $(message).karma()
  • window.ajax
• Mixins SCSS
  • CSS adaptatif (responsive)
  • Listes au format horizontal (horizontal-list)
• Interface utilisateur
  • Icônes
  • Boutons
  • Formulaires
  • Boites modales
  • Messages flash
• Structure globale du site
  • L’en-tête
  • Le contenu principal
  • La barre latérale
  • Le bas de page
  • Le menu pour mobile
  • Design fluide (responsive design)
• Elements de templates personnalisés
  • append_query_params
  • Le module trail
  • Le module captureas
  • Le module date
  • Le module email_obfuscator
  • Le module emarkdown
  • Le module htmldiff
  • Le module interventions
  • Le module profiles
  • Le module roman
  • Le module set
  • Le module topbar
  • Le module feminize
  • Le module times
  • Le module target_tree
  • Le module url_category
  • Le module displayable_authors
  • Le module elasticsearch
  • Le module joinby