Apprenez Bulma CSS en 5 minutes - Un tutoriel pour les débutants

Bulma est un framework CSS simple, élégant et moderne que de nombreux développeurs préfèrent à Bootstrap. Personnellement, je pense que Bulma a un meilleur design par défaut, et il se sent également plus léger.

Dans ce tutoriel, je vais vous donner une introduction super rapide à la bibliothèque.

Nous avons également créé un cours Bulma gratuit. Cliquez ici pour le découvrir!

Vous pouvez cliquer sur l'image pour accéder au cours

La mise en place

La configuration de Bulma est très simple et vous pouvez le faire de plusieurs manières différentes, que vous préfériez NPM, en le téléchargeant directement à partir de la documentation ou en utilisant un CDN. Nous allons simplement créer un lien vers un CDN à partir de notre fichier HTML, comme ceci:

Cela nous donnera accès aux classes Bulma. Et c'est en fait tout ce que Bulma est - une collection de classes.

Modificateurs

La première chose que vous devriez apprendre sur Bulma est les classes de modificateurs. Ceux-ci vous permettent de définir des styles alternatifs pour presque tous les éléments Bulma. Ils commencent tous par is-*ou has-*, puis vous remplacez le *par le style souhaité.

Pour bien comprendre ce concept, commençons par regarder les boutons.

Boutons

Pour transformer un bouton normal en bouton Bulma, nous lui donnerons simplement la classe de button.

Click here 

Ce qui donne le style suivant:

Comme vous pouvez le voir, il a un joli design plat par défaut. Pour changer le style, nous utiliserons les modificateurs Bulma. Commençons par agrandir le bouton, en vert et avec des coins arrondis:

Click here 

Ce résultat est un bouton d'apparence agréable:

Vous pouvez également utiliser des modificateurs pour contrôler l'état des boutons. Ajoutons, par exemple, la classe is-focused, qui ajoute une bordure autour d'elle:

Enfin, utilisons également l'un des has-*modificateurs. Ceux-ci contrôlent généralement ce qu'il y a à l'intérieur de l'élément. Dans notre cas, le texte. Ajoutons has-text-weight-bold.

Voici le résultat:

Je vous recommande de jouer avec les combinaisons des différentes classes afin de comprendre à quel point ce système est flexible. Les combinaisons sont presque infinies. Consultez la section des boutons dans la documentation pour plus d'informations.

Colonnes

La manière dont ils résolvent les colonnes est au cœur de tout cadre CSS, car cela est pertinent pour presque tous les sites Web que vous construirez. Bulma est basé sur Flexbox, il est donc très simple de créer des colonnes. Créons une ligne avec quatre colonnes.

 First column Second column Third column Fourth column 

Tout d'abord, nous créons un conteneur avec une classe de columns, puis nous attribuons à chacun des enfants une classe de column. Il en résulte ce qui suit:

J'ai également ajouté une bordure autour des colonnes pour les rendre plus apparentes.

J'ai également ajouté une bordure autour des colonnes pour les rendre plus apparentes.

Notez que vous pouvez ajouter autant de colonnes que vous le souhaitez. Flexbox se charge de répartir l'espace de manière égale entre eux.

Pour donner des couleurs aux colonnes, nous pouvons remplacer le texte à l'intérieur par un

tag, et donnez-lui la notificationclasse et un is-*modificateur. Comme ceci par exemple:

Première colonne

Faisons- en utilisant le is-info, is-success, is-warninget is-dangermodificateurs, ce qui donne le résultat suivant:

La notificationclasse est en fait destinée à alerter les utilisateurs sur quelque chose, car elle vous permet de remplir l'arrière-plan d'une couleur à l'aide des is-*modificateurs. Ici, cela fonctionne bien pour séparer les colonnes.

Nous pouvons également contrôler facilement la largeur d'une colonne. Ajoutons le is-halfmodificateur à la colonne verte.

Ce qui fait que la deuxième colonne occupe désormais la moitié de la largeur, tandis que les trois autres occupent chacune un tiers de la moitié restante.

Voici les options que vous pouvez utiliser pour contrôler la largeur des colonnes:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

héros

Enfin, apprenons également à créer un héros dans Bulma. Nous allons utiliser la sémantique , lui donner une classe de heroet is-infolui donner de la couleur. Nous devons également ajouter un enfant à la classe hero-body.

Afin que ce héros fasse quelque chose de significatif, nous allons ajouter un élément conteneur à l'intérieur du corps et ajouter un titre et un sous-titre.

Primary title

Primary subtitle

Maintenant, ça commence à bien paraître! Si nous voulons qu'il soit plus grand, nous pouvons simplement ajouter is-mediumle tag lui-même.

 ... 

Et c'est tout!

Vous avez maintenant un avant-goût de base du fonctionnement de Bulma. Et la meilleure partie est que le reste de la bibliothèque est aussi intuitif et simple que les concepts que vous avez vus jusqu'à présent. Donc, si vous comprenez cela, vous comprendrez le reste sans problème.

N'oubliez pas de consulter le cours gratuit Bulma sur Scrimba si vous souhaitez en savoir plus!

Merci d'avoir lu! Je m'appelle Per Borgen, je suis le co-fondateur de Scrimba - le moyen le plus simple d'apprendre à coder. Vous devriez consulter notre bootcamp de conception de sites Web réactifs si vous souhaitez apprendre à créer un site Web moderne à un niveau professionnel.