Webflow Live Build 2 avec Lumos (Framework Timothy Ricks)

[Partie 2] Live Build Webflow : Lumos en action (Sliders et CMS)

Merci à tous d'avoir été si nombreux pour le premier épisode de notre série de Live Build Lumos ! Dans cette deuxième partie, nous finalisons la page d'accueil du fonds d'investissement.

Lucas Clairet (@lucas_clairet) et Thibaut vous guident à travers les aspects les plus techniques de Lumos, notamment l'intégration des données dynamiques du CMS dans les composants avancés du framework.

Programme du Jour : Ce qu'il reste à développer

1. Finalisation de la Section Team : Intégration du composant Slider et des Collections CMS.
2. Développement de la Section Presse : Utilisation du système de Grille utilitaire (U-Grid) de Lumos.
3. Finalisations : Construction de la Nav Bar (composant Lumos natif) et des Boutons avancés.
4. Tips Bonus de Lucas : Optimisations et nouveautés (States & Triggers).

Le Défi du Slider Swiper & du CMS

La section Team est centrée sur le composant Slider de Lumos, qui utilise la librairie Swiper.

1. Intégration du CMS dans les Composants

• Collections List dans les Slots : Comment insérer une Collection List (Collection Team) dans le slot du composant Lumos, et le rendre réutilisable sur d'autres pages.
• Création de Cartes Dynamiques : Structuration des éléments de la carte (image, titre, description) avec un mappage direct vers le CMS.

2. La Magie du display: contents

• Comprendre l'Architecture : Explication du rôle du display: contents (classe U-Display-Contents) dans le CSS du composant Slider.
• L'impact sur le CMS : Pourquoi les divs de la Collection List (Collection-List-Wrapper, etc.) peuvent ignorer les styles et pourquoi il n'est pas nécessaire de leur appliquer des classes de layout.

3. Personnalisation du Slider

• Propriétés de Composant : Modification de la Slide Split (2.5 pour desktop, etc.) et masquage des contrôles (Controls Visibility: Hidden).
• Customisation Avancée (Teasing) : Comment nous pourrions faire évoluer le composant Lumos pour ajouter des fonctionnalités non-natives (ex : Centrer la slide active ou activer le Loop infini).

La Grille Utilitaire (Section Presse)

• Grille 12 Colonnes : Utilisation des classes U-Column-Start-* et U-Column-* pour créer un layout en grille asymétrique (3 colonnes pour le texte, 8 colonnes pour le contenu CMS, avec un Gutter entre les deux).
• Gestion des Marges : Comment utiliser la classe Margin-Trim pour annuler la marge inférieure des derniers éléments d'un bloc.

Les Optimisations et Nouveautés

• Sémantique : Importance de la structure H2/H3 pour l'accessibilité et le SEO.
• Bonus : Aperçu du nouveau fonctionnement des States & Triggers dans Webflow, qui donne plus de puissance dans la gestion des états de survol des boutons.