Fork me on GitHub

Utiliser les grilles CSS (CSS3)

201916
Mars
  alain01 Thème 2117

Open in new windowBonjour,
cet article n'a pas vocation de vous apprendre tout sur les grilles CSS mais de vous ouvrir des pistes vers cette façon d'aborder le web-design.
Tout d'abord rappelons ce qu'est le CSS.

Open in new windowCSS pour Cascading Style Sheets (Feuilles de style en cascade)
Le CSS est un langage qui permet de mettre en forme le contenu et le design de pages écrites en HTML.
Le CSS permet de modifier les polices, la couleur, la taille et l'espacement du contenu notamment.

Open in new windowOpen in new windowLe CSS Grid layout (modèle de disposition en grille ou CSS3) est un modèle de spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.

Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.

Open in new windowLe système est responsive, c'est à dire que le design va s'adapter à la taille du media.











Open in new windowOpen in new windowOpen in new window
Ressources en français :
Grilles CSS
CSS Grid Layout - Matthieu Anceret

Ressources en anglais :
Tutorial en 10 étapdes : Introduction to CSS layout
How to create a simple layout with CSS Grid Layouts
Vidéo très claire de 30mn sur le sujet et le support

Outils indispensables :
Navigateur Firefox Developer Edition
Editeur en ligne HTML / CSS / JS CodePen


J'espère avoir suscité votre curiosité et votre intérêt.
Nous pouvons nous retrouver dans les sujets de forum liés aux thèmes afin d'entamer des échanges et contribuer ensemble à de nouveaux thèmes pour XOOPS.

Note: 0.00 (0 votes) - Noter cet article -

Tags: css   grille  
Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article à un ami
Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Admin Frxoops
Inscrit le: 16/03/2009
De: Tende (06)
Contributions: 3528
Cesagonchu Posté le: 16/03/2019 19:29  Mis à jour: 16/03/2019 19:29
 Re: Utiliser les grilles CSS (CSS3)
Merci alain01 pour cet article intéressant, comme toujours
Aspirant
Inscrit le: 02/04/2008
De:
Contributions: 72
mamba Posté le: 17/03/2019 04:28  Mis à jour: 17/03/2019 04:28
 Re: Utiliser les grilles CSS (CSS3)
Admin Frxoops
Inscrit le: 16/05/2003
De: Rhone-Alpes
Contributions: 4051
alain01 Posté le: 18/03/2019 10:57  Mis à jour: 18/03/2019 10:57
 Re: Utiliser les grilles CSS (CSS3)
Ouverture d'un sujet lié sur le forum,
alors si vous voulez poser des quesions et/ou contribuer, rendez-vous ici :

http://www.frxoops.org/modules/newbb/ ... =&topic_id=37978&forum=15
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

16 Personne(s) en ligne (1 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 0 | Invité(s): 16 | Plus ...