Bulma, framework CSS

Chez les développeurs fullstack, et spécialement chez ceux qui sont spécialisés dans le back, le design d’une page peut être un vrai casse-tête. Mettre les mains dans le CSS ce n’est pas toujours très simple. Heureusement, il existe des framework CSS tel que bootstrap ou tailwind. Celui dont j’ai envie de vous parler aujourd’hui, c’est Bulma.

Ryan Djoher

15/02/2021 - 12 minutes de lecture

Le but de l’article n’est pas de faire un comparatif avec les autres framework (pour moi ils se valent tous, faites avec celui dont vous êtes le plus à l’aise). Si je vous parle de bulma, c’est parce que j’en suis tombé amoureux par sa simplicité. Pour vous faire partager cet amour, je vais vous montrer quelques petits trucs sympas qu’on peut faire avec ce framework.

Bulma c’est qui ?

Quand vous faites une page, il faut qu’elle soit un minimum jolie, responsive et que la charte graphique soit rassurante pour l’utilisateur. Par exemple, si vous faites un bouton, il faut que l’utilisateur comprenne immédiatement que c’est un bouton. Et pour ça, il doit correspondre aux normes graphiques de notre ère. Il y a 15 ans, on aurait fait le bouton autrement.

Un bouton en 2005

Un bouton en 2020

Mais comment, quand on n’a pas fait d’étude dans le design, on peut savoir si notre bouton est à la mode ou pas ? ça peut paraitre anecdotique, mais un site qui n’a pas une charte graphique à la mode, c’est un site qui ne donne pas très envie. C’est là que les framework CSS entre en jeu, puisqu’ils s’occupent eux même du design.

Je suis beau à l’intérieur

Être beau c’est bien, être pratique c’est bien aussi. Là où les framework CSS font fort, c’est qu’ils permettent aussi de rendre assez facilement votre site responsive. Que l’utilisateur soit sur ordinateur, tablette ou mobile, c’est le framewok qui s’occupe de tout. Mais ce n’est pas non plus magique, il faut préalablement lui donner des instructions. Ne vous inquiétez, on va bientôt y venir.

Installation de Bulma

Pour vous montrer les grandes lignes de ce framework CSS, on va créer une page HTML des plus simples avec un appel CDN vers le lien mis à disposition sur le site bulma

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bulma CSS</title>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
    </head>
    <body>
        <h1>Djoher vous présente : Bulma CSS</h1>
    </body>
</html>

Si vous êtes dans un environnement un peu plus complexe (Angular, Nextjs…), n’oubliez pas de lire la doc pour voir comment installer Bulma. Fait un simple « npm i bulma » ne fonctionnera pas car il faut aussi appeler le module dans votre environnement. Pour ceux qui l'ignorent, npm i === npm install.

https://bulma.io/documentation/overview/start/

Les éléments

Vous avez besoin de boutons, de progress bar, d’icon, de titres… Plus besoin de se prendre la tête, Bulma le fait pour vous. On va rester sur le fameux bouton… Imaginons qu’on en a besoin, en temps normal on aurait fait :

<button>Valider</button>

Ce qui aurait donné comme résultat :

Maintenant, utilisons un peu les outils dont bulma met à disposition. Au lieu de faire comme précédemment, on va plutôt faire comme ceci :

<button class="button">Valider</button>

Ce qui va donner :

Avouez que c’est beaucoup plus dans l’ère du temps non ? Au lieu de passer quelques minutes dans le fichier css, on a juste à mettre la classe « button » et voilà. Et ce n’est pas tout, si on veut changer la taille du button, sa couleur ainsi que sa forme, il suffit simplement de cumuler les « class » que vous trouverez dans la doc de bulma.

<button class="button is-info is-large is-rounded">Normal</button>

Bien entendu, nous pouvons étendre cet exemple sur les textes qui eux aussi, se verront modifier par rapport aux classes prédéfinis qui existent déjà sur Bulma.

<p class="has-text-link has-background-warning is-size-1">Hello Tokyo</p>

Hello Tokyo

<p class="has-text-danger has-background-info is-size-7">Hello Sapporo</p>

Hello Sapporo

J’avoue que mes exemples sont un peu trop tape-à-l’œil, mais je voulais montrer qu’on peut faire pas mal de choses sans pour autant se balader dans les feuilles de style. Il n’y a pas que la partie couleur ou taille qu’on peut modifier avec Bulma, mais aussi la position des éléments (si vous voulez que votre texte soit centré, justifié…) et même s’il doit être visible ou pas dans certains cas de figure. Les possibilités sont immenses, et je vous invite à aller voir dans la documentation officielle de bulma.

Et le responsive dans tout ça ?

Bulma ne rend pas que les éléments jolis, il fait aussi dans le responsive. Je ne vais pas vous faire l’affront de vous expliquer à quel point le responsive est important sur un site, mais de nos jours (2020), le mobile a pris la première place face au desktop. On est à l’ordre du 50.13% pour les smartphone contre 47,06% pour nos chers écrans d’ordinateur (et 2,81% pour le reste, dont les tablettes). Maintenant qu’on est presque sur du kif-kif, il faut que notre site soit lisible partout. Bulma n’est pas le seul à le faire, il y a aussi Bootstrap... Mais personnellement, je préfère bulma car il est un peu plus simple d’utilisation.

Le point de rupture

Avant de vous montrer un peu comment bulma rend votre site internet responsive, je vais vous expliquer ce qu’est un « breakpoint » afin de mieux expliquer la suite.

