Images responsive, flexbox et souci de ratio d'affichage Sur plusieurs navigateurs (sauf Firefox) nous avons constaté au sein de différents projets à l'agence un petit bug concernant le module CSS3 Flexbox. Le constat est celui-ci : lorsque l'on place une image responsive directement dans un container en flexbox, l'image s'affiche avec un petit souci de proportions : Pour en savoir un peu plus sur l'explication de ce comportement (qui n'est en fait pas un bug) je vous laisse lire cet article. En résumé, la spécification Flexbox a changé il y a quelques temps et les flex-items bénéficient désormais d'un min-height / min-width de valeur auto (et non plus 0 comme avant), et ça change tout ! En effet, quand la valeur de min-height était 0, les éléments flex-items pouvaient (devaient) se réduire autant que nécessaire, notre image préservait donc son ratio en réduisant leur hauteur. À présent la taille intrinsèque des éléments tels que <img>.ou <input> est préservée par défaut.
Se lancer dans Sass Qui a encore peur aujourd'hui de Sass et des préprocesseurs en général ? David Demaree nous montre dans cette introduction claire et complète la simplicité et l'utilité de Sass. Indispensable, vraiment. Par David Demaree React – comment j’ai appris à ne plus m’en faire et à aimer la bombe Cela fait maintenant plusieurs années que vous avez entendu parler (et que vous utilisez sans doute déjà) des frameworks spécifiques pour les développements front-end tels que Backbone, Ember ou AngularJS. Depuis quelques temps, un nouveau venu fait beaucoup parler de lui : React. React est une librairie javascript open source dédiée à l’écriture d’interfaces utilisateurs. Elle est née de la collaboration entre Instagram et Facebook et sa première release date de Décembre 2013. Depuis sa sortie, React a fait beaucoup d’émules et est utilisé en production chez Facebook mais aussi chez Netflix, Yahoo, KhanAcademy et AirBnB.
Oui, Flexbox est buggué – La Tête dans le Flux À force de promettre monts et merveilles à propos de Flexbox, on finit par croire que ce module de positionnement est parfait et dénué de bugs. Bah non, sans surprise, Flexbox est buggué. Comme tous les autres. Ce n’est pas la faute à Flexbox hein, mais celle des navigateurs… même si au fond ça ne change pas grand chose pour nous. Bref, aujourd’hui encore je viens de tomber sur un cas de figure où l’on se rend compte avec douleur que certaines parties des spécifications ne sont pas interprétées à l’identique par l’ensemble des navigateurs modernes. Ici, il s’agit d’une combinaison de parent en flex-direction: column et d’enfants en flex:1.
Simplifiez-vous la vie avec LESS La partie fun du cours commence. Vous allez apprendre à utiliser LESS pas à pas. On commence ? Veuillez noter que CSS est totalement compatible avec LESS, ce qui signifie que vous pourrez tout à fait utiliser du CSS pur dans votre code si vous le souhaitez. Utiliser un fichier Google Spreadsheet comme source de données JSON Les feuilles de calcul Google Drive ont été adoptées par bon nombre d’utilisateurs. Au delà de l’utilisation bureautique, vous pouvez vous en servir comme source de données pour vos projets web. Ça ne remplace pas un vrai backend, mais a l’avantage d’être connu des utilisateur, rapide à implémenter, simple à utiliser. Pour ma part, je m’en sers assez souvent lors de création de maquette ou pour des petits projets de page n’ayant pas de backend. Adjoint à un cache front, ça fait le travail rapidement et bien. Principe de fonctionnement
Utiliser Grid ou Flexbox ? Rachel Andrew est certainement le plus ardent des promoteurs de CSS Grid Layout. Elle répond ici à la question de savoir quand et comment utiliser Flexbox ou CSS Grid Layout. Par Rachel Andrew Dans ma récente présentation à Fluent Conf, j’ai montré les caractéristiques communes et les différences existant entre Flexbox et CSS Grid Layout. Actuellement, nous ne pouvons utiliser CSS Grid Layout qu’en activant les fonctionnalités expérimentales des navigateurs, cependant lorsque Grid sera supporté, on pourra parfois s’interroger pour savoir lequel utiliser, de Grid ou de Flexbox. Découvrir Susy Susy vous permet de créer vos layouts à partir de grilles. Fonctionnant avec Sass, Susy est incroyablement flexible et devrait répondre à tous vos besoins. Introduction claire par Zell Liew
PhoneGap Build + Framework7 = solution gagnante Pour faire suite à l’article PhoneGap (Cordova) vs Native-Application je vous propose d’allier PhoneGap Build avec Framework7. En effet PhoneGap Build permet de générer des applications natives pour tout type de mobile/tablette à partir de sources HTML/CSS/JS, mais reste à faire ces sources…! C’est ici qu’intervient Framework7. Qu’est-ce que Framework7 me direz-vous ? Et bien comme son nom l’indique c’est un framework de développement de web-application mobile orienté design iOS.
Le petit flexbox illustré chez Vincent Valentin. Nantes, le 7 septembre 2015. Flexbox est un nouveau module d’affichage CSS qui apporte quelques possibilités graphiques jusqu’alors impossibles et qui permet aussi de grandement simplifier les constructions habituelles. Son principal frein reste le support limité à IE 10+ (pas de souci pour la majorité des autres navigateurs), mais au regard des nouveautés offertes, il est d’ores et déjà intéressant d’en comprendre le fonctionnement et de résoudre certaines problématiques grâce à celui-ci. Déclencher un affichage flexbox passe par la propriété display. Flexbox diffère un peu des types d’affichages habituels car le changement va ici non seulement impacter l’élément sélectionné, mais également ses enfants directs. Ainsi on parlera de flex-container et de flex-items ; et il sera possible de passer des propriétés spécifiques à ces deux composants.