diff --git a/draft_site_adrien/README.md b/draft_site_adrien/README.md new file mode 100644 index 0000000..614e7bd --- /dev/null +++ b/draft_site_adrien/README.md @@ -0,0 +1,49 @@ +# Brouillon du futur site web de Deuxfleurs + +> Par Adrien pour commencer. Si ça vous plaît, hésitez pas à contribuer ! Sinon, faites des contre-propositions dans un autre dossier :) + +## Framework HTML + +### Pourquoi ? + +Un framework HTML, c'est un include CSS, et parfois du JS. Ca va de Bootstrap/Foundation, qui sont des framworks immenses (avec fonction « carrousel d'images » et une foule de trucs dont on se cogne) à Skeleton/Mini, qui essayent d'être le plus simple possible tout en apportant les fonctionnalités *vitales* à un site web moderne : + +* **responsive design** : les media queries and co, qui permettent de charger du contenu différent par taille de viewport, c'est du pur HTML5/CSS et c'est chiant à écrire à la main). + + Le design par grille de 12 colonnes aide énormément à concevoir un site en pensant *mobile-first* : "Si cette div est vue sur mobile, faites qu'elle prenne toute la largeur. Si un écran PC large, faites qu'elle ne prenne que 4 colonnes sur 12." + + Je constate que certains frameworks vraiment minimalistes ne permettent pas de définir un nombre de colonnes par div en fonction de la taille du viewport. C'est soit le système de colonnes, soit toutes les div font 12 sur petit viewport. Ça suffira ou pas ? + +* **normalisation**: chaque navigateur a sa propre idée de ce que devrait être la taille du corps de texte. Il faut redéfinir tous les défauts pour s'assurer un rendu homogène sur tout navigateur. C'est le taff de [Normalize.css](https://necolas.github.io/normalize.css/), inclut dans la plupart des frameworks HTML. + +* **sucre** : Si la box modale info/warning/error peut être déjà définie clairement une bonne fois pour toutes, on ne sera pas tentés d'en faire une implem par box au lieu de fouiller le CSS. Ce genre de trucs, c'est pas vital et faut pas que ça *bloat*. + +Non-goals : + +* **LESS/SCSS** : CSS avec des variables et des includes, dans l'idée du *Don't Repeat Yourself*. Personnellement ça me saoule d'avoir à compiler du CSS avant de display, ça m'intéresse pas. + +* **Node** : Plus généralement, tout framework HTML qui demande Node, ça me gave. On en aura assez à faire avec le templating Jinja ou autre. + +### Qui sont les candidats ? + +Après une recherche web "small html responsive framework", voilà ce qui sort : + +* [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 ?) + +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. + + +## Réflexions sur le style du code + +### 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. + +https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ + diff --git a/draft_site_adrien/gimp/idee_adrien.png b/draft_site_adrien/gimp/idee_adrien.png new file mode 100644 index 0000000..145afc8 Binary files /dev/null and b/draft_site_adrien/gimp/idee_adrien.png differ diff --git a/draft_site_adrien/gimp/idee_adrien.xcf b/draft_site_adrien/gimp/idee_adrien.xcf new file mode 100644 index 0000000..b25850f Binary files /dev/null and b/draft_site_adrien/gimp/idee_adrien.xcf differ diff --git a/draft_site_adrien/gimp/idee_adrien_commentaire_ronce.png b/draft_site_adrien/gimp/idee_adrien_commentaire_ronce.png new file mode 100644 index 0000000..da0e896 Binary files /dev/null and b/draft_site_adrien/gimp/idee_adrien_commentaire_ronce.png differ diff --git a/ronce/2FleursHD.jpg b/ronce/2FleursHD-1.jpg similarity index 100% rename from ronce/2FleursHD.jpg rename to ronce/2FleursHD-1.jpg diff --git a/ronce/2FleursHD-3.jpg b/ronce/2FleursHD-3.jpg new file mode 100644 index 0000000..112272f Binary files /dev/null and b/ronce/2FleursHD-3.jpg differ diff --git a/README.md b/ronce/README.md similarity index 97% rename from README.md rename to ronce/README.md index 4e90be9..c25cad1 100644 --- a/README.md +++ b/ronce/README.md @@ -1,7 +1,7 @@ Illustration Deuxfleurs ======================= -*Disclaimer : n'hésitez pas à amender ou questionner ce document, même si les éléments semblent affirmés sans nuance, ce n'est que mon opinion et pas encore celui de deuxfleurs* +Nos réflexions sur l'illustration par Ronce, plus quelques vieilleries en queue de README. # Notre budget diff --git a/reunions/2020-10-13_notes_premiere_reunion.md b/ronce/reunions/2020-10-13_notes_premiere_reunion.md similarity index 100% rename from reunions/2020-10-13_notes_premiere_reunion.md rename to ronce/reunions/2020-10-13_notes_premiere_reunion.md