You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Charles Razack afab5778c9 Pas de svg dans le readme 1 month ago
capsules Ne pas ajouter les classes si aucune grille CSS n'est active 1 month ago
formulaires Formulaire de config en php + icône en plus 1 month ago
images Pas de svg dans le readme 1 month ago
inc Utiliser le dossier « grillecss » plutôt que « grille » tout court, c'est plus explicite (grille_css aurait été pas mal, mais ça bloque avec charger_fonction). 1 month ago
lang Fignolage icônes + ménage 1 month ago
noisettes Ne pas ajouter les classes si aucune grille CSS n'est active 1 month ago
prive On rend optionnelle l'option qui permet de gérer les conteneurs internes aux noisettes (limitant leur largeur interne). Ça n'est utile que si le thème du site est adapté, et sinon ça apporte de la confusion. 1 month ago
saisies Correction de coquilles pour trouver les valeurs sélectionnées + names 1 month ago
.gitattributes Sous-plugin du Noizetier qui permet de déclarer une grille CSS au noizetier. Ce plugin ne fait rien en soit, il faut ensuite implémenter un framework de grille en déclarant des choses. Cela ajoute alors des nouvelles configurations automatiquement à toutes les noisettes, permettant de configurer des options d'agencement (le colonnage, etc). 9 months ago
LICENSE Sous-plugin du Noizetier qui permet de déclarer une grille CSS au noizetier. Ce plugin ne fait rien en soit, il faut ensuite implémenter un framework de grille en déclarant des choses. Cela ajoute alors des nouvelles configurations automatiquement à toutes les noisettes, permettant de configurer des options d'agencement (le colonnage, etc). 9 months ago
README.md Pas de svg dans le readme 1 month ago
noizetier_layout-32.png Sous-plugin du Noizetier qui permet de déclarer une grille CSS au noizetier. Ce plugin ne fait rien en soit, il faut ensuite implémenter un framework de grille en déclarant des choses. Cela ajoute alors des nouvelles configurations automatiquement à toutes les noisettes, permettant de configurer des options d'agencement (le colonnage, etc). 9 months ago
noizetier_layout_administrations.php Allez on est sympa : migration des données suite aux derniers renommages. up z. 1 month ago
noizetier_layout_fonctions.php Utiliser le dossier « grillecss » plutôt que « grille » tout court, c'est plus explicite (grille_css aurait été pas mal, mais ça bloque avec charger_fonction). 1 month ago
noizetier_layout_pipelines.php test plus concis 1 month ago
paquet.xml Début de la documentation, dans le readme pour l'instant. 1 month ago

README.md

Noizetier : agencements

Ce plugin étend le noiZetier 3 en ajoutant la prise en charge des grilles CSS. Couplé à un plugin fournissant une grille CSS telle que Gridle, il permet de gérer l’agencement des noisettes.

Principe d’une grille CSS

Une grille CSS divise la page en N colonnes virtuelles, généralement 12.

Des blocs conteneurs constituent des « lignes ».

Dans ces lignes, chaque bloc enfant est une « colonne » qui peut s’étendre sur une N colonnes virtuelles. Leur largeur peut être définie pour chaque breakpoint.

Grille CSS

Utilisation

La noisette « Conteneur » est surchargée, elle est renommée en « Bloc de colonnage ». Dans le vocabulaire des grilles CSS, c’est donc une « ligne », dont les noisettes enfantes deviennent des « colonnes ».

Chaque noisette « colonne » peut s’étaler sur plusieurs colonnes virtuelles, définissant ainsi sa largeur.

La plupart des grilles CSS permettent l’imbrication, c’est à dire imbriquer une ligne dans une ligne, pour les cas spéciaux.

Noisettes imbriquées

De nouvelles saisies sont ajoutées à la configuration des noisettes, permettant d’ajuster largeur, alignement, ordre d’affichage, visibilité, etc. Ces valeurs peuvent être définies pour chaque breakpoint.

Noisette « Bloc de colonnage » :

Saisies d'une noisette conteneur

Noisette enfante :

Saisies d'une noisette colonne

Déclaration des grilles

Les plugins souhaitant déclarer une grille CSS doivent procéder ainsi :

Déclarer la grille

Déclarer l’identifiant de la grille dans le fichier d’options.

if (!defined('_NOIZETIER_GRILLE_CSS')) {
	define('_NOIZETIER_GRILLE_CSS', 'bidule');
}

Feuille de style

Fournir la feuille de style compilée. Celle-ci peut-être nommée et rangée n’importe-où.

css/bidule.css

Décrire la grille et lister les saisies

Créer un fichier grillecss/{bidule}.php.

Il doit contenir 3 fonctions :

  1. Une fonction qui décrit la grille : nombre de colonnes, breakpoints, etc.
  2. Une fonction qui liste les saisies.
  3. Une fonction qui transforme une classe en sa variante pour un breakpoint.

À finir…

Pipelines

noizetier_layout_lister_saisies_grille

Permet de modifier la liste des saisies de la grille CSS.

$saisies_grille = pipeline(
  'noizetier_layout_lister_saisies_grille',
  array(
    'args' => array(
      'grille'      => _NOIZETIER_GRILLE,
      'id_noisette' => $id_noisette,
    ),
    'data' => $saisies_grille,
  )
);

noizetier_layout_decrire_grille

Permet de modifier la description de la grille CSS. On peut par exemple changer le nombre de colonnes ou ajouter des breakpoints dans le cas où la feuille de style est personnalisée.

$grille = pipeline(
  'noizetier_layout_decrire_grille',
  array(
    'args' => array(
      'grille' => _NOIZETIER_GRILLE,
    ),
    'data' => $grille,
  )
);

Feuille de route

  1. Permettre un aperçu de l’agencement directement dans l’interface du noizetier