SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 259 visiteurs en ce moment

Accueil > Squelettes > Squelettes généralistes > TypoManiac > TypoManiac

TypoManiac

25 juillet 2012 – par davduf – 32 commentaires

17 votes

Un squelette « responsive », minimal et typographique, basé sur le framework Boostrap.

Démo

Pour voir TypoManiac en action, c’est ici en version web ou c’est là en version mobile.

Installer TypoManiac

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.

Ouvrons le capot

Question motorisation, TypoManiac tourne avec SPIP 3 et plus. Les boucles utilisées ici s’inspirent largement de celle du squelette fourni d’origine avec SPIP

Question carrosserie, TypoManiac s’appuie sur 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 [1].

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.

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

Participez, contribuez, échangez

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

Le squelette est développé sur la SPIP-Zone.

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

Notes

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

Dernière modification de cette page le 22 août 2012

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 17 août 2015 à 21:16, par Yves En réponse à : TypoManiac

    Merci pour ce magnifique squelette, c’est ce que je cherchais depuis longtemps.
    Je l’ai installé avec bonheur.
    Y a-t-il un moyen d’utiliser, dans le sommaire, le logo d’un article comme image de fond pour le titre ?

    Répondre à ce message

  • Le 20 décembre 2013 à 14:07, par superseed77 En réponse à : TypoManiac

    Bonjour davduf bonjour à tous,

    j’ai inclu

    nav.html} >

    dans mon squelette ; j’ai bien la nav mais j’ai une page avec erreur 404 à la place du contenu PLUS la page elle-même.
    le texte de l’erreur 404 vient de plugins/auto/typomaniac/v1.1.1/404.html

    comme si la page contenait les squelettes typomaniac et les miens ...

    donc double question
    1- comment supprimer cette erreur 404
    2- dois-je recopier le contenu de plugins/auto/typomaniac/v1.1.1/ quelque part ailleurs ? car si je modifié les squelettes dedans, le modif seront perdues lors d’une mise à jour

    PS : vous l’aurez deviné je suis très novice en spip

    Répondre à ce message

  • Le 29 août 2013 à 10:31, par mj En réponse à : TypoManiac

    Bonjour, tout d’abord merci pour ce squelette !

    J’ai deux questions :
    - est-il possible d’avoir un menu déroulant dynamique (créé avec le plugin menus par exemple) ?
    - envisagez-vous de mettre à jour le plugin avec la v3 de Bootstrap ?

    Merci.

    • Le 29 août 2013 à 13:36, par davduf En réponse à : TypoManiac

      Bonjour,

      Vous pouvez ajouter le plugin Menus sans problème et l’ajouter dans le squelette.

      Non, pas de m-a-j prévue pour Bootstrap 3.0, désolé !

    • Le 29 août 2013 à 17:00, par mj En réponse à : TypoManiac

      Merci pour votre réponse.

      Tant pis pour la v3, j’essayerai de faire une mise à jour manuelle.

      Pour le menu je voulais en fait savoir comment surcharger les fichiers du plugin menu pour que le menu principal soit généré avec le markup de bootstrap, notamment au niveau des sous-menus. J’ai réussi à afficher le premier niveau sans problème, en revanche pour les sous-menus je n’ai pas encore compris comment y arriver mais je suis sur que j’en viendrai à bout ;)

    Répondre à ce message

  • Le 17 avril 2013 à 17:55, par Teenoo En réponse à : TypoManiac

    Bonjour,

    toujours autant séduite par le plug que l’on peut installer dans la racine de squelette comme un squelette à part entière.

    Avez-vous tenté d’installer un slideshow ? J’ai récupérer le code Boostrap, bien ajouté hors commentaire le fichier js carousel. Impossible d’obtenir un effet glissé, le reste marche. J’ai beau tourner le css et html dans tous les sens rien (logique c’est le même), j’ai mis à jour le code js, rien non plus...

    Merci :)

    Répondre à ce message

  • Le 24 janvier 2013 à 17:00, par flouvel En réponse à : TypoManiac

    (il serait peut être bien de scinder le perso.css en 2 : un perso.css avec des options faciles à modifier, taille, couleur, bandhaut (avec image ou photo, un truc comme ça http://blog.fr.twitter.com/), ... et un bootstrap.css compliqué à pas toucher. Je dis ça... perso, saurais-je ? mais pas le temps pour le moment)

    j’ai (encore !...) un peu modifié le perso.css :

    1° détail : les boites « pricing_box » (derniers articles en page d’accueil) se collaient au retour à la ligne, j’ai donc ajouté marging :
    perso.css ligne 41 :
    .pricing_box -webkit-box-shadow : 5px 8px 0px 0px black ;-moz-box-shadow : 0 8px 0px 0px #d3d3d3 ;box-shadow : 5px 8px 6px -6px #d3d3d3 ; -webkit-border-radius : 6px ; -moz-border-radius : 6px ;border-radius : 6px ; background :#e1e1e1 ; padding:10px 5px ; margin:10px 5px ; text-decoration : none ;

    2° cherchant à réduire l’espace sous la barre de menu, j’ai lu sur « http://www.siteduzero.com/tutoriel-3-683140-bootstrap-de-twitter-un-kit-css-et-plus.html?pdf=1&all=1 » qu’avec la v2.1 de bootstrap et navbar-static-top permet de fixer la barre en haut de la page en pleine largeur sans avoir à se soucier du padding
    j’ai ajouté cette navbar-static-top un peu partout dans la perso.css (que je joins à ce post)
    et du coup body /* padding-top : 60px ; 60px to make the container go all the way to the bottom of the topbar , inutile avec navbar-static-top v2.1*/
    et dans nav.html

    autre modif dans nav.html : sur smartphone je trouvais sympa d’avoir le champ Rechercher dans la barre de menu, je l’ai donc sorti de nav-collapse

    3° modif donc pour le petit triangle dans les sous menu
    /* debut petit triangle menu */
    .navbar .nav > li > .dropdown-menu:before
    (...)
    /* fin petit triangle menu */

    4° autres petites modif dont j’ avoue sais plus pourquoi ni si ça a moindre utilité ...)

    .dropdown-menu li > a:hover,
    .dropdown-menu .active > a,
    .dropdown-menu .active > a:hover,
    .dropdown-menu li > a:focus,
    .dropdown-submenu:hover > a
    color : #ffffff ;
    text-decoration : none ;
    background-color : rgba(0,0,0,0.5) ;

    .dropdown-menu .active > a,
    .dropdown-menu .active > a:hover
    color : #ffffff ;
    text-decoration : none ;
    background-color : #0088cc ;
    background-color : #0081c2 ;
    background-image : linear-gradient(to bottom, #0088cc, #0077b3) ;
    background-image : -moz-linear-gradient(top, #0088cc, #0077b3) ;
    background-image : -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)) ;
    background-image : -webkit-linear-gradient(top, #0088cc, #0077b3) ;
    background-image : -o-linear-gradient(top, #0088cc, #0077b3) ;
    background-repeat : repeat-x ;
    outline : 0 ;
    filter : progid:dximagetransform.microsoft.gradient(startColorstr=’#ff0088cc’, endColorstr=’#ff0077b3’, GradientType=0) ;

    .dropdown-menu .disabled > a,
    .dropdown-menu .disabled > a:hover
    color : #999999 ;

    .dropdown-menu .disabled > a:hover
    text-decoration : none ;
    cursor : default ;
    background-color : transparent ;

    .open
    *z-index : 1000 ;

    • Le 3 avril 2013 à 13:45, par flouvel En réponse à : TypoManiac

      Hello,

      1° erreur dans mon css ci dessus pour le .pricing_box : il faut margin:10px 0px ;
      2° ces .pricing_box ne doivent pas aller à la ligne sans ajouter une ligne div class=« row-fluid », sinon on a une marge gauche qui décale tout. Csqce : à priori pas d’autre solution que de faire une boucle par ligne

      ‹BOUCLE_3articles(ARTICLES) 0,3› ‹div class=« span4 pricing_box » etc.
      ‹BOUCLE_4articles(ARTICLES) 3,4› ‹div class=« span3 pricing_box » etc.

      3° si j’osais , si je pouvais je modifierai bien ça dans le svn ...
      4° et pour répondre aussi à Teenoo et comme je le disais dans mon message précédent, ce serait sans doute bien possible d’avoir le bootstrap.css (à jour ;-) d’un côté, et un perso.css facilement modifiable pour personnaliser d’un autre côté (par exemple pour les .pricing_box dont je découvre que c’est en fait très simple à manipuler). Et mettre en option les effets slabtext qui ne plaisent pas à tous ...
      Y a plus qu’à trouver le temps de s’y mettre ;-)

      à++

      François

    • Le 3 avril 2013 à 15:28, par davduf En réponse à : TypoManiac

      3° si j’osais , si je pouvais je modifierai bien ça dans le svn .

      Mais oui, oser, pouvoir, tout est recommandé ! Le svn est fait pour ça !
      Ce serait formidable.

    Répondre à ce message

  • Le 22 mars 2013 à 09:26, par Teenoo En réponse à : TypoManiac

    Bonjour,

    et merci pour cet excellent plugin. Je vois qu’il n’a pas été mis à jour depuis 7-8 mois, or Boostrap connait des améliorations régulières. Si je souhaite développer un site avec la dernière version, que dois-je changer ? faire une permut de tous les CSS avec ceux de Boostrap ? Pareil pour le js ? Autres choses ?

    Merci pour la réponse :)

    • Le 23 mars 2013 à 15:45, par davduf En réponse à : TypoManiac

      Bonjour Teenoo,

      Ravi que le plug in vous plaise !

      Logiquement, ça devrait marcher tel quel.
      Mais évenentuellement une permut de tous les CSS avec ceux de Boostrap serait une excellente idée.

      Tenez-nous au courant !

      Merci encore

    Répondre à ce message

  • Le 17 janvier 2013 à 22:03, par bcolo En réponse à : TypoManiac

    Bonjour

    Squelette très intéressant, mais je suis désolé, pour moi c’est horriblement compliqué à comprendre comment fonctionne la page sommaire.html. Je ne comprends pas pourquoi je tombe sur Titre et rubrique avec rien autour, et que mes articles apparaissent seulement en petit et en bas de page. Quant à la doc de Bootstrap, elle est en anglais et loin d’être claire...

    Bref, effectivement un plugin bootstrap documenté en français ne serait pas du luxe, mais du coup je ne vais sans doute pas utiliser typomaniac faute de comprendre comment il fonctionne. Dommage !

    Répondre à ce message

  • Le 7 septembre 2012 à 19:32, par flouvel En réponse à : TypoManiac

    Bonjour,
    je l’ai installé : http://blo.ouvaton.org/ ,
    remarqué une toute petite erreur : y avait toujours écrit « Pas utilisés » en bas de page, c’est à cause d’un « - » manquant dans footer-scripts.html
    à part ça je comprend, rien !
    Le « Seul travail nécéssaire à accomplir » est-il vraiment de modifier _seulement_ « les pages sommaire.html et inclure/nav.html en fonction de vos besoins et de vos goûts » ? j’ai vainement tenté de modifier les modèles articles rubriques etc., sans aucun effet !?...
    faut pas ?
    (idem pour les css (c’est sur Boostrap que ça se passe) ?
    en excusant mon ignorance crasse.

    • Le 7 septembre 2012 à 22:03, par davduf En réponse à : TypoManiac

      Bonjour,

      Visiblement, vous avez touché aux CSS. Mieux vaudrait pas ,-)
      Que voulez-vous faire ?

    • Le 8 septembre 2012 à 08:31, par flouvel En réponse à : TypoManiac

      Bonjour,
      non je n’ai pas touché aux css (par acquis de conscience tout remis d’origine).
      j’ai commencé par modifier sommaire.html et inclure/nav.html comme dit nécessaire.
      j’ai continué avec les modèles ariane.html rubrique.html pour des détails (maison/accueil) sans problème.
      j’ai continué avec article.html et là surprise, rien ! je peux tout effacer dans ce modèle <body> RIEN </body>
      résultat : aucune modif’ ?!...

      (ce que je veux faire ? un site pour mon assoc’ dont l’objet est de veiller à la préservation et l’entretien des massifs d’escalade de la forêt de Fontainebleau. Que TypoManiac soit adapté au mobile est très intéressant pour nous : photos prises sur le terrain envoyées géoréférencées directement sur le site web de l’assoc serait un de nos objectifs)

    • Le 8 septembre 2012 à 15:20, par davduf En réponse à : TypoManiac

      Bon, j’ai quand même l’impression que vous avez joué avec les CSS.
      Pouvez vous TOUT remettre :
      -  css de Typomaniac
      -  css de squelette-dist

      Ce que je vois, c’est que les articles s’affichent mais « oublient » la marge.

      Avez-vous bien un SPIP 3+ ?

    • Le 8 septembre 2012 à 21:52, par flouvel En réponse à : TypoManiac

      c’est fait, j’ai ... Quel C...!
      Le Pb venait d’une css perso et d’un modele article.htm envoyé par erreur dans le dossier squelettes de spip .

      Merci beaucoup de votre réponse et de ce classe plugin, je peux continuer.
      On peut bien modifier les modèles ariane.html, rubrique.html, articles.html etc. de typomaniaque à notre goût sans incidences catastrophiques ?
      J’aimerai n’avoir qu’ une colonne, ou 2 pour les rubriques, reduire la colonne de gauche, c’est possible sans toucher aux css ?

    • Le 9 septembre 2012 à 00:17, par davduf En réponse à : TypoManiac

      Aucun problème pour les colonnes.
      Regardez bien les rubrique.html / article.html, il suffit d’enlever les colonnes...

      Bonne chance !

    • Le 13 septembre 2012 à 13:25, par flouvel En réponse à : TypoManiac

      effectivement, aucun problème.
      Alors un nouveau :
      y a t-il moyen de créer des « Sub menus on dropdowns » dans le menu ?
      Cela semble possible (fonctionne dans l’exemple )
      Cela fonctionne sur cette page http://blo.ouvaton.org/plugins/auto/typomaniac/v1.1.1/submenu.html , en ajoutant un js/script.js et un css inclu (trouvé sur le net).
      Mais en supprimant ce css inclu et en l’ajoutant dans le css perso.css ligne 2877 à 2914 (aïe ! aïe ! oui je sais faut pas), ça marche plus.
      Ma tentative est-elle vouée à l’échec ? (cela semble un problème difficile en tout cas ...)

    • Le 14 septembre 2012 à 20:43, par flouvel En réponse à : TypoManiac

      La voie indiquée ci-dessus n’était (évidemment) pas la bonne (solution extérieur à bootstrap)
      J’ai eu mon sous-menus sur des listes déroulantes ( Sub menus on dropdowns ) en modifiant le css perso.css ainsi :
      télécharger bootstrap,
      ajouter les lignes 2889 à 2924 de bootstrap.css sur perso.css entre :

      .dropup .dropdown-menu,
      .navbar-fixed-bottom .dropdown .dropdown-menu {
       top: auto;
       bottom: 100%;
       margin-bottom: 1px;
      }

      et

      .typeahead {
       margin-top: 2px;
       -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       border-radius: 4px;

      et ajouter la ligne 2821 « .dropdown-submenu:hover > a » de bootstap.css à perso.css aprés :

      .dropdown-menu li > a:hover,
      .dropdown-menu .active > a,
      .dropdown-menu .active > a:hover,
      .dropdown-submenu:hover > a {

      (plus qu’un petit détail graphique à résoudre ...)

    • Le 14 septembre 2012 à 20:52, par davduf En réponse à : TypoManiac

      Merci pour l’astuce !

      Bonnes spiperies à toi !

    • Le 22 septembre 2012 à 09:17, par flouvel En réponse à : TypoManiac

      pour le petit détail graphique (pas de triangle supérieur dans les sous menus des listes déroulantes !) il faut conserver (cf bootstrap.css) .nav > li > dans le perso.css :
      .navbar .nav > li > .dropdown-menu:before (after) au lieu de seulement
      .navbar .dropdown-menu:before (after) actuellement dans perso.css
      sinon le petit triangle supérieur s’applique aux sous-menu.

      ajouter cette exemple à /inclure/nav.html :

      <ul class="nav">
      <li class="dropdown">
       <a href="#"class="dropdown-toggle" data-toggle="dropdown">Menu5<b class="caret"></b></a>
       <ul class="dropdown-menu">
        <li class="dropdown-submenu"><a href="">MenuavecSousMenu</a>
         <ul class="dropdown-menu">
         <li><a href="#">SousMenu</a></li>
         </ul>
        </li>
       </ul>
      </ul>
    • Le 27 septembre 2012 à 18:47, par davduf En réponse à : TypoManiac

      Merci !

      Bien joué !

    Répondre à ce message

  • Le 11 août 2012 à 15:35, par touti En réponse à : TypoManiac

    Coucou, c’est super et ça manquait tellement, merci bien !

    Pour qu’ici http://www.davduf.net/SPIP-pour-les-debutants
    la photo de l’écureuil sous firefox ne soit pas déformée en hauteur, j’ai ajouté

    mais je ne commit pas ne sachant pas la réaction des autres navigateurs.

    ++

    • Le 11 août 2012 à 16:09, par Maïeul En réponse à : TypoManiac

      normalement c’est interprété correctement par tout les navigateurs respectueux des spécifications css récentes (donc tous, sauf les vieux IE).

      Je pense que tu peux commiter

    • Le 11 août 2012 à 19:45, par davduf En réponse à : TypoManiac

      Merci d’avance touti ,-)

    • Le 12 août 2012 à 00:19, par touti En réponse à : TypoManiac

      Bon, ok, c’est cel’ qui l’dit qui y yeah :)

      http://zone.spip.org/trac/spip-zone/changeset/64719

    • Le 12 août 2012 à 09:19, par davduf En réponse à : TypoManiac

      Merci bien !
      Super !

      D.

    • Le 12 août 2012 à 10:52, par Maïeul En réponse à : TypoManiac

      après ce genre de petite corrections debug, le mieux est de changer le z du numéro de version dans le paquet.xml (et pas le y, contrairement à mon message de commit)

      http://zone.spip.org/trac/spip-zone/changeset/64725

    Répondre à ce message

  • Le 11 août 2012 à 13:56, par Valéry En réponse à : TypoManiac

    Merci ! Je vais le tester.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Compositions 2 et 3

    25 mars 2011 – 176 commentaires

    Ce plugin vous permet de définir plusieurs variantes de squelettes (nommées compositions) pour un même type d’objet SPIP. Dans l’espace privé, il est alors possible de choisir, dans un menu déroulant, la composition qu’on veut attribuer à chaque (...)

  • Configurer Sparkpost

    25 avril – 18 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Présentation Sparkpost est une société d’envoi de mailing https://www.sparkpost.com/ Sur les petits volumes ( <100.000 emails / mois), (...)

Ça spipe par là