Google Web.dev présente des mises en page à une ligne

0
200


Web.dev de Google a publié un groupe de mises en page qui dépendent d’une seule ligne de CSS pour les faire fonctionner. Ces mises en page sont adaptées aux mobiles, à chargement rapide et prêtes à être intégrées dans un projet Web.

Preuve de concept

Ces dispositions sont destinées à montrer ce qui peut être accompli avec une seule ligne de CSS.

Par exemple, ce qui suit est le CSS pour une mise en page simple comprenant un en-tête, une zone de contenu principale et une zone de pied de page:

.ex4 .parent {
affichage: grille;
grille-modèle-lignes: auto 1fr auto;
}

Capture d’écran d’une disposition Bare Bones

Capture d'écran d'une disposition en os nus sur une ligne

Disposition du Saint Graal

Ceci est un exemple de disposition classique. Il comporte un en-tête, des barres latérales sur l’un ou l’autre site d’une zone de contenu principale et un pied de page.

Capture d'écran animée d'une mise en page sur une ligne Cette animation montre comment la mise en page s’adapte automatiquement à la taille de l’écran sans utiliser de requêtes multimédias.

Le CSS pour la disposition ci-dessus est ci-dessous:

.ex5 .parent {
affichage: grille;
grille-modèle: auto 1fr auto / auto 1fr auto;
}

en-tête .ex5 {
rembourrage: 2rem;
grille-colonne: 1/4;
}

.ex5 .gauche {
grille-colonne: 1/2;
}

.ex5 main {
grille-colonne: 2/3;
}

.ex5. côté droit {
grille-colonne: 3/4;
}

Pied de page .ex5 {
grille-colonne: 1/4;
}

Aucune requête média

La plupart des conceptions Web réactives pour mobile reposent sur ce que l’on appelle les requêtes multimédias. Les requêtes multimédias sont des règles CSS utilisées pour sélectionner une feuille de style différente en fonction de l’appareil utilisé pour afficher le site Web.

Lorsqu’un appareil est une tablette, un ensemble de styles CSS optimisés pour une taille d’écran de tablette est utilisé, redimensionnant les images, les polices et les mises en page pour cet écran.

Ce qui est intéressant à propos de ces mises en page 1 ligne, c’est qu’elles n’utilisent pas les requêtes multimédias pour être adaptées aux mobiles. Cela permet de se débarrasser de beaucoup de code CSS et rend ces mises en page adaptées aux mobiles et aux ordinateurs de bureau sans JavaScript ni CSS supplémentaires.

Les présentations ne sont pas des modèles

Ce sont des dispositions. Cela signifie qu’ils sont les os nus d’une page Web.

C’est ce par quoi une personne peut commencer pour créer une mise en page rapide et criante.

PUBLICITÉ

CONTINUER À LIRE CI-DESSOUS

Ces mises en page ne sont pas non plus des modèles WordPress. Ils doivent encore être complétés par des logos, des couleurs d’arrière-plan, des widgets, etc.

Pourtant, une fois cette apparence terminée, un modèle HTML peut être converti en modèle WordPress.

Exemples de ce qui peut être fait

Ce sont des exemples de ce qui peut être fait sur une mise en page simple. Cependant, les exemples peuvent être incorporés dans des parties d’un site.

Regarder la vidéo est utile car l’hôte explique le CSS et son fonctionnement.

Regardez la vidéo ici:

Consultez le site Web ici:

https://1linelayouts.glitch.me



tout savoir sur la crypto

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here