Cadeau été 2012

TypoManiac : un squelette « responsive » pour SPIP 3.0

Pour fêter l’arrivée de la tant attendue version 3 de SPIP, ce squelette noir et blanc, minimal et typo-typo. Pillez, partagez, contribuez.

Sélectionnez un passage du texte et twittez-le directement

Après mille nuits à fureter partout, à dénicher des merveilles impossibles à restituer [1], 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.

PNG - 1.1 ko
Un squelette compatible tablettes et mobiles
Test : http://www.responsinator.com/?url=www.davduf.net

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 [2].

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

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


[2des rumeurs laissent entendre que certains développeurs seraient en train de porter Boostraps en plugin SPIP, ce qui faciliterait la vie de beaucoup...


Vos commentaires

Répondre à cet article

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom