Bulma est un framework CSS très en vogue en ce moment. Il est basé sur le modèle de positionnement Flexbox, et sur les dernières technologies CSS. A noter qu'aucun fichier Javascript n'est inclus.
J'ai commencé à l'utiliser sur certains projets (dont ce site), et je ne le regrette pas. Pour ceux qui ont déjà travaillé avec Bootstrap, le fonctionnement des deux frameworks est assez similaire, et donc l'apprentissage de Bulma sera très rapide.
Bulma est basé sur Sass, nous allons voir dans cet article comment l'utiliser pour personnaliser son apparence.
J'ai créé un projet sur Github, vous pouvez le télécharger ici si vous voulez suivre le tuto avec, mais ce n'est pas obligatoire car je vais expliquer pas à pas les étapes pour le réaliser.
Mise en place
Sass peut être installé de différentes manières, celle qui va être traitée ici nécessite que Node.js et npm soient installés. Si ce n'est pas encore le cas, je vous renvoie vers la page de téléchargement de Node.js.
Ouvrir un terminal pour vérifier que tout est installé :
$ node --version
v10.19.0
$ npm --version
6.14.9Les version peuvent différer mais ce qui compte c'est qu'il n'y ait pas d'erreur.
Tout d'abord créer un dossier pour le projet (je l'ai appelé ici tuto_bulma_theme) et créer les dossiers fichiers suivants :
/tuto_bulma_theme/index.html
Le fichier HTML par défaut, qui inclut le fichier CSS du thème généré, et une page simple avec une navigation et un titre en full page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bulma Theme - sample page</title>
<!-- Load Bulma Theme -->
<link rel="stylesheet" href="./css/bulma-theme.css">
</head>
<body>
<nav class="navbar has-shadow is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://versions.bulma.io/0.7.2/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">Item 1</a>
<a class="navbar-item">Item 2</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Dropdown</a>
<div class="navbar-dropdown">
<a class="navbar-item">Sub-item 1</a>
<a class="navbar-item">Sub-item 2</a>
<hr class="navbar-divider">
<a class="navbar-item">Sub-item 3</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-text">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
</a>
<a class="button is-text">
<span class="icon">
<i class="fab fa-github"></i>
</span>
</a>
<a class="button is-primary">
<strong>Button 1</strong>
</a>
<a class="button is-light">Button 2</a>
</div>
</div>
</div>
</div>
</nav>
<section class="hero is-primary is-fullheight">
<div class="hero-body">
<div class="container is-max-desktop">
<p class="title is-size-1">
Bulma Theme sample page
</p>
<p class="subtitle is-size-3">
Help you to make the best <strong>Bulma</strong> theme
</p>
</div>
</div>
</section>
<!-- Font Awesome icons -->
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
<!-- Script for navbar burger -->
<script src="./js/navbar-toggle.js"></script>
</body>
</html>/tuto_bulma_theme/sass/bulma-theme.scss
Le fichier Sass du thème Bulma. C'est ici que tout se joue, j'ai ajouté en commentaires un exemple de thème fourni dans la documentation officielle, dans lequel on modifie quelques variables.
Il faut savoir que Sass est très souple, vous pouvez modifier des variables, ajouter ou modifier des classes, et vous pouvez aussi utiliser du CSS classique - ce que je fais car je ne suis pas un expert en Sass ;)
@charset "utf-8";
// set variables, update styles or create your own classes
// existing variables :
// https://bulma.io/documentation/customize/variables/
// Example (copied from Bulma's documentation) :
// Import a Google Font
// @import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
// Set your brand colors
// $purple: #8A4D76;
// $pink: #FA7C91;
// $brown: #757763;
// $beige-light: #D0D1CD;
// $beige-lighter: #EFF0EB;
// Update Bulma's global variables
// $family-sans-serif: "Nunito", sans-serif;
// $grey-dark: $brown;
// $grey-light: $beige-light;
// $primary: $purple;
// $link: $pink;
// $widescreen-enabled: false;
// $fullhd-enabled: false;
// Update some of Bulma's component variables
// $body-background-color: $beige-lighter;
// $control-border-width: 2px;
// $input-border-color: transparent;
// $input-shadow: none;
// import all Bulma
// you can also import only files you need
@import "../node_modules/bulma/bulma.sass";/tuto_bulma_theme/js/navbar-toggle.js
Par défaut Bulma est fourni sans JS, ce fichier est là juste pour faire fonctionner le menu principal en responsive (mobile et tablette).
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});Le workflow npm
Nous allons maintenant installer les dépendances nécessaires à compiler notre fichier Sass en CSS lisible par le navigateur.
En ligne de commande, depuis le dossier racine du projet :
$ npm initVous pouvez laisser les valeurs par défaut, un fichier package.json est généré à la racine du projet.
Ensuite il faut installer les dépendances :
$ npm install bulma sass concurrently http-server --save-devOn installe donc Bulma et Sass, mais également un serveur web intégré pour voir le thème (http-server) et un outil pour lancer plusieurs commandes npm à la fois (concurrently) compatible Windows / Linux / Mac OS X.
Le fichier package.json doit ressembler à ce stade à ça :
{
"name": "tuto_bulma_theme",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"bulma": "^0.9.1",
"concurrently": "^5.3.0",
"http-server": "^0.12.3",
"sass": "^1.30.0"
}
}Nous allons maintenaint créer les commandes npm pour compiler notre Sass en CSS :
{
// ...
"scripts": {
"build": "sass --no-source-map sass/bulma-theme.scss:css/bulma-theme.css",
"watch": "sass --watch --no-source-map sass/bulma-theme.scss:css/bulma-theme.css",
"start": "concurrently \"npm run build\" \"npm run watch\" \"http-server -o\""
},
// ...
}Les commandes sont très explicites :
- build compile le thème Sass vers du CSS
- watch compile le thème Sass vers du CSS en cas de changement
- start lance le build puis le watch et ouvre un navigateur pour afficher le thème généré
Tester le projet
Depuis un terminal on lance la commande npm start :
$ npm run startSi tout s'est bien passé vous devriez voir la page suivante (la première génération pouvant être longue il faudra peut être recharger la page) :
Pour tester que tout fonctionne bien, décommenter le code dans l'exemple du fichier /sass/bulma-theme.scss, attendre un peu et recharger la page :
Aller plus loin
La liste des variables Sass modifiables est disponible dans la documentation, il y en a un paquet du coup il y a de quoi faire juste en modifiant leur valeur.
L'avantage de cette méthode c'est qu'elle fonctionnera avec tous les frameworks basés sur Sass, tel que Bootstrap.
A propos de l'auteur
Tanguy Dechiron
Développeur web fullstack (Symfony++).
Passionné de littérature fantasy, jeux de société.
Cycliste du dimanche.