Création d'un squelette sur la base de 960.gs

Teddy Payet — 2011-12-30T13:17:08Z

Comme vous avez pu le voir, l'interface de mon site est toute fraiche. Il est basé sur le framework CSS 960.gs. Je l'utilise quasi systématiquement pour la création de mes squelettes persos comme professionnels. Je vais vous expliquer comment j'ai procédé à sa réalisation avec SPIP.

Avant propos

J'ai déjà abordé sur mon blog de certaines astuces que j'ai réutilisé sur mon site :

Je vais aujourd'hui vous parler de la première partie de la réalisation de mon squelette. Nous n'aborderons pas l'étape graphique qui est propre à chacun.

Présentation de 960.gs

Il existe plusieurs frameworks CSS : Blueprint, YUI Grid CSS, 960 Grid System.
Ce dernier (960.gs pour les intimes) est devenu ma référence maintenant. Il me permet de réaliser rapidement mes prototypes mais aussi mes versions de squelettes en production.

Pour mon design, j'ai réalisé ma maquette sous Photoshop grâce à la grille psd mis à disposition sur le site officiel. De ce fait, je peux aisément retrouver mes largeurs de bloc par rapport à un élément de grille (2 grilles, 3 grilles, etc.). Rapide et efficace.

Mon design est basé sur une division de 4 « sections » de la grille de 16. Ce qui correspond à la classe CSS grid_4.

Grille 960.gs appliquée à ma nouvelle interface.

Mise en place des gabarits.

En plus de ma grille 960.gs, mon squelette est basé sur la structure « Z » et le plugin Compositions. Je recrée de ce fait les répertoires de base de ma structure :

contenu
extra
head
images
inclure
lang
navigation

Selon mes besoins, je copierai les fichiers html que je dois modifier de z-dist_v1/ à squelettes/.

Premier élément : head.html

Head.html

Il faut que SPIP arrive à retrouver les fichiers de 960.gs. Je copie les fichiers 960.css, reset.css, text.css à la racine de mon dossier squelettes.
Dans le fichier inclure/head.html, je copie ce code juste avant tous les appels des fichiers css présent dans ce fichier :

