Carnet Wiki

Version 4 — 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

Proposer un modèle ou une wheel ?

Avec textwheel :

Deux wheels à créer

<cadre class=“xml ”>
<code >




</cadre </code >

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

Comment synchroniser le système de grille du thème avec nos colonnes ?

-* breakpoints :
-* 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 ^^

La solution proposée dans l’article, date on peut depuis utiliser flexbox et si besoin prévoir un fallback de ce type tout de même.

.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

Spip :

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