Carnet Wiki

Version 3 — il y a 2 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 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 ^^

  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

Solutions disponibles

Spip :

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