TypoManiac : un squelette « responsive » pour SPIP 3.0

Après mille nuits à fureter partout, à dénicher des merveilles impossibles à restituer¹, j’en étais arrivé à la conclusion que :

• Mon site est avant tout basé sur du texte.
• Qu’il devait rester simple (minimal disent les anglo-saxons).
• Qu’il fallait oublier effets portfolio, sliders, pacotilles and co.
• Que ce serait une bonne idée de le rendre « responsive »

Et la lumière est arrivée au moment où je m’y attendais le moins. Le résultat est sous vos yeux. Je l’ai appelé TypoManiac, il passe les frontières et les formats, web comme tablettes ou mobiles.

Ouvrons le capot

Dans le garage, nous avons le moteur SPIP en version dernier modèle. D’autres ont mieux que moi vanté les mérites de cette version-qui-tue.

En terme de stabilité, de modularité, de vitesse. Et que dire de l’interface privée, de toute beauté, et repensée/remaniée avec soins.

L’immense avantage de cette version 3 de SPIP est également d’offrir aux bricolos du dimanche dans mon genre (coier-coller-essayer-empirisme-erreur-recommancer) une maquette de base (« squelette » en jargon SPIP), dite « dist », qui elle aussi a été remaniée de fond en comble. Ce « squelette » fourmille de « boucles » (le langage de SPIP) qui permettent d’afficher tout ce que l’on souhaite.

Une énorme partie de ce qui est affiché ici est dérivée de cette maquette prête à emploi fournie par SPIP. En résumé, TypoManiac n’est qu’un mix/remix. Du code à la papa, un peu à l’ancienne.

Question carrosserie, je me suis tourné vers Boostrap. Boostrap est un ensemble de feuilles de style (CSS). Les pros appellent ça un « framework ». Il en existe des dizaines. Celui-ci, conduit sous la houlette de... twitter, mais ça n’a pas d’incidence sur votre indépenance. Rien, ici, n’est envoyé au petit oiseau pour d’obscures statistiques. Boostrap a un avantage énorme pour les amateurs : il est royalement documenté et propose, de base, un arsenal d’agencements graphiques de toute première bourre².

Si vous voulez modifier TypoManiac, c’est assurément sur le site officiel de Boostrap que vous devrez vous tourner. De nombreux exemples de boutons, scrollbars, effets, y sont fort bien décrits.

A SPIP et à Boostrap, enfin, j’ai ajouté SlabText, un effet typographique en Jquery

C’est évidemment lui qui donne le ton de TypoManiac.

A dire vrai, il y a probablement mieux à faire au niveau des réglages typo (cf. ici http://www.frequency-decoder.com/demo/slabText/ ) mais ça dépasse largement mes champs de compétence. Partageons vos astuces, si vous voulez bien ,-)

Mise à jour 22 août 2012 : ajout des fichiers nécessaires pour rendre le squelette compatible avec le module Agenda

Installer TypoManiac

• Installer la dernière version de SPIP

Ensuite, soit à l’ancienne mode :

• Télécharger le Zip sur SPIP-Contrib
• Placer le dossier « squelette » à la racine de votre site FTP.

Soit, à la nouvelle façon (plus sûre) :

• Installer le squelette comme n’importe quel plugin en allant l’activer dans vos plug-ins (avec SPIP 3, cherchez le directement dans vos plugins sinon allez sur SPIP-Zone).
• C’est en place.

Seul travail nécéssaire à accomplir : Modifier les pages sommaire.html et inclure/nav.html en fonction de vos besoins et de vos goûts.

Le reste est à votre discrétion. Vous devriez trouver la plupart des boucles nécessaires pour un site simple. Dans la mesure du possible, j’ai documenté le code au mieux.

Le squelette est également disponible et mis à jour régulièrement sur contrib.spip.net et développé sur la SPIP-Zone.

Participez, contribuez, échangez

Utilisez le forum ci dessous pour partager vos astuces et trouvailles, raconter comment vous avez dompté la bête, montrez vos sites.

Merci

TypoManiac n’aurait j’amais vu le jour sans l’aide IMMENSE d’un certain nombre d’utilisateurs et de développerus de SPIP.

Que les Dieux de Gopher soient notamment avec B_B, Marcimat, RastaPopoulos, _alexnd, denisB, cy_altern, Romy, Fil, Seds, et Cerdic pour leur bienveillance et leur patience.

Merci également mille fois à Mathieu et Etienne.

Crédits

• TypoManiac, squelette est signé www.davduf.net et distribué sous Do What The Fuck you want to Public License, traduite en Français par la Licence Rien à Branler
• Les codes et boucles empruntés à SPIP sont sous licence GNU/GPL.
• Les codes empruntés à Bootstraps sont sous Apache License v2.0.
• Les Icons Glyphicons Free sont sous licence CC BY 3.0.