Jack in the flexbox
Un tunnel d'achat flexible

Ce module de 5 étapes est une simple liste numérotée (<ol><li>). L'étape en cours est marquée d'une classe “.is-current” et toutes les étapes suivantes sont semi-opacifiées.

Voici ce qui a été mis en oeuvre

Flexbox pour la disposition générale
flex:1 sur les </li><li> pour les répartir, ainsi que sur les li::after pour générer la ligne continue ou discontinue entre les étapes
CSS counters pour la génération et l'affichage des chiffres
pas de JavaScript ni d'images
compatibilité sur les navigateurs classiques (IE10+)
Le lien CodePen : http://codepen.io/raphaelgoetter/pen/MaJzyB?editors=110

Un tunnel d'achat flexible

Ce module de 5 étapes est une simple liste numérotée (<ol><li>). L'étape en cours est marquée d'une classe “.is-current” et toutes les étapes suivantes sont semi-opacifiées.

Voici ce qui a été mis en oeuvre

  • Flexbox pour la disposition générale
  • flex:1 sur les </li><li> pour les répartir, ainsi que sur les li::after pour générer la ligne continue ou discontinue entre les étapes
  • CSS counters pour la génération et l'affichage des chiffres
  • pas de JavaScript ni d'images
  • compatibilité sur les navigateurs classiques (IE10+)

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/MaJzyB?editors=110

tunnel steps counters

des gouttières sans se prendre la tête

La propriété flex-shrink dont la valeur par défaut est &ldquo;1&rdquo;, permet à un enfant flexbox de se compresser automatiquement en absorbant la place manquante.

Cette particularité peut être exploitée de manière pratique lorsque vous disposez de blocs dimensionnés (width) de façon à ce qu'ils occupent tout l'espace disponible&hellip; tout en souhaitant créer des espaces entre ces blocs.

Ils se compressent alors automatiquement et de manière homogène sans que vous ayez besoin de recalculer leur largeur.

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/bdYOjy?editors=110

des gouttières sans se prendre la tête

La propriété flex-shrink dont la valeur par défaut est “1”, permet à un enfant flexbox de se compresser automatiquement en absorbant la place manquante.

Cette particularité peut être exploitée de manière pratique lorsque vous disposez de blocs dimensionnés (width) de façon à ce qu'ils occupent tout l'espace disponible… tout en souhaitant créer des espaces entre ces blocs.

Ils se compressent alors automatiquement et de manière homogène sans que vous ayez besoin de recalculer leur largeur.

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/bdYOjy?editors=110

flex-shrink marges gouttières

Marges automatiques

&ldquo;Les marges automatiques, c'est pas automatique… mais c'est rudement pratique !&rdquo;

