Bulma, démarrage rapide.

Bulma est un framework CSS moderne et léger basé sur Flexbox, offrant des classes pré-construites pour créer des interfaces réactives, élégantes et faciles à personnaliser.

 18 oct 2024 ·   2 min ·  

La structure de base.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
  <title>Page avec Structure Complète Bulma</title>
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#">
          <img src="https://via.placeholder.com/112x28" alt="Logo">
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item">Accueil</a>
          <a class="navbar-item">Articles</a>
          <a class="navbar-item">À propos</a>
        </div>
        <div class="navbar-end">
          <a class="navbar-item">Contact</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Section 1 - Introduction -->
  <section class="section">
    <div class="container">
      <h1 class="title">Bienvenue sur notre site</h1>
      <p class="subtitle">Une introduction rapide à notre contenu et à notre mission.</p>
    </div>
  </section>

  <!-- Section 2 - Grille de Colonnes -->
  <section class="section">
    <div class="container">
      <div class="columns">
        <!-- Colonne 1 -->
        <div class="column">
          <div class="box">
            <h2 class="title is-4">Colonne 1</h2>
            <p>Voici du contenu pour la première colonne. Elle peut contenir des images, du texte ou des éléments divers.</p>
          </div>
        </div>
        <!-- Colonne 2 -->
        <div class="column">
          <div class="box">
            <h2 class="title is-4">Colonne 2</h2>
            <p>Voici du contenu pour la deuxième colonne. Utilisez les colonnes pour organiser l'affichage sur plusieurs sections.</p>
          </div>
        </div>
        <!-- Colonne 3 -->
        <div class="column">
          <div class="box">
            <h2 class="title is-4">Colonne 3</h2>
            <p>Voici du contenu pour la troisième colonne. Les colonnes sont responsives et s'ajustent en fonction de la taille de l'écran.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Section 3 - Contenu additionnel -->
  <section class="section">
    <div class="container">
      <div class="content">
        <h2>Titre de la section additionnelle</h2>
        <p>Cette section contient du texte supplémentaire et peut inclure d'autres éléments comme des images, des listes ou des citations.</p>
        <ul>
          <li>Premier point de la liste</li>
          <li>Deuxième point de la liste</li>
          <li>Troisième point de la liste</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="content has-text-centered">
        <p>© 2024 Mon site web. Tous droits réservés.</p>
        <p>
          <a href="#">Mentions légales</a> | <a href="#">Politique de confidentialité</a>
        </p>
      </div>
    </div>
  </footer>

</body>
</html>

Résultat du code

Modulariser la feuille de style

Pour utiliser uniquement certains styles de Bulma, sans importer toute la bibliothèque, voici les étapes à suivre :

1. Installer Bulma via npm (optionnel)

Si vous utilisez npm, installez Bulma via la commande suivante :

npm install bulma

Cela vous permet d’accéder aux fichiers Sass de Bulma.

2. Importer les fichiers Sass spécifiques

Bulma est divisé en plusieurs modules Sass que vous pouvez importer individuellement. Plutôt que d’importer tout Bulma, vous pouvez sélectionner uniquement les parties qui vous intéressent.

Voici un exemple pour n’inclure que les boutons et les grilles (columns) :

// Variables globales et initialisation
@import "bulma/sass/utilities/_all";

// Import des composants spécifiques
@import "bulma/sass/elements/button";
@import "bulma/sass/grid/columns";

3. Configurer vos variables Sass (optionnel)

Avant d’importer Bulma, vous pouvez configurer des variables pour personnaliser votre version de Bulma. Par exemple, vous pouvez changer les couleurs ou désactiver certains éléments globaux.

// Variables personnalisées
$primary: #ff3860;
$button-radius: 0;

// Import des styles nécessaires
@import "bulma/sass/elements/button";

4. Compiler le fichier Sass

Une fois que vous avez choisi les fichiers à importer, compilez votre fichier .scss en CSS. Si vous utilisez npm, vous pouvez ajouter un script pour cela dans le fichier package.json :

"scripts": {
  "build-css": "node-sass --output-style compressed -o css/ sass/"
}

Puis exécutez la commande :

npm run build-css

5. Utiliser le fichier CSS généré

Incluez le fichier CSS généré dans votre projet comme n’importe quel fichier CSS.

Conclusion

Cela vous permet d’utiliser uniquement les parties de Bulma dont vous avez besoin, réduisant ainsi la taille de votre fichier CSS et améliorant les performances.

Ressources

Articles similaires

Partage et commentaires

Partager cet article sur :  Mastodon  X (Twitter)  Facebook  LinkedIn  Reddit

Vous pouvez commenter cet article grâce à ce fil de discussion sur Mastodon (avec Mastodon ou un autre compte ActivityPub/​Fediverse).