SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 89 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > Base CSS pour SPIP > Base CSS 2

Base CSS 2

30 mai 2011 – par tetue – 13 commentaires

15 votes

Framework CSS dynamique et paramétrable : reset de Meyer, base typographique Blueprint optimisée pour SPIP, etc.

Ce petit framework CSS pour SPIP 2 fournit une base de travail pour l’intégration, sous la forme d’un jeu de feuilles de style dynamiques et paramétrables, proposant les pré-réglages fondamentaux, notamment typographiques.

Note de version

Dans la continuité de la précédente, cette seconde version propose :

  • une base typographique complète et harmonieuse, encore plus proche de Blueprint,
  • sans plus aucune image (plus de puce sur les listes, ni de guillemets sur les citations), ni autre fioriture,
  • avec un meilleur support d’IE, sans hack,
  • prise en charge de l’impression (sans feuille dédiée),
  • et adopte le reset 2 d’Eric Meyer
  • et certaines bonnes pratiques du HTML5 Boilerplate.

Bref, que du bon !

Attention : ce plugin distribue un framework CSS. Il n’y a pas lieu de le mettre à jour après l’avoir installé sur votre site ! La compatibilité avec Pétronille 1 n’est pas garantie, en particulier au delà de la révision 45096.

Mise en service

Version 2.3.8
Base CSS pour SPIP 2
  1. Ce plugin s’installe et s’active comme n’importe quel autre
  2. Si vous partez de la dist de SPIP, pensez à désactiver toute autre feuille de style, en particulier spip_style.css, sans quoi il risque d’être sans effet
  3. Un panneau de config permet de régler la taille de typo, l’interlignage, la police, les couleurs, etc.
  4. Videz les caches (SPIP et navigateur)
  5. Prévisualisez à cette page ?page=demo/typo
  6. Construisez ensuite votre habillage sur cette base, dans votre propre feuille de style, style.css, comme d’habitude

Démo et kit d’intégration

Demo statique
Kit statique (HTML/CSS/JS) de démarrage pour l’intégrateur

Une démo statique est disponible à part. C’est une extraction figée des feuilles de styles générées par ce plugin, avec des gabarits HTML exemplaires et commentés, utilisables hors SPIP. Elle peut donc servir de kit de démarrage pour l’intégrateur.
Voir aussi la doc dédiée de cette rubrique : « Arborescence de l’intégration », « Ordre d’appel des feuilles de style », etc.

Dans SPIP, prévisualisez en affichant les pages :
-  ?page=demo/typo
-  ?page=demo/form

Vous pouvez aussi installer la base de démarrage (sur un SPIP vide), qui met quelques intéressantes pages de test à disposition, dont une « charte typo » qui présente un échantillon de chacun des enrichissements typographiques disponibles nativement dans SPIP (voir exemple de charte typo) et des alignements d’images (voir exemple d’alignements d’images).

Comment utiliser une grille CSS dans SPIP ?

Pourquoi n’y a-t-il pas de grille dans ce framework ? Parce qu’il existe déjà bien des grilles CSS, parce que vous avez sans doute vos habitudes et que ce petit framework veut limiter les contraintes et vous laisser libres de choisir ce qui vous arrange.

Vous pouvez compléter cette base avec un autre framework CSS et plus particulièrement par la grille de votre choix. Il suffit pour cela de déposez les feuilles de style voulues dans dossier « squelettes », en les renommant selon la nomenclature Daisy : grid.css, layout.css... Elles seront alors automatiquement appelées dans les squelettes.

Voir en ligne : http://plugins.spip.net/basecss

Dernière modification de cette page le 11 juin 2012

Retour en haut de la page

