Bonjour à tous,

J'aimerai avoir vos retours sur le breakpoints css mobile/tablette/desktop ou soluce, framework !!
Je suis dev backend mais le front j'ai horreur de ça mais j'ai pas le choix.

Merci d'avance

5 réponses


Que veux tu savoir ?

Alors quand on ne connait pas bien le système c'est une horreur, mais une fois qu'on comprends la façon de faire c'est tout simple ;)

Déjà première règle: MOBILE FIRST!!!
Faut commencer en mobile, comme ça tu n'aura pas de "casse", quand tu commences à coder la version mobile, et que tu agrandi la fenetre, alors ce sera ultra étiré donc moche, mais les blocs ne seront pas cassés, tu choisit un breakpoint pour passer en mode tablette, tu étires encore jusqu'àa arriver au point où tu veux la version pc, et enfin la version grand ecran (aujourd'hui il y'a des gens qui possèdent des très grands écrans, 27", 32", voire même des écran ultra wide comme le samsung g9 odyssey)

Le dernier point m'amène à la deuxième règle: container
Faut penser à mettre une largeur max dans le corps du site, comme ca les utilisateurs a très grands écrans auront une section centrée avec des marges a droite a gauche et pas étiré
Maintenant cette règle dépends bien sur du design voulu ^^' faudra s'adapter :p

Troisième règle: la grid
CSS nous a mit à disposition une feature incroyable: le CSS grid, faut l'utiliser ;)
Surtout pas utiliser Bootstrap4, leur système de grid c'est du hack chelou avec les marges négatives, Bootstrap5 par contre utilise le nouveau système de grid natif de CSS, mais bon on peut le faire en CSS, mais si quelqu'un veut utiliser la grid Bootstrap, faut prendre Bootstrap5

Maintenant ce que j'en pense, et bien perso je suis un dev backend Laravel, mais je me débrouille bien en front, pas au point de sire que je suis développeur fullstack, mais ça va ^^
Du coup j'ai pas trop de soucis avec le front, surtout qu'il y'a toujours de nouvelles technos pour rendre le front plus abordable, le problème vient surtout du fait que les dev back ne font pas de veille techno Front donc ils ne se rendent pas compte que le front devient de plus en plus simple

Je rajouterai : utiliser l'architecture 7.1 avec Sass pour bien organiser son css.

Css grid & Flexbox, les incontournables ;)
Après tu pose la question pour quoi ? Quelles utilités ?
Si tu es un dev backend et que le front te dégoute, soit tu passes par un dev front et vous bossez ensemble, soit tu t'appuies sur un framework css (Tailwind, bootstrap, ou autre).

Typiquement, si tu dois faire une admin .. ne te casse peut être pas trop la tête à vouloir tout faire à la mano .. après comme je disais au début, ça dépend pourquoi, et pour qui ;)

Avec tailwind tu as les classes toutes pretes, après faut encore faire un peu à la mano, le mieux pour rien faire du tout ce serait d'utiliser Bootstrap, ils ont les components y'a juste a copier coller depuis la doc ^^

Ou alors si tu veux utiliser des components Tailwind c'est bien aussi... c'est entre 129$ et 200$ ^^
https://tailwindui.com/pricing
Bref... Bootstrap x)

Perso j'utilise tailwind, parce que je trouve la base jolie du coup je peux garder la config de base ^^ Mais après j'utilise TW parce que ça me vas de faire un peu a la mano :p