[ (#REM) Feuille de style du framework 960.gs ] <link rel="stylesheet" href="[(#CHEMIN{reset.css}|direction_css)]" type="text/css" media="all" /> <link rel="stylesheet" href="[(#CHEMIN{text.css}|direction_css)]" type="text/css" media="all" /> <link rel="stylesheet" href="[(#CHEMIN{960.css}|direction_css)]" type="text/css" media="all" />

Body.html

Mon design n'utilise pas de zone « extra » de base. En tout cas, pas sur la page contenu/page-sommaire.html. L'appel aux extras se fera dans le fichier contenu/type.html (article.html, breve.html, mot.html, etc.)

En voici le code source spipien :

<div id="page"> <div id="culotte" class="wrapper"> <div class="container_16 clearfix"> <div class="grid_4"> <div id="entete"> <INCLURE{fond=inclure/entete,env} /> <div class="clear"></div> </div> <div id="nav"> <INCLURE{fond=inclure/barre-nav,env} /> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="grid_12"> <div id="bouton" class="grid_8 prefix_4 omega"> <INCLURE{fond=inclure/navigation-secondaire,env} /> <div class="clear"></div> </div> <div id="contenu"> <INCLURE{fond=contenu/#ENV{type},env} /> </div> <div class="clear"></div> </div> </div> </div> <div id="pied"> <div class="wrapper"> <div class="container_16"> <INCLURE{fond=inclure/pied,env} /> <div class="clear"></div> </div><!-- fin container_16 --> </div><!-- fin wrapper--> </div> </div>

À noter : la zone de contenu est dans un grid_12. De ce fait, si nous utilisons des grid_X dans cette zone, nous devrons attribuer des alpha et/ou omega selon la position en premier ou dernier dans la colonne. Cela a pour effet d'enlever les margin-left ou margin-right.

J'ai gardé le même principe d'INCLURE pour mes besoins spécifiques : inclure/navigation-secondaire
Ce dernier fait appel à ma petite barre de navigation contenant : le lien vers la page d'accueil, lien vers mon CV, lien vers mes informations générales telles que les conditions générales, la page de contact et enfin ma barre de recherche.

Jusque là, rien de bien « difficile ».

Le contenu

En tout premier lieu, on va commencer par éditer le fichier contenu/page-sommaire.html. Il est la vitrine du site, et conditionnera les autres pages. Ses lignes de codes sont très simple :

<B_articles> <div class="liste articles"> #ANCRE_PAGINATION <ul class="liste-items"> <BOUCLE_articles(ARTICLES){id_secteur=1} {!par date} {pagination 9}>[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha','',' omega'})]})] #INCLURE{fond=inclure/article-resume-rubrique,id_article,position=#GET{position},grille=grid_4} </BOUCLE_articles> </ul> [<p class="pagination">(#PAGINATION{precedent_suivant})</p>] </div> </B_articles>

Rien de plus.

La subtilité vient de inclure/article-resume-rubrique.html. Vous pouvez voir des paramètres particuliers qui vont me servir selon la page :

[(#SET{imglargeur, [(#ENV{imglargeur}|sinon{220})]})] [(#SET{imghauteur, [(#ENV{imghauteur}|sinon{220})]})] <BOUCLE_articles(ARTICLES) {id_article} {statut?}> <li class="item hentry[ (#ENV{grille})][ (#ENV{position})]" id="art#ID_ARTICLE"> <div class="bordure fdblanc arrondi">[(#SET{alt, [(#TITRE|attribut_html)]})] <div class="logo"><a href="#URL_ARTICLE"><BOUCLE_documents(DOCUMENTS) {id_article}{par date,id_document}{extension IN jpg,gif,bmp,png}{0,1}>[(#LOGO_DOCUMENT**|image_passe_partout{[(#GET{imglargeur})],[(#GET{imghauteur})]}|image_recadre{[(#GET{imglargeur})],[(#GET{imghauteur})],top}|inserer_attribut{'class','spip_logos'}|inserer_attribut{'alt',#GET{alt}})]</BOUCLE_documents></B_documents>[(#LOGO_ARTICLE_NORMAL||image_passe_partout{[(#GET{imglargeur})],[(#GET{imghauteur})]}|image_recadre{[(#GET{imglargeur})],[(#GET{imghauteur})],top}|inserer_attribut{'class','spip_logos'}|inserer_attribut{'alt',#GET{alt}})]<//B_documents></a></div> <div class="titre"><a href="#URL_ARTICLE">[(#TITRE)]</a></div> <div class="info-publi">[<abbr class="published" title="[(#DATE|date_iso)]">(#DATE|nom_mois)[ (#DATE|annee)]</abbr>]</div> [<div class="[(#EDIT{intro})] introduction entry-content">(#INTRODUCTION|couper{150}|replace{' :',' :'})</div>] <div class="lire-la-suite"><a class="lire-la-suite" href="#URL_ARTICLE"><:zpip:lire_la_suite:></a></div> </div> </li> </BOUCLE_articles>

Il y a 2 #SET importants. Ils déterminent la largeur et la hauteur de mes vignettes.

#SET : il est configuré grâce aux paramètres imglargeur et imghauteur. On y met une valeur de sécurité si l'un des paramètres n'est pas renseigné.
[ (#ENV{grille})] : renseigne sur quelle grille va s'adapter mon bloc.
[ (#ENV{position}] : renseigne tour à tour si je suis en début de colonne ou en fin de colonne (alpha ou omega ou rien…). Je le conditionne dans contenu/page-sommaire.html avec un #COMPTEUR_BOUCLE|alterner{…}
image_passe_partout : mon filtre préféré pour les images, couplé à image_recadre. Dans ces 2 filtres, j'applique ma largeur et ma hauteur déterminées par les #SET.

Voilà ! Le site est prêt ! Si si, je vous jure ! On a fait le plus dure. Le reste n'est que la déclinaison de ce même principe…
Pour chaque rubrique, ou presque, j'ai un gabarit spécifique que j'applique grâce au plugin Compositions.

Déclinaisons

Pour ma rubrique Savoir-faire, j'ai un squelette dédié : contenu/rubrique-services.html.
C'est le meilleur exemple pour la réutilisation de mon modèle inclure/article-resume-rubrique.html. Bon… J'avoue, je l'ai un peu modifié en réel car je n'ai pas besoin de la date ni même de l'auteur sur ces pages. Un display:none ne me suffisait pas…

Donc, dans contenu/rubrique-services.html, j'ai fait une boucle pour chaque sous rubrique pour les afficher différemment. Rien de complexe de ce fait, je ne l'illustre pas car un basique en boucle SPIP. Ma première boucle utilise cette inclusion :

<BOUCLE_articlesinternet(ARTICLES){id_rubrique} {!par date}>[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha',' omega'})]})] #INCLURE{fond=inclure/article-resume-rubrique,id_article,position=#GET{position},grille=grid_6,imglargeur=340,imghauteur=220} </BOUCLE_articlesinternet>

Explications :

#GET{position} : ça n'a pas changé de sa première utilisation. [(#COMPTEUR_BOUCLE|alterner{' alpha',' omega'})] défini la position de mon bloc ;
Le paramètre grille : je nomme expressément ma grille à grid_6 pour que je sois à l'affichage sur "2 colonnes" ;
Le paramètre imglargeur : je donne la largeur à laquelle mon logo sera redimensionné, 340 px qui correspondent à la largeur d'un grid_6 ;
Le paramètre imghauteur : je donne la hauteur à laquelle mon logo sera redimensionné, 220 px ;

Vous pouvez vérifier ce que ça donne ici

Le deuxième appel
Pour ma 2ème sous-rubrique, je fais l'appel ainsi :

<BOUCLE_articlesdesign(ARTICLES){id_rubrique} {!par date}>[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha','',' omega'})]})] #INCLURE{fond=inclure/article-resume-rubrique,id_article,position=#GET{position},grille=grid_4} </BOUCLE_articlesdesign>

Là, pas de changement existentiel. On est sur 3 colonnes, soit des grid_4. Pas la peine de renseigner la largeur et la hauteur de ma vignette car les nombres par défaut me conviennent sur cette grille.

Et enfin…
Je fais un 3ème et dernier appel à cet inclure pour les articles de ma rubrique (et plus ses sous-rubriques) :

<BOUCLE_articles(ARTICLES){id_rubrique} {!par date}> #INCLURE{fond=inclure/article-resume-rubrique,id_article,position="alpha omega",grille="grid_10 prefix_1 suffix_1",imglargeur=580} </BOUCLE_articles>

Le but de cet appel est d'afficher sur une plus grande largeur les articles de la rubrique. On est sur un grid_10. Je lui rajoute un prefix_1 et un suffix_1 pour que la colonne soit centrée dans ma zone de contenu.
La position est en alpha ET omega car 10+1+1=12. Les margin-left et margin-right sont alors superflus.

Conclusion

Vous pouvez voir que ce n'est pas compliqué de réaliser un squelette pour SPIP sur les modèles :

Z-dist ;
Compositions ;
et enfin 960.gs.

Pour pousser l'exemple, un autre article sera publié dans peu de temps sur les quelques paramètres à modifier pour en faire un squelette dédié aux smartphones. Cette déclinaison m'a pris 1 heure de mon temps maximum.

Le tout est de bien pensé à votre squelette, comment vous simplifier la tâche par la suite. C'est le conseil que je peux vous donner.

Pour aller plus loin

Voici quelques lectures supplémentaires :

image_passe_partout : http://www.spip.net/fr_article4562.html ;
image_recadre : : dans le paragraphe "Recadrer une image" http://www.spip.net/fr_article3327.html ;
Zpip et la création rapide de pages ;
960.gs : le site officiel ;

Nouvelle syntaxe de #LOGO_XX en spip 2.x

Teddy Payet — 2009-12-09T13:41:33Z

Suite à une discussion sur IRC, il est apparu que #LOGO_XX a été modifié depuis spip 2.
Il est maintenant plus obligatoire de mettre un double pipe (||) pour appliquer un filtre image.

Se référer à changeset du trac :
– http://trac.rezo.net/trac/spip/chan...
– http://trac.rezo.net/trac/spip/chan...
– http://trac.rezo.net/trac/spip/chan...

La balise #LOGO_ARTICLE et consorts rentrent dans le moule commun. Les faux filtres |fichier et |lien sont remplacés respectivement par l'écriture #LOGO_ARTICLE** et #LOGO_ARTICLE*. Les faux filtres de positionnement (top,left,right,center,bottom) et les balises #URL_xxx en position de filtres sont à présent à écrire comme argument de la balise, l'écriture #LOGO_ARTICLE|left est donc remplacée par #LOGO_ARTICLE{left} et l'écriture #LOGO_ARTICLE|#URL_AUTEUR est donc remplacée par #LOGO_ARTICLE{#URL_AUTEUR}. Ces deux écritures peuvent se combiner entre elles et avec les deux nombres donnant les dimensions, comme dans #LOGO_DOCUMENT{#URL_ARTICLE,bottom,60,80} , l'ordre des 4 paramètres étant libre. Avec tout ça, il n'est plus nécessaire d'écrire || pour stipuler que les filtres normaux commencent.

Les anciennes écritures restent comprises mais doivent être considérées comme obsolètes. Une écriture théoriquement possible mais vraisemblablement pas utilisée est néanmoins totalement exclue à présent (savoir #LOGO_ARTICLE|f où f ne contiendrait pas le caractère # mais donnerait on ne sait comment une URL).

Test (en plus de squelette-dist, remis d'équerre) :
 [(#LOGO_DOCUMENT{43,left,66})] LOGO_DOCUMENT{# URL_ARTICLE,77,bottom,67} [(#LOGO_DOCUMENT{#URL_ARTICLEbottom,77,67})] 
 LOGO_DOCUMENT** [(#LOGO_DOCUMENT**)] 
 LOGO_DOCUMENT|lien [(#LOGO_DOCUMENT|lien)] 
 LOGO_DOCUMENT* [(#LOGO_DOCUMENT*)] 
 LOGO_DOCUMENT{12,13}trim{f}} [(#LOGO_DOCUMENT{12,13}trim{f})] 
 LOGO_DOCUMENT{left,bottom,right} [(#LOGO_DOCUMENT{left,bottom,right})] 