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 1 : {up flexauto=x_ordi | tablet=x_tablet | mobile=x_mobile }contenu{/up flexauto}
syntaxe 2 : {up flexauto=x_ordi-x_tablet-x_mobile }contenu{/up flexauto}
x=1 à 12 est le nombre de colonnes sur grand écran et tablette. 4 sur mobile.
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3 @tags: layout-static
  • flexauto = 3: nombre de colonnes sur grand écran ou ordi-tablet-mobile
  • tablet = 2: nombre de colonnes sur moyen écran
  • mobile = 1: nombre de colonnes sur petit écran

Style

  • id: identifiant
  • class: classe(s) ajoutée(s) au bloc parent
  • style: style inline ajouté au bloc parent
  • bloc-style: style inline ajoutés au bloc enfant
  • css-head (base-css): style ajouté dans le HEAD de la page

Version 1.8
  • ajout options bloc-style & css-head. 
  • ajout possibilité de séparateurs
Version 2.1
  • saisie compacte du nombre de colonnes en responsive :
     flexauto=3-2-1 est équivalent à flexauto=3 | tablet=2 | mobile=1
Voir les nouveautésreplier

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.

Pour info, cette page utilise 9 action(s) :
upactionslist (1) readmore (1) csv2def (1) div (1) addcsshead (1) flexAuto (1) FLEXAUTO (1) flexauto (1) jcontent-info (1)
Détails