Raccourci colonne

Obtenez des colonnes responsives lors de la rédaction de votre texte avec le raccourci <colonne>Texte</colonne>

Un plugin simple pour obtenir des colonnes, notamment dans l’utilisation des squelettes HTML5up. Les éléments peuvent être extraits pour servir par ailleurs.

Le but était de rendre facile une présentation d’images et de textes en colonnes. Voir notamment l’adaptation de https://html5up.net/uploads/demos/editorial/elements.html qui était difficile à gérer par exemple en ajoutant des champs supplémentaires à l’article. L’avantage du plugin est de laisser la liberté à la rédacteurice pour la gestion des colonnes.

Usage

Téléchargez le plugin et l’installer comme tous les plugins SPIP.
Insérez vos colonnes dans votre texte, testez en ligne en réduisant la dimension de la fenêtre de votre navigateur.

<colonne>colonne 1</colonne>
<colonne>colonne 2</colonne>
<colonne>colonne 3</colonne>

du texte en paragraphe

<colonne><imgXX> image colonne A</colonne>
<colonne><imgXY> image colonne B</colonne>

Au besoin se rendre sur la page de démo ?page=demo/colonne

Méthode de détection

Ce plugin détecte grace à TextWheel la présence de la balise <colonne> et transforme son contenu en div englobant possédant la class « .spip_colonne ». A l’affichage un javascript va compter le nombre de colonnes présentes qui se suivent et insérer les colonnes dans un div de class ".row". Chaque colonne est gérée alors par des class qui dépendent de la largeur de l’écran.

CSS et SCSS

La grille CSS utilisée est divisée en 12, ainsi la détection de deux colonnes attribue les class « col-6 col-12-small » ce qui signifie qu’en petite largeur d’écran la colonne prend 12 divisions, alors que trois colonnes auront les class « col-4 col-12-medium » et prendront toute la largeur de l’écran en mode tablette.

Le fichier spip_colonne.scss fait appel aux fichiers HTML5up nécessaires qui génèrent les class depuis les variables SCSS avec le plugin SCSS-PHP.

@import 'css/libs/skel';
@import 'css/libs/breakpoints';
@import 'css/libs/html-grid';

/*
 *  HTML5 UP
 *  html5up.net
 *  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */

@include skel-breakpoints((
  xlarge: '(max-width: 1680px)',
  large: '(max-width: 1280px)',
  medium: '(max-width: 980px)', /* .col-12-medium les colonnes s'annulent */
  small: '(max-width: 736px)', /* .col-12-small les colonnes s'annulent */
  xsmall: '(max-width: 480px)',
  xxsmall: '(max-width: 360px)',
  xlarge-to-max: '(min-width: 1681px)',
  small-to-xlarge: '(min-width: 481px) and (max-width: 1680px)'
));

// Component.
@import 'css/components/row';

Exemple en ligne

Aucun exemple en ligne, ajoutez le vôtre :)

Discussion

3 discussions

  • 3

    Le plugin a l’air très bien.
    Malheureusement pour moi (sur un SPIP 3.1), le div.row englobant n’est pas créé. Mais j’ai bien les div.spip_colonne.
    Pour info, j’ai installé Raccourci colonne et SCSS PHP, mais pas HTML5up.
    Je comptais gérer les colonnes avec bootstrap en personnalisant spip_colonne.js.

    • Je ne vois pas comment t’aider, tu as un lien ? le row est créé en js, quel message de console as-tu ?

      Et sinon, il est toujours judicieux de se mettre à la dernière version stable SPIP :)
      ++
      touti

    • Merci pour ta réponse rapide.
      J’ai suivi les conseils de Philippe (plus bas dans ce forum), j’ai intégré le fichier spip_colonne.js dans mon squelette, et là, ça fonctionne… Je ne sais pas pourquoi.
      J’ai stylé les css en bootstrap dans le fichier js, ça marche très bien.

      Le seul bug que je ne comprends pas, c’est lorsque les colonnes commencent toutes par un intertitre (h3), la présence d’une balise <p></p> vide en début de toutes les colonnes sauf la première…

    • Résolu en séparant bien les balises dans le champ texte.
      Après des tests, ce bug ne vient pas du plugin.

      <colonne>
      
      Titre (le h3)
      
      Texte
      
      </colonne>
      
      ...

    Répondre à ce message

  • Salut,
    Bravo pour ce plugin...

    Jusqu’à maintenant, j’avais créé mon mini « bootstrap »...

    <div class="celltop mr1">

    Ma classe « celltop » (comprise dans une div « table ») réagis comme une colonne, en plus d’un « margin-right » de 1%... ça fonctionne bien mais le nombre de colonnes n’évoluent pas selon la largeur.

    Ton plugin le fait et c’est très bien !

    Répondre à ce message

  • Merci pour ce plugin très pratique. Pour que ça fonctionne, il faut copier les css et le javascript contenus dans dossier « plugin/colonne » vers le dossier squelettes et les appeler dans le head.html

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom