Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Astuce: Construire une structure de Blog avec Bulma

by
Difficulty:IntermediateLength:ShortLanguages:

French (Français) translation by fredpiK (you can also view the original English article)

Dans ce court tutoriel, nous allons utiliser Bulma, un framework CSS populaire de Jeremy Thomas basé sur les flexbox, pour construire une structure de blog responsive.

Comme toujours, pour avoir une idée du résultat attendu, jetez un oeil à la démo Codepen (testez la version large pour une meilleure expérience):

Premiers pas avec Bulma

Bulma n'a besoin que d'un fichier CSS. Vous pouvez en récupérer une copie en vous rendant sur la page GitHub, en utilisant un gestionnaire de paquets (npm par ex.) ou un CDN (cdnjs par ex.).

Pour ce tutoriel, nous allons nous tourner vers la dernière option. Insérons donc un lien vers le fichier requis dans le <head> de notre document HTML.

Nous sommes prêt à construire la page!

Mise en place de la structure

Notre grille aura une largeur maximum et sera centrée horizontalement. Pour cela, nous utilisons les classes assistantes section et container.

Sur les petits écrans, les articles doivent être empilés verticalement, comme ceci:

Bulma mobile layout

Par défaut Bulma, qui est orienté mobile-first, place les articles les uns sur les autres pour les tailles d'écrans inférieures à 769px. Tout ce que nous avons à faire est de définir la structure quand la taille d'écran dépasse 768px.

Pour cela, nous n'avons besoin que d'un élément tile. Comme vous allez le voir, l'astuce est d'imbriquer plusieurs de ces éléments.

Sachant cela, regardons plus en détails la structure que nous souhaitons pour les écrans de bureau. Comme vous pouvez le voir sur la figure suivante, elle est composée de trois rangées:

Pour chaque rangée, Bulma attend la hiérarchie suivante:

Détaillons tout ça:

  • Nous démarrons avec un élément tile principal qui contient tous les autres.
  • A l'intérieur, nous ajoutons les éléments tile qui seront distribués horizontalement. De plus, sur le principe d'une grille 12 colonnes, nous pouvons définir une largeur précise pour ces éléments. Ceci est possible en utilisant la classe is-*, où * est un nombre entre 1 et 12. Par exemple, un élément tile avec la classe is-6 occupera 50% de l'espace horizontal.
  • Pour empiler les éléments verticalement, nous utilisons la classe is-vertical.
  • Une fois que l'on souhaite ajouter du contenu à un élément, on lui assigne la classe is-child et la classe is-parent à l'élément parent.

A ce stade, nous sommes prêts à mettre la théorie en pratique.

Rangée #1

La première rangée contient trois colonnes. La première et la troisième occupent un quart de la rangée, tandis que la deuxième occupe la moitié de la largeur. De plus, la troisième colonne comporte deux colonnes enfants.

D'après ce que nous avons défini jusque ici, la structure va s'écrire:

Notez que nous définissons une largeur spécifique uniquement pour la deuxième colonne via la classe is-6. Nous pourrions évidemment ajouter la classe is-3 à la première et la troisième colonne mais cela n'est pas utile puisque elles vont s'étendre (elles ont flex-grow: 1)pour occuper l'espace restant.

En plus de cela, pour pouvoir affiner le style, nous assignons des classes personnalisées à chaque article. Et pour simplifier, nous omettons les contenus d'articles.

Rangée #2

Comme la première, la deuxième rangée contient trois colonnes. La première occupe la moitié de la largeur, alors que les deuxième et troisième occupent un quart. Et pour terminer, la deuxième colonne est constituée de deux colonnes enfants.

Voici la structure:

Rangée #3

Cette dernière rangée est un peu plus complexe; ici nous avons deux colonnes: La première est deux fois plus large que la seconde. A l'intérieur de la première colonne, nous avons deux sous-rangées. La première sous-rangée contient trois colonnes de même largeur, tandis que la seconde contient deux colonnes de même largeur.

Le code pour ce cas précis s'écrit:

Comme vous avez vu dans le code précédent, la hiérarchie des éléments imbriqués ressemble à ceci:

Si vous souhaitez vous faire une meilleure idée du fonctionnement de l'élément tile, référez vous à la documentation et utilisez les outils de développement de votre navigateur favori pour inspecter les différentes classes utilisées.

Navigateurs supportés

A ce jour, Flexbox est très largement supporté, et notre structure de blog devrait donc s'afficher correctement dans tous les navigateurs modernes.

Toutefois, durant mes tests sur différents navigateurs, j'ai constaté que IE 11 ne produisait pas les résultats attendus. Voici ce que j'ai obtenu:

En revanche, ce problème ne s'est pas produit avec Microsoft Edge. C’est peut-être un bug avec les dernières versions d’Internet Explorer. En tout cas, j’ai cherché s’il y avait une solution miracle qui permettrait d’éviter ce souci.

J'ai résolu le problème en ajoutant flex-basis: auto aux articles et aux éléments tile principaux de l'élément tile is-vertical de la troisième rangée (voir hiérarchie précédente)

Encore une fois, c'est une solution rapide qui convient pour cet exemple particulier. Dans vos implémentations, vous devrez probablement faire d'autres modifications dans le code.

Conclusion

Dans ce rapide tutoriel, nous avons vu comment construire une structure de grille responsive pour un blog avec Bulma, un framework basé sur Flexbox.

Avez-vous déjà utilisé Bulma dans un de vos projets? Qu'en pensez-vous? Vous pouvez partager vos expériences dans les commentaires ci-dessous.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.