Carnet Wiki

Version 4 — il y a 4 mois 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.

  1. .dp50 {
  2.   float:left;
  3.   width:50%
  4. }

Télécharger

  1. <!-- 8 column -->
  2. <div class="dp50">
  3.         <div class="dp50">
  4.                 <div class="dp50" style="background-color:#666;">1</div>
  5.                 <div class="dp50" style="background-color:#444;">2</div>
  6.         </div>
  7.         <div class="dp50">
  8.                 <div class="dp50" style="background-color:#666;">3</div>
  9.                 <div class="dp50" style="background-color:#444;">4</div>
  10.         </div>
  11. </div>
  12. <div class="dp50">
  13.         <div class="dp50">
  14.                 <div class="dp50" style="background-color:#666;">5</div>
  15.                 <div class="dp50" style="background-color:#444;">6</div>
  16.         </div>
  17.         <div class="dp50">
  18.                 <div class="dp50" style="background-color:#666;">7</div>
  19.                 <div class="dp50" style="background-color:#444;">8</div>
  20.         </div>
  21. </div>
  22.  
  23.  
  24. <div class="clear"></div>

Télécharger

Sources et solutions disponibes

Spip :

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