En dehors du célébrissime margin: auto pour centrer horizontalement (et verticalement dans Flexbox), connaissiez-vous les bienfaits de margin-left: auto et margin-top: auto ? (que ce soit dans un contexte Flexbox ou non d'ailleurs)

Ces astuces vous permettront de réaliser très facilement quelques prouesses de positionnements en vous passant de flottants ou de positions absolues.

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/NPEgrG?editors=110

Marges automatiques

“Les marges automatiques, c'est pas automatique… mais c'est rudement pratique !”

En dehors du célébrissime margin: auto pour centrer horizontalement (et verticalement dans Flexbox), connaissiez-vous les bienfaits de margin-left: auto et margin-top: auto ? (que ce soit dans un contexte Flexbox ou non d'ailleurs)

Ces astuces vous permettront de réaliser très facilement quelques prouesses de positionnements en vous passant de flottants ou de positions absolues.

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/NPEgrG?editors=110

marges alignement auto

Ordonner une liste de tâche

La propriété order du module Flexbox permet de réordonner à sa guise les éléments. Il est ainsi aisément possible de créer une liste de tâches (todo list) et de classer les tâches par ordre d'importance.

(avec en bonus un peu de HTML5 Localstorage pour conserver la liste en mémoire)

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/KwzeJz

Ordonner une liste de tâche

La propriété order du module Flexbox permet de réordonner à sa guise les éléments. Il est ainsi aisément possible de créer une liste de tâches (todo list) et de classer les tâches par ordre d'importance.

(avec en bonus un peu de HTML5 Localstorage pour conserver la liste en mémoire)

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/KwzeJz

order HTML5 localstorage

Des champs de formulaire fluides

Les formulaires HTML, et plus particulièrement les champs input comptent parmi les éléments les plus énervants à styler : ils disposent d'une largeur par défaut (qui n'est jamais celle qu'on souhaite) et ils ne peuvent pas être transformés en display: table-cell sur certains navigateurs.

Pour leur permettre d'être fluides, c'est à dire d'occuper &ldquo;l'espace restant&rdquo;, il existe un moyen redoutablement simple et efficace : leur conférer un flex: 1 au sein d'un parent flexbox.

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/MYaaoz?editors=110

Des champs de formulaire fluides

Les formulaires HTML, et plus particulièrement les champs input comptent parmi les éléments les plus énervants à styler : ils disposent d'une largeur par défaut (qui n'est jamais celle qu'on souhaite) et ils ne peuvent pas être transformés en display: table-cell sur certains navigateurs.

Pour leur permettre d'être fluides, c'est à dire d'occuper “l'espace restant”, il existe un moyen redoutablement simple et efficace : leur conférer un flex: 1 au sein d'un parent flexbox.

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/MYaaoz?editors=110

forms input

Un gabarit simple, fluide et responsive

Avec un zeste de min-height: 100vh; (compatible IE9+ et Android récents) pour occuper toute la hauteur du viewport, il est assez simple de réaliser un gabarit complètement fluide et responsive à l'aide de Flexbox, rien qu'en employant la déclaration flex: 1; sur les bons éléments.

Le pied de page étant bien entendu toujours collé en bas de page même si le contenu n'est pas suffisamment long.

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/EajYme?editors=110

Un gabarit simple, fluide et responsive

Avec un zeste de min-height: 100vh; (compatible IE9+ et Android récents) pour occuper toute la hauteur du viewport, il est assez simple de réaliser un gabarit complètement fluide et responsive à l'aide de Flexbox, rien qu'en employant la déclaration flex: 1; sur les bons éléments.

Le pied de page étant bien entendu toujours collé en bas de page même si le contenu n'est pas suffisamment long.

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/EajYme?editors=110

template gabarit responsive

Une grille responsive avec Flexbox

Flexbox offre la possibilité de réaliser des grilles de mise en forme de manière simple, avec gouttières, espaces laissés libres et sans problèmes de &ldquo;whitespace&rdquo; indésirables.

Plus d'information dans le billet le point sur les grilles

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/mzKrh?editors=110

Il est possible d'aller plus loin avec un langage tel que LESS qui permettra de calculer un paquet de données automatiquement et de vous économiser beaucoup de code&hellip; et même de gagner en propreté dans votre HTML.

Voir le CodePen de la grille Flexbox avec LESS : http://codepen.io/raphaelgoetter/pen/BybOag?editors=010

Une grille responsive avec Flexbox

Flexbox offre la possibilité de réaliser des grilles de mise en forme de manière simple, avec gouttières, espaces laissés libres et sans problèmes de “whitespace” indésirables.

Plus d'information dans le billet le point sur les grilles

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/mzKrh?editors=110

Il est possible d'aller plus loin avec un langage tel que LESS qui permettra de calculer un paquet de données automatiquement et de vous économiser beaucoup de code… et même de gagner en propreté dans votre HTML.

Voir le CodePen de la grille Flexbox avec LESS : http://codepen.io/raphaelgoetter/pen/BybOag?editors=010

grid grille gouttière responsive less