diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 43 |
1 files changed, 39 insertions, 4 deletions
@@ -1,14 +1,49 @@ # Laboratoire du futur site web de Deuxfleurs -Les tests graphiques sont dans `/lab`, une page HTML par idée à développer. N'hésitez pas à ajouter la vôtre ! +## Mise en route -## Objectifs techniques +Ce dépôt contient un sous-module, [Charpente](https://git.deuxfleurs.fr/Deuxfleurs/charpente). Pour l'initialiser, il faut le cloner en plus du dépôt courant ! : + +```bash +git clone git@git.deuxfleurs.fr:Deuxfleurs/design.git +cd design/ +git submodule init +git submodule update +``` + +Vous voilà prêt. + +## Organisation du dépôt + +Ce dépôt nous suit depuis un bout, et c'est donc un petit merdier plein de trésors inespérés (hum). + +* `maquette/` contient des exports de notre maquette, créée sur [Penpot](https://design.penpot.app) (demandez-nous les accès si vous voulez). + +* `ronce/` contient tout ce qui concerne Ronce, la graphiste qui nous a dessiné l'image dans les arbres. + + Toutes les versions de `illustration-ronce` sont sous licence, ne l'utilisez pas sans autorisation. Nous avons l'autorisation de l'utiliser pour le site de Deuxfleurs. + + `feuilles_brush.abr` est une *brush* de l'illustration, qu'elle nous a filé au cas où on veut du bitmap assorti sur le site. + +* `lab/` contient des mini-projets sous forme de pages web, qui sont des idées graphiques qu'on pourrait inclure au site final. + + `top-nav.html` contient une bonne partie du HTML qu'on attendrait dans la version finale. Hésitez pas à copier-coller. + +* `assets/` contient les assets (css, fonts & images) qui sont utilisés dans `lab/`. + +* `notes/` contient des notes au format texte. N'hésitez pas à y ajouter vos recherches. + +* `inspirations/` contient des assets graphiques qui nous ont inspiré pendant nos recherches graphiques. + +## Notes + +### Objectifs techniques * Responsive mobile-first design. * [Media queries CSS](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) : Des images envoyées adaptées à la taille des viewports. * Pas besoin de Javascript : Le CSS3 ça déchire, on peut faire des infobulles, des animations, de la parallax. (Navigateurs compatibles depuis 7 ans ou plus.) -## Idées graphiques +### Idées graphiques * **Branches et canopée** : Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu. @@ -34,7 +69,7 @@ Les tests graphiques sont dans `/lab`, une page HTML par idée à développer. N [Guide pour le faire avec CSS](https://medium.com/@wowmotty/replace-the-input-password-bullet-1cd4ee34e0aa). -## Inspirations & Ressources +### Inspirations & Ressources * [MDN - Création de tooltips et remarques sur l'accessibilité du contenu](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#tooltips) |