# ? Cours IUT : Flexbox et Styleguide Publié le 16 novembre 2014

> Afin de faire émerger les pratiques personnelles des élèves, renforcer leurs connaissances, il me semble important d’instaurer l’horizontalité dans les rapports humains, au sein de la classe. J’espère pouvoir devenir alors un accompagnateur, un facilitateur, encadrant le processus de maîtrise des concepts de littérature et de grammaire. Le but est de fluidifier la communication, d’augmenter les feedbacks, de rendre les réussites plus accessibles.

> D’une sélection artificielle à une sélection naturelle dans un écosystème complexe

Suite de mes aventures dans l’enseignement, après les bases, on passe à du plus consistant. On commence par repartir de zéro sur un sujet qui leur tient à cœur et en plus petit groupes comme proposé en rétro. La première contrainte et d’établir un styleguide en parallèle du développement du site, c’est quelque chose que j’utilise depuis 7 ans et qui dispose maintenant de nombreuses ressources. J’aime cette approche pour plusieurs raisons :

- réflexion sur la sémantique lorsqu’on se rend compte du nombre d’id/class à ajouter au styleguide pour avoir quelque chose de potable ;
- documentation dynamique pour les divers contributeurs et pour soi-même, on a vite fait de dupliquer un style par méconnaissance du projet ;
- facilité d’expérimentation lors de refontes en applicant directement la nouvelle feuille de style au styleguide.

Il s’avère que c’est aussi extrêmement utile en terme de retour pour corriger un bug récalcitrant de façon visuelle.

Le second concept que je souhaite aborder est Flexbox, c’est encore relativement récent mais Vincent me rappelait à juste titre que l’« on enseigne pour aujourd’hui et pour demain » (pour hier, il reste les polyfills) et Flexbox est aussi un moyen de ne pas les dégoûter tout de suite des CSS :-). C’était bien sûr une occasion pour moi de me mettre à niveau dans ce domaine et d’expérimenter, participer à une formation reste la meilleure façon d’apprendre.

Quelques ressources sur le sujet :

- CSS3 Flexbox Layout module chez Alsacréations
- The Ultimate Flexbox Cheat Sheet
- Solved by Flexbox
- Flexbox Cheatsheet Cheatsheet
- A Complete Guide to Flexbox

Si j’ai le temps, je terminerai sur l’approche mobile et les media-queries pour tirer pleinement partie de Flexbox. Je me rends compte à quel point les minutes sont comptées lorsqu’on est limité à 24 heures de cours sur un sujet aussi vaste…

### Discussion suite à l’article :

> (pour hier, il reste les polyfills) et Flexbox est aussi un moyen de ne pas les dégoûter tout de suite des CSS

C’est aussi le moyen de comprendre l’horreur de l’utilisation prématurée d’une technologie avant maturation. La syntaxe ayant changée trois fois de suite en quelques années. En Asie de nombreux sites ne sont que flexbox 1ere ou 2eme génération.

Conséquences :

- quand le site a la vieille syntaxe seulement, il ne marche pas dans les navigateurs autre que iOS (récent et courant)
- comme les sites l’utilisent abondamment sans corriger, Safari ne peut pas abandonner la vieille syntaxe, bien que la nouvelle syntaxe est présente.
- quand on conçoit un site aujourd’hui et si on veut donner une expérience aux utilisateurs possédant des iOS sur devices de vieilles générations donc bloqués à iOS 6, il faut ajouter la vieille syntaxe en plus de la syntaxe normale.

Une bonne façon de comprendre les conséquences de notre pratique Web en tant que développeurs.

Karl Dubost, le 2014-11-29 à 03:47

> Une bonne façon de comprendre les conséquences de notre pratique Web en tant que développeurs.

Ce qui rappelle furieusement le "legacy" qu’a subi l’équipe Microsoft pendant des années, ou encore le moment où, faute de CSS préfixées, la propriété clip() n’a jamais pu être généralisée alors que c’était une bonne idée.

Bis repetita et tout ça.

Stéphane Deschamps, le 2014-11-29 à 12:45

> Bis repetita et tout ça.

Je lisais hier cet article à ce sujet.

Confusant qu’ils disaient…

David Larlet, le 2014-11-30 à 05:19