Share
Dans cette astuce, nous allons utiliser Bulma, un framework CSS populaire basé sur Flexbox de Jeremy Thomas, pour créer une mise en page de blog réactive..
Comme d'habitude, pour avoir une première idée de ce que nous allons créer, jetez un œil à la démonstration associée à Codepen (consultez la version plus grande pour une meilleure expérience):
Bulma nécessite un seul fichier CSS. Vous pouvez récupérer une copie de ce fichier en visitant sa page GitHub, via un gestionnaire de paquets (par exemple, npm) ou un CDN (par exemple, cdnjs)..
Pour ce tutoriel, nous choisirons la dernière option. Donc, nous plaçons un lien vers le fichier requis dans le de notre document HTML:
Maintenant, nous sommes prêts à commencer à construire la mise en page du blog!
Notre grille aura une largeur maximale et sera centrée horizontalement. Pour ce faire, nous utilisons Bulma section et récipient classes d'assistance:
Sur les petits écrans, tous les articles doivent être empilés verticalement, comme ceci:
Par défaut, Bulma, qui est conçu pour mobile en premier, place les articles les uns sur les autres sous une largeur de fenêtre d'affichage de 769px. Tout ce que nous avons à faire est de construire la mise en page du blog lorsque la fenêtre d'affichage dépasse 768 pixels..
Pour ce faire, nous avons besoin d’un seul élément: le tuile. Comme vous le verrez dans un instant, l'astuce consiste à imbriquer plusieurs éléments de dalle.
Dans cet esprit, regardons de plus près la disposition souhaitée du bureau. Comme vous pouvez le voir dans la visualisation suivante, elle comprend trois lignes:
Bulma attend au moins la hiérarchie imbriquée suivante pour chaque ligne:
tuile est-ancêtre | Tile est-parent | Istile is-child
Expliquons cela:
Accentsconagua
est-* cours où * est un nombre compris entre 1 et 12. Par exemple, une tuile avec le est-6 la classe occupera 50% de l'espace horizontal.est vertical classe.est-enfant classe à elle et le est-parent classe à la tuile parent.À ce stade, nous sommes prêts à mettre cette théorie en pratique.
La première ligne contient trois colonnes. Les première et troisième colonnes occupent un quart de la largeur de la ligne, tandis que la seconde occupe la moitié de la largeur de la ligne. De plus, la troisième colonne est composée de deux colonnes enfants..
Sur la base de ce que nous avons discuté ci-dessus, voici le balisage requis:
Notez que nous définissons une largeur spécifique uniquement pour la deuxième colonne via le est-6 classe. Bien sûr, si on veut, on peut ajouter le est-3 classe aux première et troisième colonnes aussi. Mais cela n’est pas nécessaire car les deux colonnes s’amplifient (elles ont Flex-Grow: 1) Pour partager l'espace horizontal restant.
De plus, juste pour le style, nous assignons quelques classes personnalisées à chaque article. Et pour plus de simplicité, nous omettons le contenu des articles.
Semblable à la première ligne, la deuxième ligne contient trois colonnes. Le premier occupe la moitié de la largeur de la rangée, tandis que les deuxième et troisième occupent un quart de la largeur de la rangée. En outre, la deuxième colonne comprend deux colonnes enfants.
Voici le balisage connexe:
La troisième rangée est un peu plus compliquée. ici nous avons deux colonnes. Le premier est deux fois plus grand, par rapport au second. Dans la première colonne, nous avons deux sous-lignes. La première sous-ligne contient trois colonnes de taille égale, tandis que la deuxième sous-ligne comprend deux colonnes de taille égale..
Le balisage pour ce cas est le suivant:
Comme vous le verrez dans le code ci-dessus, la hiérarchie imbriquée ressemble à ceci:
tuile est-ancêtre | Tile is-8 is-vertical | | | Iletile / * Classe supplémentaire pour IE * / | | | | | Tile est-parent | | | Tile is-child | | | | | Tile est-parent | | | Tile is-child | | | | | Tile est-parent | | Tile is-child | | | Iletile / * Classe supplémentaire pour IE * / | | | Tile est-parent | | Tile is-child | | | Tile est-parent | Tile is-child | Iletile est-parent tile est-enfant
Si vous souhaitez avoir une meilleure idée du fonctionnement de l'élément de mosaïque, veillez à consulter la documentation et à utiliser les outils de développement de votre navigateur préféré pour inspecter les classes associées..
De nos jours, Flexbox est vraiment très bien supporté, et notre blogue devrait donc fonctionner dans tous les navigateurs modernes..
Cependant, alors que je testais la page dans différents navigateurs, j'ai constaté qu'IE 11 ne produisait pas le résultat souhaité. Voici ce que je voyais:
D'autre part, lors des tests avec Microsoft Edge, je n'ai pas rencontré ces problèmes. C'est peut-être une sorte de bogue avec les dernières versions d'IE. De toute façon, j'ai essayé de voir s'il y avait une solution rapide qui permettrait d'éviter ces problèmes.
Je l'ai résolu en ajoutant base flexible: auto aux articles et aux tuiles de haut niveau de la est vertical tuile de la troisième ligne (voir hiérarchie précédente).
Encore une fois, c'est une solution rapide qui semble fonctionner pour cet exemple particulier. Pour vos propres implémentations, vous devrez peut-être apporter d'autres modifications à votre code..
Dans cette astuce, nous avons appris à créer une grille de blogs réactive avec Bulma, un framework basé sur Flexbox..
Avez-vous déjà essayé Bulma dans l’un de vos projets? Qu'est-ce que tu en penses? Partagez vos expériences dans les commentaires ci-dessous.
