larlet-fr-david/david/blog/2014/cours-iut-flexbox-styleguide/index.md

title: Cours IUT : Flexbox et Styleguide
slug: cours-iut-flexbox-styleguide
date: 2014-11-16
chapo: Participer à une formation reste la meilleure façon d’apprendre.

> 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.
>
> <cite>*[D’une sélection artificielle à une sélection naturelle dans un écosystème complexe](http://pedagogieagile.com/2014/11/09/une-classe-est-un-organisme-vivant/)*</cite>

Suite de [mes aventures dans l’enseignement](/david/pro/enseignement/), après [les bases](/david/blog/2014/cours-iut-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](/david/biologeek/archives/20070522-des-css-de-qualite/) et qui dispose maintenant [de nombreuses ressources](http://styleguides.maban.co.uk/). J’aime [cette approche](http://la-cascade.ghost.io/creer-un-guide-de-style/) 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](/david/blog/2013/tdd-conception-emergente/).

Le second concept que je souhaite aborder est [Flexbox](http://www.w3.org/TR/css3-flexbox/), c’est encore relativement récent mais Vincent me rappelait à juste titre que l’<cite>« on enseigne pour aujourd’hui et pour demain »</cite> (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](http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html) chez Alsacréations
* [The Ultimate Flexbox Cheat Sheet](http://www.sketchingwithcss.com/samplechapter/cheatsheet.html)
* [Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/)
* [Flexbox Cheatsheet Cheatsheet](http://jonibologna.com/flexbox-cheatsheet/)
* [A Complete Guide to Flexbox](http://css-tricks.com/snippets/css/a-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…