Le point de rupture (breakpoint), c’est lorsque que des éléments qui sont cote à cote doivent s’empiler verticalement lorsque la taille de l’écran est trop petit, afin qu’ils ne débordent pas des côtés. Par exemple, si vous avez deux cadres qui font chacun 500px, il serait compliqué de les laisser cote à cote sur un mobile. Donc le moment où deux éléments changent de position, c’est le breackpoint. Si je devais vous expliquer ça en image :

Le breakpoint ne s’est pas encore fait car tout rentre dans l’écran

Le breakpoint s’est fait car l’écran est trop petit pour laisser les deux éléments alignés.

Pour faire un site responsive, il faut savoir utiliser les breakpoint. Maintenant, on va faire quelque chose d’un peu plus complexe afin que vous voyiez comment on fait du responsive avec Bulma.

Voici le menu

Qui dit site, dit menu. On va donc prendre cet exemple pour montrer toute la puissance de Bulma. En vérité, Bulma peut offrir un menu préconfigurer mais on ne va pas l’utiliser car ce n’est pas le but de la manœuvre (même si je vous conseille de l’utiliser pour votre site).

En premier lieu, on va dire à Bulma qu’on va avoir une ligne avec plusieurs colonnes. Et cette ligne, c’est la class « columns ». Et à l’intérieur, on va mettre plusieurs colonnes avec la classe « column ». Voici une ligne avec 4 éléments :

<div class="columns">
    <div class="column has-background-primary">
        <p class="has-text-centered">News</p>
    </div>
    <div class="column has-background-link">
        <p class="has-text-centered">Sorties de jeux</p>
    </div>
    <div class="column has-background-info">
        <p class="has-text-centered">Test</p>
    </div>
    <div class="column has-background-warning">
        <p class="has-text-centered">Forum</p>
    </div>
</div>

Remarquez que je n’ai pas stipulé de taille de colonne, donc bulma repartira équitablement les 4 colonnes. Voici le résultat :

Comme on peut le voir, j’ai centré le texte dans les colonnes et j’ai mis une couleur différente fois pour qu’on fasse la distinction. Vous voyez un peu l’esprit. Maintenant, on va faire en sorte que la première colonne soit un peu plus grande que les autres. Pour ça, voici le code :

<div class="columns">
    <div class="column has-background-primary is-6">
        <p class="has-text-centered">News</p>
    </div>
    <div class="column has-background-link is-2">
        <p class="has-text-centered">Sorties de jeux</p>
    </div>
    <div class="column has-background-info is-2">
        <p class="has-text-centered">Test</p>
    </div>
    <div class="column has-background-warning is-2">
        <p class="has-text-centered">Forum</p>
    </div>
</div>

ce qui donne comme résultat :

Ce que j’ai rajouté, c’est la taille des colonnes. Si vous connaissez un peu certains framework CSS, vous devriez savoir ce qu’est la règle des 12. Si ce n’est pas le cas, sachez qu’on va simplement diviser la largeur de la page par 12 et qu’on va donner une taille à chaque colonne. Dans mon code, j’ai mis 6 à la première colonne et 2 aux trois autres. On peut le voir dans les class, par exemple « is-6 ».

Et le point de rupture ?

J’y viens. Maintenant que l’on sait faire des colonnes, on va configurer un peu les points de rupture (breakpoint). Par exemple, le breakpoint tablet est à 769. Cela veut dire que si votre fenêtre fait moins de 769px de largeur, alors les colonnes vont s’empiler. Par exemple, là je viens de mettre ma fenêtre à 600px.

Regardons encore un peu le texte que j’avais déjà montré plus tôt.

<div class="columns">
    <div class="column has-background-primary is-6">
        <p class="has-text-centered">News</p>
    </div>
    <div class="column has-background-link is-2">
        <p class="has-text-centered">Sorties de jeux</p>
    </div>
    <div class="column has-background-info is-2">
        <p class="has-text-centered">Test</p>
    </div>
    <div class="column has-background-warning is-2">
        <p class="has-text-centered">Forum</p>
    </div>
</div>

Ce code a aussi un breakpoint mais comme vous le voyez, à aucun moment je l’ai spécifié. C’est normal car par défaut, le breakpoint sera en mode tablet. D’ailleurs, je vais vous montrer les différents breakpoint qui existent.

Mobile : 768px (Pas de breakpoint)
Tablet : 769px (breakpoint en dessous de 769)
Desktop : 1024px (breakpoint en dessous de 1024)
Widescreen : 1216px (breakpoint en dessous de 1216)
FullHD : 1408px (breakpoint en dessous de 1408)

Si vous voulez des breakpoint vraiment précis (par exemple, un breakpoint qu’entre 700px et 800px, sachez que vous pouvez configurer tout ça. Il vous suffit d’aller faire un petit tour dans la documentation et faire pas mal de testes avec ce que bulma vous propose. Là je fais simplement un breakpoint desktop car je veux que les éléments s’empilent lorsque ma fenêtre passe en dessous des 1024px.

<div class="columns is-desktop">
    <div class="column has-background-primary is-6">
        <p class="has-text-centered">News</p>
    </div>
    <div class="column has-background-link is-2">
        <p class="has-text-centered">Sorties de jeux</p>
    </div>
    <div class="column has-background-info is-2">
        <p class="has-text-centered">Test</p>
    </div>
    <div class="column has-background-warning is-2">
        <p class="has-text-centered">Forum</p>
    </div>
</div>

Regardez bien la première ligne, lorsqu’on déclare columns dans la classe. J’ai rajouté is-desktop. Et c’est là toute la magie.

Bulma nous aime

Voilà, je vous ai présenté les deux principales utilisations de Bulma, à savoir le design et le responsive. Maintenant, il est clair que nous avons vu que la face visible de l’iceberg car bulma vous propose encore pas mal d’autres feature à découvrir. Même s’il est encore qu’en béta, il a déjà l’esprit d’un grand.