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.

• Arborescence des dossiers
  • assets/
  • dist/
  • templates/
• Eléments spécifiques au site
  • Les boîtes modales
  • La lecture zen
  • Les items représentant les contenus et les derniers sujets
  • Ajouter un design temporaire
• Helpers Javascript
  • $().tooltip()
  • $(message).karma()
• Structure globale du site
  • L’en-tête
  • Le contenu principal
  • La barre latérale
  • Le bas de page
  • Le menu pour mobile
• Elements de templates personnalisés
  • append_to_get
  • 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