Skip to content

Latest commit

 

History

History
30 lines (21 loc) · 1.72 KB

README.md

File metadata and controls

30 lines (21 loc) · 1.72 KB
Raw

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.