Vos commentaires

  • Le 3 septembre 2012 à 14:56, par Kyomii En réponse à : Base CSS 2

    bonjour,

    Je n’ai pas l’impression que le plugin fonctionne avec des sites mutualisé, (je l’utilise avec des sites non mutualisés sans problème) en regardant le fichier source de ma page je m’aperçois que les fichiers css générés automatiquement ne pointent pas vers le cache de mon site mutualisé.

    Merci de votre aide.

    Répondre à ce message

  • Le 6 décembre 2011 à 16:01, par bruno En réponse à : Base CSS 2

    Bonjour et merci pour ce plugin.
    Question tres bete : je ne trouve pas le panneau de config

    Merci
    Bruno

    • Le 6 décembre 2011 à 16:23, par tetue En réponse à : Base CSS 2

      C’est accessible par le menu « Squelettes > Base CSS » si tu as la nouvelle navigation privée. Sinon, il faut te rendre dans le panneau d’admin des plugins et cliquer sur le picto représentant des outils, calé à droite du nom du plugin :P

    • Le 6 décembre 2011 à 16:28, par bruno En réponse à : Base CSS 2

      merci pour la réponse et la rapidité

    • Le 6 décembre 2011 à 16:31, par tetue En réponse à : Base CSS 2

      Je t’en prie.
      N’hésite pas à faire un retour d’utilisation :)

    Répondre à ce message

  • Le 9 août 2011 à 11:43, par okoweb En réponse à : Base CSS 2

    Merci pour cette base, mais je souhaite savoir l’interet de ce bout de code, un attribut class dans une balise <html> :

    <!--[if lt IE 7 ]> <html dir="ltr" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" class="ltr fr no-js ie6"> <![endif]-->
    <!--[if IE 7 ]> <html dir="ltr" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" class="ltr fr no-js ie7"> <![endif]-->
    <!--[if IE 8 ]> <html dir="ltr" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" class="ltr fr no-js ie8"> <![endif]-->
    <!--[if IE 9 ]> <html dir="ltr" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" class="ltr fr no-js ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html dir="ltr" lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" class="ltr fr no-js"> <!--<![endif]-->

    Meilleures salutations

    • Le 9 août 2011 à 13:54, par tetue En réponse à : Base CSS 2

      Où avez-vous eu ce code ?

      Pour l’expliquer, voici l’article de référence : Conditional stylesheets vs CSS hacks? Answer: Neither!, et un autre en français Sélecteurs conditionnels pour IE.

    • Le 12 août 2011 à 12:44, par Okoweb En réponse à : Base CSS 2

      dans demo-base css

    • Le 12 août 2011 à 12:51, par tetue En réponse à : Base CSS 2

      Ah oui, exact ! Dans ce cas, il y a l’URL de doc de référence juste au dessus du code en question ;)
      Peut-être faut-il ajouter celle de l’article français ?

    • Le 12 août 2011 à 12:55, par Okoweb En réponse à : Base CSS 2

      >Peut-être faut-il ajouter celle de l’article français ?
      J’attends vivement. Merci

    Répondre à ce message

  • Le 2 juin 2011 à 21:33, par Renée Picard En réponse à : Base CSS Pétronille 2

    Bonjour

    J’ai réussi à installer la grille blueprint et à faire (en local) un site en 3 colonnes. Maintenant je veux mettre de la couleur et des dessins. Je ne sais ou ajouter tout cela. Logiquement, j’essaie avec squelettes/css/layout.css mais je ne suis pas capable de mettre un fond à body ?

    Puis-je avoir des explications supplémentaires ?
    Merci

    RP

    • Le 2 juin 2011 à 21:42, par Renée Picard En réponse à : Base CSS Pétronille 2

      Ok j’ai trouvé comment faire. Il faut laisser les

      page ... même si on utilise la grille.
    • Le 6 juin 2011 à 15:15, par tetue En réponse à : Base CSS Pétronille 2

      Je n’ai pas compris vos messages, mais tant mieux si vous avez réussi à faire ce que vous souhaitiez :)

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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

  • Jeux pour SPIP 3

    27 juillet 2012 – 53 commentaires

    Un portage pour SPIP 3 du plugin Jeux a été fait. Explications et nouveautés. Cet article concerne une mise à jour du plugin Jeux dont la description complète est disponible ici : Des jeux dans vos articles !. Le code du plugin Jeux est un code (...)

  • Plugin Vidéo(s)

    23 novembre 2010 – 704 commentaires

    Interface de gestion et modèle d’insertion des vidéos : Dailymotion Vimeo Youtube Modèle de la balise HTML5 video avec alternative flash html5media : Lecture HTML5/Flash pour tout navigateur des fichiers MP4/H264/Ogg/WebM/Mkv Support mobile, iPad, (...)

  • Vidéo Accessible

    6 avril 2011 – 168 commentaires

    Un plugin pour faciliter la diffusion de vidéos accessibles. Accessibilité des vidéos Accessibilité de la vidéo Afin d’être pleinement accessible, une vidéo (composée d’images et de sons) doit répondre à plusieurs critères. Le critère de base est (...)

  • Groupes de mots clés arborescents

    26 juillet 2012 – 37 commentaires

    Ce plugin permet de gérer une arborescence de groupes de mots clés. Les sous groupes de mots héritent des propriétés du groupe racine (sur quoi peut on le lier ? peut il y avoir un ou plusieurs mots). Les formulaires de liens qui permettent de lier (...)

  • Mailshot

    16 janvier 2013 – 336 commentaires

    Ce plugin prend en charge l’envoi en nombre d’info-lettres par email. Mailshot permet l’envoi en nombre d’emails au moyen d’un SMTP (ou d’un service externe) dédié à cet effet. Il permet de limiter la cadence d’envoi. Enfin, ce plugin implémente la (...)