Ignore:
Timestamp:
Oct 18, 2019, 5:22:15 PM (9 months ago)
Author:
Charles Razack
Message:

Début de la documentation, dans le readme pour l'instant.

Location:
_plugins_/noizetier_layout/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/noizetier_layout/trunk

    • Property subgit:lock:869405cd4333f1e2e0fd9773c3e1501b3c96f723 deleted
    • Property subgit:lock:b5779d42dae552cf251c47e570d0cff42711eea7 set to 2019-10-18T19:22:45.416
  • _plugins_/noizetier_layout/trunk/README.md

    r113922 r118210  
    1 # noizetier_layout
     1# Noizetier : agencements
    22
    3 Étend le Noizetier en ajoutant la prise en charge des grilles CSS.
    4 À déplacer sur la zone quand il sera fini.
     3Ce plugin étend le noiZetier 3 en ajoutant la prise en charge des grilles CSS.
     4Couplé à un plugin fournissant une grille CSS telle que [Gridle](https://git.spip.net/plugin/gridle), il permet de gérer l'agencement des noisettes.
     5
     6## Principe d’une grille CSS
     7
     8Une grille CSS divise la page en N colonnes virtuelles, généralement 12.
     9
     10Des blocs conteneurs constituent des « lignes ».
     11
     12Dans ces lignes, chaque bloc enfant est une « colonne » qui peut s'étendre sur une N colonnes virtuelles.
     13Leur largeur peut être définie pour chaque breakpoint.
     14
     15![Grille CSS](images/doc/grid.svg)
     16
     17## Utilisation
     18
     19La noisette « Conteneur » est surchargée, elle est renommée en « Bloc de colonnage ».
     20Dans le vocabulaire des grilles CSS, c'est donc une « ligne », dont les noisettes enfantes deviennent des « colonnes ».
     21
     22Chaque noisette « colonne » peut s'étaler sur plusieurs colonnes virtuelles, définissant ainsi sa largeur.
     23
     24La plupart des grilles CSS permettent l'imbrication, c'est à dire imbriquer une ligne dans une ligne, pour les cas spéciaux.
     25
     26![Noisettes imbriquées](images/doc/config_imbrication.png)
     27
     28De nouvelles saisies sont ajoutées à la configuration des noisettes, permettant d'ajuster largeur, alignement, ordre d'affichage, visibilité, etc.
     29Ces valeurs peuvent être définies pour chaque breakpoint.
     30
     31Noisette « Bloc de colonnage » :
     32
     33![Saisies d'une noisette conteneur](images/doc/config_row.png)
     34
     35Noisette enfante :
     36
     37![Saisies d'une noisette colonne](images/doc/config_column.png)
     38
     39## Déclaration des grilles
     40
     41Les plugins souhaitant déclarer une grille CSS doivent procéder ainsi :
     42
     43### Déclarer la grille
     44
     45Déclarer l'identifiant de la grille dans le fichier d'options.
     46
     47```php
     48if (!defined('_NOIZETIER_GRILLE_CSS')) {
     49        define('_NOIZETIER_GRILLE_CSS', 'bidule');
     50}
     51```
     52
     53### Feuille de style
     54
     55Fournir la feuille de style compilée.
     56Celle-ci peut-être nommée et rangée n'importe-où.
     57
     58`css/bidule.css`
     59
     60### Décrire la grille et lister les saisies
     61
     62Créer un fichier `grillecss/{bidule}.php`.
     63
     64Il doit contenir 3 fonctions :
     65
     661. Une fonction qui décrit la grille : nombre de colonnes, breakpoints, etc.
     672. Une fonction qui liste les saisies.
     683. Une fonction qui transforme une classe en sa variante pour un breakpoint.
     69
     70**À finir...**
     71
     72
     73## Pipelines
     74
     75### `noizetier_layout_lister_saisies_grille`
     76
     77Permet de modifier la liste des saisies de la grille CSS.
     78
     79```php
     80$saisies_grille = pipeline(
     81  'noizetier_layout_lister_saisies_grille',
     82  array(
     83    'args' => array(
     84      'grille'      => _NOIZETIER_GRILLE,
     85      'id_noisette' => $id_noisette,
     86    ),
     87    'data' => $saisies_grille,
     88  )
     89);
     90```
     91
     92### `noizetier_layout_decrire_grille`
     93
     94Permet de modifier la description de la grille CSS.
     95On peut par exemple changer le nombre de colonnes ou ajouter des breakpoints dans le cas où la feuille de style est personnalisée.
     96
     97```php
     98$grille = pipeline(
     99  'noizetier_layout_decrire_grille',
     100  array(
     101    'args' => array(
     102      'grille' => _NOIZETIER_GRILLE,
     103    ),
     104    'data' => $grille,
     105  )
     106);
     107```
     108
     109## Feuille de route
     110
     1111. Permettre un aperçu de l'agencement directement dans l'interface du noizetier
Note: See TracChangeset for help on using the changeset viewer.