frendeitpt

flexAuto ~ grille responsive sur plusieurs colonnes

Idéal pour répartir des blocs sur plusieurs colonnes "responsives"

🆙 flexauto : une grille responsive sur plusieurs colonnes

Cliquer pour lire la documentation

syntaxe :
{up flexauto=x}contenu{/up flexauto}
x=1 à 12 est le nombre de colonnes sur grand écran.
author Lomart version UP-1.0 - juillet 2017 license GNU/GPLv3 tags layout-static
  • flexauto = 3: nombre de colonnes sur grand écran ou G-T-M
  • tablet = 2: nombre de colonnes sur moyen écran
  • mobile = 1: nombre de colonnes sur petit écran
  • class: classe(s) ajoutée(s) au bloc parent
  • style: style inline ajouté au bloc parent
  • bloc-style: classes et style inline ajoutés au bloc enfant
  • css-head (base-css):
    Redimensionner votre navigateur pour voir l'effet responsive

    Pour obtenir la grille ci-dessous, ce simple code convient:

    {up flexauto}
	<p>bloc n°1</p>
	<div>bloc n°2</div>
	<h4>bloc n°3</h4>
	<p>bloc n°4</p>
	<p>bloc n°5</p>
	<p>bloc n°6</p>
{/up flexauto}

    bloc n°1

    bloc n°2

    bloc n°3

    bloc n°4

    bloc n°5

    bloc n°6

    Vous remarquerez la tolérance pour définir les blocs enfants. N'importe quel type de bloc convient tant qu'il est de premier niveau

    Par défaut, le nombre de colonnes est de 3 sur grand écran, 2 sur moyen et 1 sur petit.

    L'exemple ci-dessous montre comment modifier ce comportement. Il ajoute aussi une marge entre les cellules avec la classe fg-gap. Toutes les classes de UP-Flexgrid sont utilisables

    {up flexauto=6 | tablet=3 | mobile=2 | class=fg-gap}

    bloc n°1

    bloc n°2

    bloc n°3

    bloc n°4

    bloc n°5

    bloc n°6

    Si le comportement de la grille n'est pas celui attendu, c'est presque toujours à cause des règles css que vous avez ajoutées.
    Afin d'éviter d'alourdir les shortcodes, j'ai utilisé l'action addcsshead pour définir les règles CSS d'habillage. 
    {up addcsshead=
  .fg-row > *:nth-child(odd) [background-color:violet]
  .fg-row > *:nth-child(even) [background-color:tan]
  .fg-row > * [padding:5px;margin-bottom:0;border:#666 dotted 2px;text-align:center] 
}

    notez que UP admet et comprend des arguments sur plusieurs lignes. Pratique pour se relire!

    Faciliter la mise en page

    Pour créer des blocs de contenus, vous pouvez les séparer par des shortcodes séparateurs comme dans l'exemple ci-dessous.

    Léopard

    Ecureuil

    Perroquets

    Macaques

    Cheetah-Masai-Mara

    Muguet

    Le code

    Une copie d'une partie du shorcode en mode wysiwyg dans l'éditeur :

     ainsi que la totalité du shortcode en mode code :

    <p>{up flexauto=3 | tablet=2 | mobile=1 | class=fg-gap | style=text-align:center | css-head=#id img[width:100%]}</p>
<p><img src="/images/photos/Leopard-africain-mini.jpg" alt="" /></p>
<p>Léopard</p>
<p>{====}</p>
<p><img src="/images/photos/Ecureuil-rouge-eurasien-mini.jpg" alt="" /></p>
<p>Ecureuil</p>
<p>{====}</p>
<p><img src="/images/photos/Perroquets-rouges-en-Equateur-mini.jpg" alt="" /></p>
<p>Perroquets</p>
<p>{====}</p>
<p><img src="/images/photos/black-crested-macaque-mini.jpg" alt="" /></p>
<p>Macaques</p>
<p>{====}</p>
<p><img src="/images/photos/Kenya-Cheetah-Masai-Mara-mini.jpg" alt="" /></p>
<p>Cheetah-Masai-Mara</p>
<p>{====}</p>
<p><img src="/images/photos/brins-de-muguet-mini.jpg" alt="" /></p>
<p>Muguet</p>
<p>{/up flexauto}</p>

    Les options du shortcode :

    flexauto=3, tablet=2, mobile=1 définissent le nombre de colonne selon la largeur de l'écran

    class=fg-gap : une classe pour ajouter un espace entre les colonnes

    style=text-align:center :pour centrer le contenu des cellules

    css-head=#id img[width:100%] : force les images à 100% de la largeur des colonnes. #id limite la portée de cette règle à cette action.