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 😉

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 🙂

Astuce – Faire fonctionner dailymotion avec prettyphoto

Je n’aime pas beaucoup prettyphoto, si vous avez lu l’article précédent, vous connaissez déjà où va ma préférence 😉 Cependant, quand on travaille avec des thèmes WordPress qu’on n’a pas soi même développés, bah des fois, on n’a pas le choix. Et si en plus les-dits thèmes ont été développés par des personnes non francophones(philes ?), vous devinerez aisément qu’ils supportent rarement (jamais) les services comme dailymotion. Alors le combo prettyphoto + dailymotion, c’est le calvaire assuré. Alors voici la solution : Continuer la lecture de « Astuce – Faire fonctionner dailymotion avec prettyphoto »

Au moins une raison possible au fait que fancybox ne s’exécute qu’au second click

Je vais parler aujourd’hui d’une petite aventure qui m’est arrivée avec fancybox. Pour les besoins d’un projet WordPress utilisant le plugin Team, j’avais pour mission de masquer les éléments affichés sauf la photo, puis d’afficher ces éléments dans une fancybox au click sur la photo. Problème : fancybox ne s’exécute qu’au second click. Et il y a une raison à celà ! Continuer la lecture de « Au moins une raison possible au fait que fancybox ne s’exécute qu’au second click »

Changer l’URL de son site

Quand l’url de son site change, on se retrouve systématiquement avec des liens morts, ou en tout cas qui ne pointent pas à l’endroit voulu. Pour éviter ça, il existe le script http://interconnectit.com  dont j’ai déjà parlé dans l’article précédent. Cette fois-ci je vais aller un peu plus dans le détail avec quelques captures d’écran à l’appuie 🙂 Continuer la lecture de « Changer l’URL de son site »