Bulma.io

De EduTech Wiki
Aller à la navigation Aller à la recherche

Bulma.io : Un Framework CSS Moderne Basé sur Flexbox

Introduction

Bulma est un framework CSS moderne et léger basé sur Flexbox. Il permet de créer des interfaces utilisateur élégantes et réactives grâce à une série de classes prédéfinies. Similaire à Bootstrap, mais avec une approche plus moderne et simple, Bulma est parfait pour les débutants et les développeurs expérimentés qui cherchent une solution rapide pour créer des sites responsives.

Caractéristiques principales

  • Basé sur Flexbox : Construit pour des designs adaptatifs.
  • Syntaxe simple : Des classes claires et intuitives.
  • Composants modulaires : Navbar, cards, grilles, etc.
  • Facilement personnalisable : Utilise des variables Sass pour la personnalisation.

Installation

Il existe plusieurs façons d'intégrer Bulma dans votre projet :

1. Via CDN (Méthode simple)

Intégrer Bulma via un CDN est la méthode la plus simple et ne nécessite aucune installation supplémentaire. 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css">
</head>
<body>
    <!-- Votre contenu ici -->
</body>
</html>

2. Via NPM (Méthode recommandée pour les projets complexes)

Pour les projets utilisant des outils de gestion de paquets comme npm, installez Bulma en exécutant : 

npm install bulma

Ensuite, importez Bulma dans votre fichier principal de styles : 

// styles.scss
@import 'bulma/bulma';

3. Téléchargement direct

Téléchargez directement les fichiers CSS de Bulma depuis le site officiel https://bulma.io et ajoutez-les à votre projet.

Utilisation de Bulma

1. La Grille avec Bulma

Bulma utilise le système de grille de Flexbox. Voici un exemple simple de mise en page avec une grille de 3 colonnes : 

<div class="columns">
    <div class="column">
        Première colonne
    </div>
    <div class="column">
        Deuxième colonne
    </div>
    <div class="column">
        Troisième colonne
    </div>
</div>

2. Les boutons

Les boutons sont faciles à styliser avec Bulma. Utilisez simplement la classe `.button`. Vous pouvez également ajouter des classes supplémentaires comme `.is-primary` ou `.is-danger` pour changer le style du bouton. 

<button class="button is-primary">Bouton Principal</button>
<button class="button is-link">Bouton Lien</button>
<button class="button is-danger">Bouton Danger</button>

3. Les cartes (Cards)

Les cartes sont couramment utilisées pour afficher du contenu de manière organisée. Voici un exemple de carte basique : 

<div class="card">
  <header class="card-header">
    <p class="card-header-title">
      Titre de la Carte
    </p>
  </header>
  <div class="card-content">
    <div class="content">
      Ceci est une carte avec du texte et une mise en forme simple.
    </div>
  </div>
  <footer class="card-footer">
    <a href="#" class="card-footer-item">Voir</a>
    <a href="#" class="card-footer-item">Partager</a>
  </footer>
</div>

4. La Navbar (Barre de navigation)

Bulma propose des composants pour créer facilement une barre de navigation réactive : 

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Accueil
      </a>
      <a class="navbar-item">
        Documentation
      </a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>S'inscrire</strong>
          </a>
          <a class="button is-light">
            Se connecter
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

5. Les Formulaires

Bulma permet de créer des formulaires élégants et réactifs. Voici un exemple d'un formulaire simple : 

<div class="field">
  <label class="label">Nom</label>
  <div class="control">
    <input class="input" type="text" placeholder="Votre nom">
  </div>
</div>

<div class="field">
  <label class="label">Message</label>
  <div class="control">
    <textarea class="textarea" placeholder="Votre message"></textarea>
  </div>
</div>

<div class="field is-grouped">
  <div class="control">
    <button class="button is-link">Envoyer</button>
  </div>
  <div class="control">
    <button class="button is-light">Annuler</button>
  </div>
</div>

Personnalisation

Bulma utilise Sass pour permettre la personnalisation des variables comme les couleurs, les tailles de police, etc. Pour personnaliser Bulma, modifiez les variables avant d'importer le fichier principal : 

// styles.scss
$primary: #ff6347; // Changer la couleur principale
$radius: 5px; // Changer le rayon des bordures

@import 'bulma/bulma';

Conclusion

Bulma est un framework CSS puissant et simple à utiliser pour la création de sites web responsives. Avec ses nombreuses classes et composants modulaires, il permet aux développeurs de gagner du temps dans la mise en page et le design, tout en gardant un code clair et lisible.

Pour plus d'informations et des exemples supplémentaires, consultez la documentation officielle de Bulma : https://bulma.io/documentation/.

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Bulma.io&oldid=179960 »