Créer un menu off-canvas entièrement en css

Ce que j’aime par dessus tout avec CSS3, c’est cette capacité qu’il offre de nous affranchir de javascript pour tout ce qui touche aux animations. Après m’être penché sur une solution de menus accordéons en full css (dont je parlerai bientôt), je vous propose une version revisitée du menu « off canvas » via css3, sans javascript. Continuer la lecture de « Créer un menu off-canvas entièrement en css »

Créer son propre système de grille flexible avec SASS

Dans la boîte à outils de l’intégrateur, il y a beaucoup de choses : des frameworks html et css, des générateurs de dégradés de couleur, un ou plusieurs préprocesseurs… et surtout il y a les grilles responsives. Quand on travaille avec un framework css, ces dernières sont souvent (voire systématiquement ) incluses. Impossible par ailleurs de dénombrer les systèmes de grille existants tant il y en a. Ce qui est sûr, c’est que nous avons le choix ! Mais parfois, il arrive que l’on soit amené à créer sois même un système de grille pour des besoins très spécifiques… C’est ce qui m’est arrivé récemment.

C’est pourquoi je vous propose une approche de création de grille reposant sur SASS. Il est entendu que c’est faisable en CSS, mais c’est beaucoup plus rapide en SASS, c’est la beauté de la chose 🙂

Le découpage du travail sera comme suit : D’abord on définira les différentes variables nécessaires ainsi que les points de rupture de notre grille responsive. Ensuite, on s’attardera sur la mécanique standard pour la génération de la grille “desktop”. Enfin on fera de même pour nos media-queries.

Définition de notre grille : Elle sera responsive bien sûr, on pourra choisir combien de colonnes on souhaite, la taille des gouttières, la largeur globale du conteneur, et les comportements des colonnes sur les différents appareils.

Voici les variables que je définis en premier lieu :

On aura donc 12 colonnes, avec une gouttière de 1.2rem et une largeur maximum de 1200px. Ces valeurs sont suffisantes pour jeter les bases de la création de notre grille desktop. Ce que vous allons donc faire de ce pas :

Dans ce système, ce sont les paddings qui définissent la taille de la gouttière. Ce qui fait que l’on n’a pas à se casser la tête avec le calcul de marges, d’autant que ces dernières ne sont pas prises en compte par box-sizing: border-box. Et ça c’est c’est déjà un pas vers plus de flexibilité : on peut ajouter autant de colonnes que l’on souhaite à notre ligne. Par ailleurs, plus de row ou row-fluid à la Bootstrap 2 : désormais toutes nos lignes sont fluides. Point. Seul le conteneur définira la largeur maximale de rendu. Et étant donné que nos tailles sont calculées en % on est tranquilles 🙂

A présent il ne reste plus qu’à générer cette grille pour les tailles d’écran choisies :

Et c’est tout ! Bon on pourrait aller beaucoup plus loin en définissant des comportements plus spécifiques, mais la base est là. Voici le résultat final :

Il est entendu que la propriété flexbox tend à s’imposer pour ce qui est de la création de systèmes destinés à structurer le contenu. Je pense d’ailleurs qu’elle pourrait à terme remplacer nos systèmes de grille traditionnels. En revanche je pense que les systèmes comme celui que nous avons là on encore de beaux jours devant eux car ils restent à ce jour l’approche la plus stable car compatible avec n’importe quel navigateur / appareil.

Mais je me penche depuis quelques temps déjà sur flexbox, il n’est donc pas impossible que je fasse un article sur le sujet dans les semaines à venir 😉

Ajouter enclosure dans le flux RSS de WordPress pour les newsletters MailChimp

Si comme moi vous utilisez mailchimp, vous avez surement dû trouver rageant le fait de ne pas avoir la main sur les images par votre flux RSS WordPress dans votre newsletter. Qu’à celà ne tienne, voici un petit script à insérer dans le fichier functions.php de votre thème (via duogeekdevGitHub Gist)

Merci à  l’auteur du script 🙂

Utiliser SASS dans ses projets WordPress

Sass est devenu pour moi un outil du quotidien. Je l’utilise dans presque tous mes projets. Le fait est que je travaille beaucoup avec WordPress. Il est donc devenu évident qu’il fallait que je développe une méthodologie pour le faire entrer dans ces projets-ci. Aujourd’hui je vous propose de découvrir de quelle manière intégrer Sass dans vos projets WordPress. Continuer la lecture de « Utiliser SASS dans ses projets WordPress »

En attendant Noël, je vous offre un calendier de l’Avent 2.0

Chaque année je me dis que je vais faire des cartes de vœux à envoyer à mes proches, mes amis, ma famille, connaissances, partenaires. Et bien sûr je ne le fais jamais. Cette année, j’offre donc à toutes et tous un calendrier de l’Avent interactif. Vous pourrez chaque jour accéder à une surprise supplémentaire 🙂 Les cartes déjà découvertes resteront affichées tant que vous ne viderez pas votre cache navigateur.

Cliquez ici pour accéder au calendrier.

Joyeuses fêtes 🙂

Filtrer ses portfolios Jetpack grâce à Isotope

Wordpress

Desire Portfolio Filter est un nouveau plugin qui ajoute à Jetpack les fameux filtres de la librairie javascript Isotope pour trier ses projets de portfolio.

Je trouvais que ce qui manquait réellement à Jetpack Portfolio, c’était la possibilité de filtrer ses projets en fonction du type par exemple. Et comme je trouvais dommage d’installer un autre plugin de portfolio juste pour cette featurette, j’ai opté pour un plugin maison qui fait appel aux portfolio Jetpack. Donc vous ne pouvez pas utiliser ce plugin sans Jetpack.

Pour l’heure, il utilise un template spécifique pour l’affichage des portfolios, qu’il faut choisir sur la page d’affichage lors de l’édition, en remplacement de l’utilisation du shortcode fourni par automattic. Cela implique que l’on n’a plus la main sur les portfolios qu’on affiche. Mais une version est en cours de développement afin de rendre à César ce qui est à César, et offrir à nouveau cette possibilité.

Télécharger le plugin sur :


GitHub_Logo

Ou sur :
wordpress-logo-hoz-rgb

Je vous laisse découvrir et me faire vos retours 🙂