A comprehensive and documented article on images on the web, their use and optimization.

Some solutions to common layouting issues

"As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours."

CheatSheet for flex

CheatSheet for grid

The journey to Thumbor, part 3: Development and deployment strategy

Welcome to Infusion: a documentation builder for inclusive designers and those trying to be inclusive designers. These are Infusion’s docs, but they are also an example of a site built with Infusion. Here are some of its features:
Built with Hugo, so easy to structure content and fast to compile it
Available to read offline, as a Progressive Web App
Include encapsulated live demos, inline with your markdown, using Shadow DOM
Quickly include WCAG and Inclusive Design Principles references
A responsive, screen reader and keyboard accessible static site as output
Automated Github Pages deployment
Includes a single-page printable version suitable for PDF conversion

Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.

Un logo officiellement non-officiel pour un terme qui n'appartient à personne.

"In the previous article in this series we took a look at the introduction to the grid spec, and in particular why we have grid layout as well as flexbox. This time I am taking a look at the background and motivation section, which gives some examples of the sort of problems Grid aims to solve."

A collection of patterns & modules for responsive emails

CSS Grid Garden est un jeu où on écrit du code CSS pour faire pousser des carottes. Il rejoint Flexbox Defense ou Flexbox Froggy dans la galaxie des jeux éducatifs à CSS.

"Understanding and using CSS Grid is easier than you might expect."

"The website won’t be running on WordPress anymore; in fact, it won’t have a back end at all. We are moving to a JAMstack: articles published directly to Netlify CDNs, with a custom shop based on an open-sourced headless E-Commerce GoCommerce and a job board that’s all just static HTML; content editing with Netlify’s new open-source, Git-Based CMS, real-time search powered by Algolia, full HTTP/2 support, and the whole website running as a progressive web app with a service worker in the background (thanks to the awesome Service Worker Toolbox library)"

Une collection Codepen concernant l'utilisation de Grid Layout. A ouvrir avec un navigateur qui supporte la fonctionnalité, bien sûr : http://caniuse.com/#feat=css-grid

"Yes, flexbox came along and I used it for some pieces of the layout, but it didn’t change the way I laid out entire pages. Next month that’s changing.

CSS Grid is landing in Chrome and Firefox after years of tireless work by specification authors, developers who gave feedback, and browser implementers."

Ensemble de plugins permettant d'inclure à son site des tableaux RWD. Plusieurs modes d'adaptation suivant les largeurs d'écran et les besoins fonctionnels.

"These great responsive websites go beyond the hamburger menu, and showcase really intuitive mobile navigation."

"The good news is that our old rule of thumb—start at 16pt—is still a pretty good one, at least for users on laptops, desktops and phones. But if you are designing for a conference room PC, no text should ever be smaller than 26pt Arial, and most text should be at least 33pt."