Carnet Wiki

Version 3 — July 2018 Mist. GraphX

Proposer au rédacteur-rice, une solution de mise en forme à l’intérieur, du bloc texte d’un objet éditorial.

-  une syntaxe simple
-  pouvoir intégrer n’importe quel contenu dedans : modèles, médias
-  responsive et mobile first : si le redacteur-rice veut changer en mode tablet/medium adaptable

Proposer un modèle ou une wheel ?

Avec textwheel :

Deux wheels à créer

<ROW>
  <COL></COL>
  <COL></COL>
</ROW> 

Définir le système de grille sur lequel se base les colonnes

gouttière * : inside : padd external : margin
nombre de colonnes * : dependant du contexte/breakpoint
largeur de colonne : seulement utile dans le cas de grille statique

Idée 1 :

Utilisation d’un micro grid framework [1]

- [+] ultra simple
-  [-] limité => trop simple ^^

.dp50 {
  float:left;
  width:50%
}

<!-- 8 column -->
<div class="dp50">
	<div class="dp50">
		<div class="dp50" style="background-color:#666;">1</div>
		<div class="dp50" style="background-color:#444;">2</div>
	</div>
	<div class="dp50">
		<div class="dp50" style="background-color:#666;">3</div>
		<div class="dp50" style="background-color:#444;">4</div>
	</div>
</div>
<div class="dp50">
	<div class="dp50">
		<div class="dp50" style="background-color:#666;">5</div>
		<div class="dp50" style="background-color:#444;">6</div>
	</div>
	<div class="dp50">
		<div class="dp50" style="background-color:#666;">7</div>
		<div class="dp50" style="background-color:#444;">8</div>
	</div>
</div>
 
 
<div class="clear"></div>

Sources et solutions disponibes

Solutions disponibles

Spip :

Disposition avec Bootstrap : https://contrib.spip.net/Disposition-avec-Bootstrap