source: spip-zone/_plugins_/noizetier_layout/trunk/README.md @ 118210

Last change on this file since 118210 was 118210, checked in by Charles Razack, 10 months ago

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

File size: 3.1 KB
RevLine 
[118210]1# Noizetier : agencements
[113922]2
[118210]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 TracBrowser for help on using the repository browser.