Afficher / masquer votre grille de base avec jQuery

Si vous travaillez avec une grille pour harmoniser la disposition des blocs sur la page, vous passez certainement du temps à afficher puis masquer cette grille pour vérifier que tout est en ordre. Pour cela on peut ajouter une classe CSS dans le code HTML ou mettre entre commentaires une ligne concernant le `background` de la page dans la feuille de style… Les deux solutions sont assez fastidieuses. C’est pourquoi, je vous propose une petite astuce toute simple qui s’applique à tout type d’intégration avec toutefois un bonus pour WordPress que vous adapterez sans peine à votre CMS préféré.

Voici le code à ajouter dans votre template WordPress si vous voulez afficher ou masquer la grille en production. Si vous travaillez en local (ou si vous n’utilisez pas WordPress), supprimez le code PHP :

<?php if ( is_user_logged_in() ) : ?>
    <a id="displayGrid" href="#displayGrid">Afficher/masquer la grille</a>
<?php endif; ?>

Le bout de code jQuery pour gérer l’événement :

// Affichage de la grille si connecte
$("#displayGrid").click(function() {
    $("html").toggleClass("display-grid");
});

La règle CSS à mettre dans votre feuille de style :

.display-grid #container {
    background: url(pix/grid.png);
}

Pour que le lien vous suive quand vous faites défiler la page :

#displayGrid {
    position: fixed;
}

Mise en page alternative

Avec un peu d’astuce et d’espièglerie vous trouverez rapidement de nombreuses applications à cette astuce. Je pense notamment à la possibilité de proposer une mise en page CSS alternative aux visiteurs.