diff options
Diffstat (limited to 'draft_site_adrien/README.md')
| -rw-r--r-- | draft_site_adrien/README.md | 27 |
1 files changed, 22 insertions, 5 deletions
diff --git a/draft_site_adrien/README.md b/draft_site_adrien/README.md index 614e7bd..0099767 100644 --- a/draft_site_adrien/README.md +++ b/draft_site_adrien/README.md @@ -2,6 +2,13 @@ > Par Adrien pour commencer. Si ça vous plaît, hésitez pas à contribuer ! Sinon, faites des contre-propositions dans un autre dossier :) +## Features + +* Responsive mobile-first design. +* Un header avec des onglets sur PC et un « menu-sandwich » sur téléphone. +* Des images envoyées adaptées à la taille des viewports. +* Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu. + ## Framework HTML ### Pourquoi ? @@ -26,21 +33,31 @@ Non-goals : ### Qui sont les candidats ? -Après une recherche web "small html responsive framework", voilà ce qui sort : +Sources : une recherche web "small html responsive framework" et [Awesome CSS](https://github.com/troxler/awesome-css-frameworks) + +* [mini.css](https://minicss.org/) (dépôt archivé, flexible reponsive grid, CSS variables, flexbox) + + Essayé. Je voudrais un menu header à onglets sur PC qui se transforme en menu « [drawer](https://minicss.org/docs#drawer) » sur le côté pour mobile. + Il y a des briques pour faire à peu près ça, mais la complexité de la doc me décourage. Je préfère essayer quelque chose qui ait moins d'ambitions mais soit plus facile à utiliser. Go Chota. -* [mini.css](https://minicss.org/) (flexible reponsive grid) * [Skeleton](http://getskeleton.com/) (12 cols grid, but not responsive: either follow the defined number of columns, or full-size for small viewports) * [Pure](https://purecss.io/) (flexible responsive grid, with shitty class names) -* [Awesome CSS](https://github.com/troxler/awesome-css-frameworks) (listing de frameworks sur GitHub) +* **[Chota](https://jenil.github.io/chota/)** (flexible reponsive grid, CSS variables means recent browser versions only) +* [Turret.css](https://turretcss.com/) (orienté accessibilité, pas de grille ?) - * **[Chota](https://jenil.github.io/chota/)** (flexible reponsive grid, CSS variables means recent browser versions only) - * [Turret.css](https://turretcss.com/) (orienté accessibilité, pas de grille ?) +### Décision On part sur [mini.css](https://minicss.org/), parce qu'il les features que j'aime, est pas verbeux, bien minifié, et est supporté par des navigateurs assez anciens. +* Le menu-sandwich s'appelle . + ## Réflexions sur le style du code +### Semantic HTML + +Utiliser des bannières qui donnent du sens au contenu. Cf [W3C Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp). + ### Semantic CSS Le fait de ne pas donner d'éléments de graphisme dans notre markup HTML, mais seulement dans le CSS. Par exemple, mettre une classe "text-center" à un <p> est considéré une mauvaise pratique. |