Sujet de stage : Layout Gala en flex et grid

Samedi 15 mai 2021 — Dernier ajout mardi 15 mars 2022

Acquérir une expérience en CSS avec grid et flex avec versionning de code sur Github

Retour Sommaire

Problématique

En 2005 (autant dire la préhistoire du web), Alessandro Fulciniti propose un HTML assez simple avec 40 variantes d’affichages pour gérer l’affichage d’une page web avec :

  • entête
  • pied de page
  • contenu
  • navigation principale
  • navigation secondaire

Le site web présentant les 40 Layout Gala

15 ans après, ce code fonctionne toujours, mais mériterait d’être actualisé avec ce que permettent les CSS modernes : flexbox et grid layout.

Retour Sommaire

Objectif du stage

Refaire les 40 Layout Gala :

  • en gardant le HTML tel quel
  • et en refaisant les CSS de manière moderne (grid et flexbox)
  • et en en profitant pour équilibrer la hauteur des colonnes
  • et faire les déclinaisons RWD pour tablettes et mobile
  • et de faire un site de démo semblable à l’original pour faire la démonstration des 40 layouts
  • le tout en open source, publié sur Github
Retour Sommaire

Objectif secondaire

Sachant que SoyezCréateurs est basé sur LaYout Gala avec un JavaScript pour équilibrer les colonnes :

  • modification du squelette SPIP SoyezCréateurs pour utiliser les nouvelles CSS (en s’inscrivant sur la forge de SPIP et en travaillant sur une branche spécifique avant de merger avec le master via une PR)
  • donc modification profonde de layout.css.html
  • et suppression du script d’équilibrage des colonnes et des classes concernées
  • ce qui implique apprentissage du langage SPIP (en particulier : les balises #SET, #GET et les filtres |==, |ou pour reproduire en langage SPIP ce qui aura été fait en PHP. Le glossaire de SPIP sera un point d’entrée très utile pour chercher dans la doc)
  • et donc la compréhension du lien entre table SQL et boucle SPIP

SoyezCréateurs est un squelette Open source pour SPIP. Il est utilisé par environ 1000 sites.

Quant à SPIP, il est utilisé :

Retour Sommaire

Estimation difficulté/temps

  • pour un bon intégrateur CSS, les 40 Layout Gala ne devraient pas prendre plus d’une semaine de travail.
  • l’intégration dans SoyezCréateurs 2 jours environ

Pour un stagiaire, il conviendrait de multiplier ce temps par 3 au minimum.

Retour Sommaire

Travail en cours

Retour Sommaire

Reste à faire

  • header et footer pouvant faire 100% de la lageur de l’écran et contenu/navigation de taille fixe (une piste de solution ici)
  • largeurs paramétrables (largeur totale et largeurs des colonnes)
  • intégration dans SoyezCréateurs

Retour Sommaire

Ce sujet de stage vous intéresse : faites votre stage au sein de pyrat.net !

Jules Hervé l’a fait : LayoutGala 2021 ! (consulter le code source sur Github)

Documents à télécharger

Revenir en haut