path: root/README.md


                                              
# 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 !

## 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

* **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.

	* `ronce/feuille brush.abr` contient la brosse Photoshop utilisée par Ronce pour les feuilles d'arbre au premier plan. On pourrait l'utiliser pour faire des bordures de fond.

* **Parallax** : Exploiter l'illustration au maximum, en la laissant fixée en fond de page tandis que les éléments graphiques défilent (parallax).
* S'il faut un menu : barre d'onglets sur PC, menu « sandwich » qui révèle une colonne d'onglets sur smartphone.
* Couleurs : Ronce a proposé quelques couleurs dans `/lab/gimp/branches-et-canopee`.

	> un violet du fond en rab, soit pour le fameux monde d'en bas, soit pour un peu de douceur moins saturée.

* Elements `<code>`:

	* Police [`Fira Code`](https://github.com/tonsky/FiraCode) (ou autre police stylée avec des ligatures) ?

		Il semblerait qu'Element utilise du [Fira Sans](https://fonts.google.com/specimen/Fira+Sans)... Hm.

	* [Bordures « dessinées à la main »](https://stackoverflow.com/a/6402175) ?

## Inspirations

* [MDN - Création de tooltips et remarques sur l'accessibilité du contenu](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#tooltips)

	On peut faire tout ce qu'il faut avec CSS3 !

	Néanmoins, *rendre un site accessible sans outils a l'air compliqué*.

* [CSS Border Effects](https://speckyboy.com/css-border-effects/) : Notamment 'Cool Clippings', 'Hand Drawn' (et 'Attention Getter' for fun)

* [border-image sur css-tricks](https://css-tricks.com/almanac/properties/b/border-image/) notamment « More Demos ».

* [W3C Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)

	Utiliser des bannières qui donnent du sens au contenu.

* [Semantic CSS](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)

	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 &lt;p&gt; est considéré une mauvaise pratique. 
# 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 !

## 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

* **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.

	* `ronce/feuille brush.abr` contient la brosse Photoshop utilisée par Ronce pour les feuilles d'arbre au premier plan. On pourrait l'utiliser pour faire des bordures de fond.

* **Parallax** : Exploiter l'illustration au maximum, en la laissant fixée en fond de page tandis que les éléments graphiques défilent (parallax).
* S'il faut un menu : barre d'onglets sur PC, menu « sandwich » qui révèle une colonne d'onglets sur smartphone.
* Couleurs : Ronce a proposé quelques couleurs dans `/lab/gimp/branches-et-canopee`.

	> un violet du fond en rab, soit pour le fameux monde d'en bas, soit pour un peu de douceur moins saturée.

* Elements `<code>`:

	* Police [`Fira Code`](https://github.com/tonsky/FiraCode) (ou autre police stylée avec des ligatures) ?

		Il semblerait qu'Element utilise du [Fira Sans](https://fonts.google.com/specimen/Fira+Sans)... Hm.

	* [Bordures « dessinées à la main »](https://stackoverflow.com/a/6402175) ?

## Inspirations

* [MDN - Création de tooltips et remarques sur l'accessibilité du contenu](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#tooltips)

	On peut faire tout ce qu'il faut avec CSS3 !

	Néanmoins, *rendre un site accessible sans outils a l'air compliqué*.

* [CSS Border Effects](https://speckyboy.com/css-border-effects/) : Notamment 'Cool Clippings', 'Hand Drawn' (et 'Attention Getter' for fun)

* [border-image sur css-tricks](https://css-tricks.com/almanac/properties/b/border-image/) notamment « More Demos ».

* [W3C Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)

	Utiliser des bannières qui donnent du sens au contenu.

* [Semantic CSS](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)

	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 &lt;p&gt; est considéré une mauvaise pratique.