Coding Challenge #2 : Grille & flex

Posté le 25 mai 2020 - Bonnes Pratiques

L'objectif de cet exercice est de réfléchir sur la structure à adopter pour créer un formulaire en gardant une structure simple et facilement extensible.

Scénario

Le designer vous a fourni une maquette pour un formulaire sur le logiciel Figma : https://www.figma.com/file/CgKcMZLE29Nzqx4vNhlbnL/ChallengeForm?node-id=0%3A1 . Le designer n'a en revanche pas fourni de direction pour la partie responsive et vous devez improviser l'affichage sur les différents périphériques.

On se concentre ici sur la structure du formulaire plus que sur le style des éléments.
L'intégration doit être responsive.
L'utilisation de framework est autorisée.

https://youtu.be/Uw3jh-8pwuM

Vos solutions

Encore bravo à tous ceux qui ont participés. Pour cet exercice on a plusieurs solutions possibles mais les critères importants sont :

Le code HTML doit rester simple et extensible (pouvoir rajouter des champs facilement plus tard par exemple, et éviter une structure trop en lien avec le design).
Faire en sorte que la tabulation sélectionne les champs dans le bon ordre.
Faire en sorte que le responsive gère un maximum de cas (ne pas oublier les tablettes).
Gérer convenablement les espaces entre les champs quelquesoit la résolution.

https://youtu.be/zqKHaiB3A3c

Grille

Dim - https://jsfiddle.net/dimitri_bouteille/awzvq6uh/ ⭐
L4rks - https://codesandbox.io/s/divine-monad-l32vi ⭐
MalikH - https://webdevproformation.github.io/grafikart-challenges/flex.html ⭐ (autofill)
Bowser65 - https://codesandbox.io/s/grafikart-challenge-1-whp3t
Roman R - https://codepen.io/romanryckebusch/pen/abvjJxw?editors=1100 (autofill, A11Y)
Bokad - https://jsfiddle.net/veq0Lf6y/
BaptouFou - https://repl.it/repls/WorthwhileSeashellIrc
Yann - https://codepen.io/yann-marec/pen/VwvBbYB
HugoWit - https://jsfiddle.net/Hugowit/6qud1yrp/8/
Choulss (grid+flex) - https://codesandbox.io/s/heuristic-cherry-4t3xk?file=/style.css (bonne gestion du format tablette)
PhiSyX - https://jsfiddle.net/PhiSyX/Lrzyvepd/ (bonne gestion du format tablette)
Gwen.L - https://codepen.io/gwenlacosse/pen/oNjMbzW (template area)
Papa Mouhamadou DIOP - https://codesandbox.io/s/bold-water-xvj6i
stephcache - https://jsfiddle.net/stephcache/6rasvc5e/24/
JeanBon - https://codepen.io/felixdorn/pen/QWjBgqQ
Guillaume ASTIER - https://codesandbox.io/embed/spooky-challenge-grafikart-css-1-kp3pi?fontsize=14&hidenavigation=1&theme=dark&view=preview
Voltra - https://codesandbox.io/s/grille-flex-pzpy0?file=/main.css
Glioburd - https://codesandbox.io/s/grid-form-ufi2z (grid-area, fullscreen : https://ufi2z.csb.app/)
Chewbathra - https://codesandbox.io/s/wonderful-panini-f1clh ⭐
Taro - https://codesandbox.io/s/vigorous-williamson-mlzwi?file=/style.css
akbak - https://codesandbox.io/s/xenodochial-cerf-3f0z0
Florian - https://jsfiddle.net/7sbvw8an/2/
Matteo - https://codesandbox.io/s/funny-morning-pkq3i (template area)
itsadeki - https://codesandbox.io/s/challenge-css-grille-gnic0
AnttonDev - https://codesandbox.io/s/grafikartchallenge-by-anttondev-yi8ss
Ugo.P - https://codepen.io/Ugo_P/pen/BaoOoJW
georges - https://jsfiddle.net/dan_georges/opds19wm/ (template area)
Tatal - https://jsfiddle.net/ametthey/gL7qy5us/68/ (template area)
Grafikart - https://github.com/Grafikart/Challenges/tree/master/CSS/1-Grilles/solution

Flex

Norem - https://codepen.io/Norem/pen/GRpGbVO
Vscool - https://codesandbox.io/s/fragrant-brook-8evnd?file=/index.html
Couapy - https://codesandbox.io/s/nervous-shannon-vih2g?file=/style.css
Jayson - https://codepen.io/burke9/pen/pojZyoy
Jordan L. - https://codesandbox.io/s/challenge-grafikart-formulaire-responsive-wsk8v
whiskey92 - https://codepen.io/jl92000/pen/pojZZzW
m-vann - https://codesandbox.io/s/m-vann-u6rcu?file=/index.html
ARNOLD - https://codepen.io/arnold2020/pen/gOajazR
Jayson Mourier - https://codepen.io/burke9/pen/pojZyoy
Roger Carter - https://codesandbox.io/s/eloquent-fog-wl3ji?file=/index.html
Jam83 - https://codesandbox.io/s/agitated-dew-8gnl4?file=/index.html (avec position absolute)
celtak - https://codepen.io/Celtak/pen/WNQKQrZ
Darth_Judge - https://codesandbox.io/s/loving-star-mpnsd
jam83 - https://codesandbox.io/s/agitated-dew-8gnl4
stevar - https://jsfiddle.net/stevar/ck3sq2Lw/2/#&togetherjs=6fJUkr3Ulj (pb d'alignement de champs & tabulation)
Nicolas41 - https://codesandbox.io/s/tender-pine-1thci

Float

Farouk - https://jsfiddle.net/Roukfa/t8epz9o0/8/

Framework CSS

rherault - https://codepen.io/romaixn/pen/vYNrPag (tailwind)
Amiega - https://codepen.io/fdfd/pen/KKdeEvB
Art29 - https://codesandbox.io/s/challengeform-fr1v9 (bootstrap)
olivier49 - https://codepen.io/olivier49/pen/WNQKjwv
JulienKit - https://codesandbox.io/s/julienkit-grafikart-challenge-css-mai-2020-b4tiq (bootstrap)
Maxime - https://codesandbox.io/s/morning-mountain-qcvdx?file=/index.html (bootstrap)
Quentin Geeraert - https://codesandbox.io/s/grafikart-challenge-b84xt?file=/index.html (bootstrap)