cell ~ mise en page avec table-cell

L'action cell permet des créer des colonnes côte à côte sur une seule ligne.

Cela permet, par exemple, d'insérer facilement une image à coté d'un texte ou une synthèse avec son développé à côté.

Cette action utilise les classes cell-* de la feuille de style up.css

Utilisation minimaliste

{up cell | class=w4 mcenter bloc3 cell-center bg-bleuPale}
  <div>
    <p>Notre proposition</p>
	<button>Commander</button>
  </div>
{/up cell}

Syntaxe wysiwyg

Pour suivre le grand principe de UP de ne pas avoir à passer en mode code, le contenu des colonnes est séparé par le shortcode {===}, avec au minimum 3 signes égal.

Le contenu ci-dessus est obtenu avec le code suivant (réduisez la taille de votre navigateur pour tester le comportement responsive):

{up cell=3-9 | mobile=12-0 | tablet=6-6 | class=bg-violet p1 | class-*=bg-jauneClair p1 cell-center | style-1=border:blue 2px solid }
  <p>le contenu de la première colonne</p>
  <p><img id="img1" src="/images/template/up-logo-70x300.png" alt="" /></p>
{===========}
  <p>contenu colonne 2</p>
{/up cell}

Quelques explications:

cell=3-9

la largeur des colonnes en vue grand écran.

mobile=12-0

Sur mobile la première colonne occupera toute la largeur car la deuxième est masquée (0)

tablet=6-6

Sur moyen écran, les 2 colonnes auront la même largeur.

class=bg-violet p1

Un fond violet avec un padding est ajouté au conteneur parent.

class-*=bg-jauneClair p1 cell-center

Un fond jaune clair et un padding est ajouté à tous les blocs enfants. cell-center permet de centrer tous les contenu verticalement.

style-1=border:blue 2px solid

une règle CSS pour la première colonne.
Dès que UP voit un paramètre qui se termine par -*, il crée 6 paramètres indicés de 1 à 6 pour les cibler individuellement. param-* est appliqué à toutes les colonnes, param-1 à la colonne 1, param-2 à la colonne 2, ...

Syntaxe sans séparateur

Sans séparateur {===}, on utilise les blocs enfants d premier niveau.

Le méme test que ci-dessus, mais avec ce code:

{up cell=3-9 | mobile=12-0 | tablet=6-6 | class=bg-violet p1 | class-*=bg-jauneClair p1 cell-center | style-1=border:blue 2px solid }</p>
<div>
	<p>le contenu de la première colonne</p>
	<p><img id="img1" src="/images/template/up-logo-70x300.png" alt="" /></p>
</div>
<div>
	<p>contenu colonne 2</p>
</div>
<p>{/up cell}

3, 4, 5 ou 6 colonnes

Il suffit de l'indiquer comme largeurs dans l'argument principal. Exemple pour 4 colonnes : {up cell=2-3-4-1}