Sections split
Principe de base
Fenêtre du navigateur
Colonne centrale basée sur .container de Bootstrap 5 (doc)
Marges latérales
- Le CSS des sections split est déjà présent dans style.css de CMS-Alpha
- La largeur d'une marge latérale peut être récupérée dynamiquement par la variable CSS : --container-out-margin
Section split simple
Exemple de section split
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section split image à droite
Exemple de section split - image à gauche
On inverse l'ordre des div.split-container et .split-container-fluid.
On ajoute la classe .split-reverse sur .split
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section split 1/3 de colone centrale + marge
Exemple de section split 1/3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section split 1/3 image à droite
Exemple de section split 1/3 - image à droite
On inverse l'ordre des div.split-container et .split-container-fluid.
On ajoute la classe .split-reverse sur .split
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section split 2/3 de colone centrale + marge
Exemple de section split 2/3
Avec la classe .split-2-3p sur .split
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section split 2/3 image à droite
Exemple de section split 2/3 image à droite
Avec la classe .split-1-3p sur .split
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sections split en quinconce
Pour une succestion de sections split en quinconce, on englobera des sections split simples dans un élément avec la classe .alternate ou la classe .alternate-reverse pour démarrer l'image à droite.
Exemple de sections split en quinconce
Exemple de sections split en quinconce
Exemple de sections split en quinconce
Breackpoints
On appliquera la classe .split-$breackpoint à la section.split pour définir en dessous quelle taille d'écran elle passe en colonne. Sans aucune de ces classe, la section ne passe jamais en colonne.
.split-sm < 540px
.split-md < 720px
.split-lg < 960px
.split-xl < 1140px
.split-xxl < 1320px