Livre pour CSS grid et Flexbox ensemble

Signaler
-
 Jonattend -
Hello!

Connaissez-vous un livre ou tutoriel qui allient Flexbox et grid ensemble avec un process clair de mise en page pour quelqu'un qui ne maitrise pas très bien le html et le CSS?

Et des infos sur le process à avoir pour une page en CSS complexe?

Merci pour vos réponses!

gilles

1 réponse

Bonsoir,
plus simple de vous fier à la documentation en ligne comme ici:

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout

https://www.w3schools.com/csS/css3_flexbox.asp

Les deux techniques de mise en page que vous évoquez(grille et comportement flexible) étant 2 valeurs de la propriété 'display' elles me semblent s'exclure, en tout cas au sein d'un même bloc.

Quant au 'process' dont vous parlez cela s'appelle les règles CSS:
Elle définissent des propriétés pouvant changer l'apparence, la mise en page, etc...

Et donc en tant que telle elles sont la méthode pour faire la mise en page et modifier l'apparence ce qui implique une séparation du rendu en plusieurs parties(données et leur présentation au minimum ce sont HTML et CSS).

"Et des infos sur le process à avoir pour une page en CSS complexe? "

Oui une toute simple et valable dans tous les domaines de l'informatique et pour lesquelles sont prévus CSS et HTML: Ne jamais faire des choses complexes et privilégier les choses simples. Faire quelque chose de complexe c'est l'assurance pour vous de perdre du temps à la création , lors de toute modification et de rencontrer de problèmes et erreurs de toute sorte...
Un de mes professeurs d'informatique quand j'étais étudiant avait tendance à nous dire:
Si c'est compliqué alors ça ne va pas car l'informatique est là pour nous simplifier la vie pas la rendre plus compliqué.
Il parlais de développement logiciel et j'ai cette image de la masse de papiers à stocker et ranger dans des armoires pour la sécurité sociale avant que l'informatisation des données soit omniprésente. Si le programme informatique est plus complexe que d'avoir à trier et ranger des formulaires dans les casiers alors on peut dire que le programme est mal.

Pour la mise en page web c'est la même chose(contrairement au print ou seul le rendu compte):
Si la façon dont vous faites les choses devient trop complexe alors c'est que vous vous y prenez mal.

Posez vous la question si vous ne pouvez pas obtenir la même chose que le résultat que vous voulez par un autre moyen plus simple évidemment ou avec une façon de faire dont vous avez plus l'habitude.

Bref à votre question de process et de complexité je ne peut que répondre apprenez à connaitre mieux et plus CSS qui est le 'process'(moi je dirais méthode en français) et remplacer dans votre objectif toute complexité par des choses simples :
donc solides et rapides à mettre en place.

Sinon pour le reste vous pouvez toujours faire des essais jusqu'à obtenir le résultat attendu, ça risque de vous prendre beaucoup de temps et une chose est sûre si vous multipliez la complexité cela sera beaucoup moins pratique, beaucoup plus tendance à des bugs/problème de compatibilité, et impossible à modifier ou sérialiser facilement ce qui est la raison d'être de CSS d'où son nom de feuilles de styles en cascade.

Visez clairement la simplicité pour obtenir votre rendu :
à partir d'une maquette?qu'est ce qui vous oblige à passer par des flex si vous ne les maîtrisez pas? Vos avez surtout plusieurs façons de faire et il est impossible de les lister toutes, le but est qu'elle soit adapté à votre besoin et à vos compétences et techniques de travail...

Sinon les liens vers les notices que j'ai indiqués contiennent TOUTES les informations sur l'utilisation des propriétés de style que vous évoquez, libre à vous de tenter de les mélanger ou pas mais ce n'est pas un but en soi, juste une astuce si elle permet d'accéder au rendu désiré plus facilement ce qui ne sembles pas être votre cas.

Que vous pouvez compléter avec des cas pratique comme ici:
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-faites-votre-mise-en-page-avec-flexbox

Bref je ne connais pas votre méthodologie ni vos contraintes mais il serais plus logique de définir votre méthode de mise en page à partir de la mise en page désiré(éventuellement de vos connaissances de CSS) et non l'inverse comme votre question le laisse entendre.

Si le problème est vos connaissances en CSS dans ce cas apprenez en partant du principe que vous ne savez pas et non en vous bornant à une méthode que vous imaginez correcte, parce qui dit apprendre dit savoir que l'on ne sais pas et là dans votre énoncé vous dites savoir comment faire : en mêlant des boîtes flexibles et des grilles...alors que justement l'un s'adapte à des dimensions (la flexibilié) tandis que l'autre délimite arbitrairement des zones(grille).
C'est assez contradictoire dans le principe.. enfin je ne pourrais pas dire je n'ai jamais eu l'utilité d'avoir recours à ces propriétés même pour faire des mises en pages assez complexes et originales car j'ai choisit d'utiliser des méthodes plus simples et que je ne connaissais bien.