init

Author: JayPanoz

README.md

@@ -0,0 +1,30 @@
+# L’ebook redistribuable
+Une introduction rapide et interactive à l’usage des éditeurs, graphistes et simples curieux.
+
+## Aspects techniques
+
+Cet article est également une expérimentation de mise en pages.
+
+Il a été conçu avec une approche d’amélioration progressive : si CSS Grid n’est pas supporté, on utilise Flexbox et quelques hacks ; si CSS Grid (non-préfixé) est supporté, on remplace Flexbox et les hacks.
+
+### Résumé
+
+- chaque section dispose d’un `display: grid` avec un template de 3 colonnes « responsive » ;
+- certains conteneurs héritent de ce template (démos, code, illustrations full-width) ;
+- une grille « freestyle » a été conçue pour les configurations de réglages utilisateurs ;
+- le toggle « Mode Scan » est en `position: sticky` ;
+- `header` et `footer` utilisent flexbox + les unités viewport ;
+- les features Open Type de Vollkorn sont utilisées.
+
+### Remarques utiles
+
+- `position: sticky` ne fonctionne pas si `html` ou `body` sont en `overflow: hidden` ;
+- le hack « full-width » avec les unités viewport ne fonctionne pas parfaitement sur mobile ;
+- Les marges verticales ne « collapsent » pas dans `display: grid`, ce qui peut créer quelques complications si une `grid-gap` est définie ;
+- pour la grille « freestyle », Firefox a besoin de `grid-auto-row: 1fr` pour gérer les décalages correctement ;
+- les éléments « gutter » doivent avoir un `column-row-span` adapté pour ne pas créer une rangée supplémentaire donc foirer la marge de l’élément suivant ;
+- il faut quasiment un reset pour Grid dans cette configuration (usage sur `section`).
+
+## Licence
+
+Copyright (C) 2017 Jiminy Panoz, tous droits réservés pour le texte et illustrations.