On entend partout parler de CMS Headless, de Content As A Service, mais qu’en est-il exactement ? Qu’est-ce que c’est, et surtout quel intérêt et quel impact pour les développeurs et les éditeurs de contenus ? Continuer la lecture de Les CMS Headless, les CMS du future ?
Configurez facilement l’envoi de mail sur vos sites
S’il y a bien une chose casse pieds à configurer lorsqu’on lance un site, c’est la configuration du sendmail. Oui, parce que pour envoyer des mails et faire en sorte qu’ils arrivent bien dans la boîte et non dans les spams, c’est quand même loin d’être simple, surtout quand on est profane. Continuer la lecture de Configurez facilement l’envoi de mail sur vos sites
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 :
1 2 3 4 5 6 7 | /* 1. valeurs de grille par défaut */ $cols: 12 !default; $gutter-width: 1.2rem !default; $max-width: 1180px !default; |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /* 2. Définition de la grille */ .container { margin: 0 auto; width: 90%; max-width: $max-width; } .row { margin-left: 0; margin-right: 0; .row { margin-left: -$gutter-width / 2; margin-right: -$gutter-width / 2; } &:after { content: ""; display: table; clear: both; } /* on divise la gouttière par 2 car on en retire une partie de chaque côté de la colonne */ .col { float: left; box-sizing: border-box; padding: 0 $gutter-width / 2; margin-left: auto; left: auto; right: auto; /* On va boucler sur les colonnes et calculer automatiquement leur taille en pourcentage * un peu comme on pourrait le faire en javascript par exemple */ $i: 1; @while $i <= $cols { $perc: unquote((100 / ($cols / $i)) + "%"); &.small-#{$i} { width: $perc; } $i: $i + 1; } } } |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | @media screen and (min-width:721px) { $i: 1; @while $i <= $cols { $perc: unquote((100 / ($cols / $i)) + "%"); &.medium-#{$i} { width: $perc; } $i: $i + 1 } } @media screen and (min-width:1025px) { $i: 1; @while $i <= $cols { $perc: unquote((100 / ($cols / $i)) + "%"); &.large-#{$i} { width: $perc; } $i: $i + 1; } } |
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 :
1 2 3 4 5 6 7 | /* 1. valeurs de grille par défaut */ $cols: 12 !default; $gutter-width: 1.2rem !default; $max-width: 1200px !default; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | /* 2. Définition de la grille */ .container { margin: 0 auto; width: 90%; max-width: $max-width; } .row { margin-left: 0; margin-right: 0; .row { margin-left: -$gutter-width / 2; margin-right: -$gutter-width / 2; } &:after { content: ""; display: table; clear: both; } /* on divise la gouttière par 2 car on en retire une partie de chaque côté de la */ .col { float: left; box-sizing: border-box; padding: 0 $gutter-width / 2; margin-left: auto; left: auto; right: auto; /* On va boucler sur les colonnes et calculer automatiquement leur taille en pourcentage * un peu comme on pourrait le faire en javascript par exemple */ $i: 1; @while $i <= $cols { $perc: unquote((100 / ($cols / $i)) + "%"); &.small-#{$i} { width: $perc; } $i: $i + 1; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* 3. Media Queries */ @media screen and (min-width:721px) { $i: 1; @while $i <= $cols { $perc: unquote((100 / ($cols / $i)) + "%"); &.medium-#{$i} { width: $perc; } $i: $i + 1 } } @media screen and (min-width:1025px) { $i: 1; @while $i <= $cols { $perc: unquote((100 / ($cols / $i)) + "%"); &.large-#{$i} { width: $perc; } $i: $i + 1; } } } } |
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 duogeekdev – GitHub Gist)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?php function add_featured_image_in_rss() { if ( function_exists( 'get_the_image' ) && ( $featured_image = get_the_image('format=array&echo=0') ) ) { $featured_image[0] = $featured_image['url']; } elseif ( function_exists( 'has_post_thumbnail' ) and has_post_thumbnail() ) { $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'post-thumbnail' ); } elseif ( function_exists( 'get_post_thumbnail_src' ) ) { $featured_image = get_post_thumbnail_src(); if ( preg_match( '|^<img src="([^"]+)"|', $featured_image[0], $m ) ) $featured_image[0] = $m[1]; } else { $featured_image = false; } if ( ! empty( $featured_image ) ) { echo "\t" . '<enclosure url="' . $featured_image[0] . '" />' . "\n"; } } add_action( 'rss2_item', 'add_featured_image_in_rss' ); |
Merci à Sushi l’auteur du script 🙂
Designers: earn your seat at the table – InVision Blog
Design is a critical skillset for operating in the business world, but it’s up to you as the designer to show and tell this to your stakeholders.
Source : Designers: earn your seat at the table – InVision Blog
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
Edito – Calendrier de l’avent 2015 et nouvelle année
Bonne année à toutes et tous ! Pas de rétrospective dans cet article, mais un petit retour le calendrier de l’avent et un point sur les perspectives du blog à l’horizon 2016. Continuer la lecture de Edito – Calendrier de l’avent 2015 et nouvelle année
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 🙂