Lernen Sie Bulma CSS in 5 Minuten - Ein Tutorial für Anfänger

Bulma ist ein einfaches, elegantes und modernes CSS-Framework, das viele Entwickler gegenüber Bootstrap bevorzugen. Persönlich denke ich, dass Bulma standardmäßig ein besseres Design hat und sich auch leichter anfühlt.

In diesem Tutorial gebe ich Ihnen eine superschnelle Einführung in die Bibliothek.

Wir haben auch einen kostenlosen Bulma-Kurs erstellt. Klicken Sie hier, um es zu überprüfen!

Sie können auf das Bild klicken, um zum Kurs zu gelangen

Die Einrichtung

Das Einrichten von Bulma ist sehr einfach und kann auf verschiedene Arten erfolgen, unabhängig davon, ob Sie NPM bevorzugen, es direkt aus den Dokumenten herunterladen oder ein CDN verwenden. Wir werden einfach aus unserer HTML-Datei wie folgt auf ein CDN verlinken:

Dadurch erhalten wir Zugang zu den Bulma-Klassen. Und das ist eigentlich alles, was Bulma ist - eine Sammlung von Klassen.

Modifikatoren

Das erste, was Sie über Bulma lernen sollten, sind die Modifikatorklassen. Mit diesen können Sie alternative Stile für fast alle Bulma-Elemente festlegen. Sie beginnen alle mit is-*oder has-*, und dann ersetzen Sie das *durch den gewünschten Stil.

Um dieses Konzept richtig zu verstehen, schauen wir uns zunächst die Schaltflächen an.

Tasten

Um einen normalen Knopf in einen Bulma-Knopf zu verwandeln, geben wir ihm einfach die Klasse von button.

Click here 

Was zu folgendem Stil führt:

Wie Sie sehen können, hat es standardmäßig ein schönes flaches Design. Um das Styling zu ändern, verwenden wir Bulma-Modifikatoren. Beginnen wir damit, den Knopf größer, grüner und mit abgerundeten Ecken zu machen:

Click here 

Dieses Ergebnis ist ein angenehm aussehender Knopf:

Sie können auch Modifikatoren verwenden, um den Status von Schaltflächen zu steuern. Fügen wir zum Beispiel die Klasse hinzu is-focused, die einen Rand um sie herum hinzufügt:

Verwenden wir zum Schluss auch einen der has-*Modifikatoren. Diese steuern normalerweise, was sich im Element befindet. In unserem Fall der Text. Fügen wir hinzu has-text-weight-bold.

Hier ist das Ergebnis:

Ich würde empfehlen, dass Sie mit Kombinationen der verschiedenen Klassen herumspielen, um zu verstehen, wie flexibel dieses System ist. Die Kombinationen sind fast endlos. Weitere Informationen finden Sie im Abschnitt mit den Schaltflächen in den Dokumenten.

Säulen

Im Mittelpunkt jedes CSS-Frameworks steht die Lösung von Spalten, da dies für fast jede Website relevant ist, die Sie jemals erstellen werden. Bulma basiert auf Flexbox, daher ist es wirklich einfach, Spalten zu erstellen. Erstellen wir eine Zeile mit vier Spalten.

 First column Second column Third column Fourth column 

Zuerst erstellen wir einen Container mit einer Klasse von columnsund dann geben wir jedem der Kinder eine Klasse von column. Daraus ergibt sich Folgendes:

Ich habe auch einen Rahmen um die Spalten hinzugefügt, um sie deutlicher zu machen.

Ich habe auch einen Rahmen um die Spalten hinzugefügt, um sie deutlicher zu machen.

Beachten Sie, dass Sie so viele Spalten hinzufügen können, wie Sie möchten. Flexbox sorgt dafür, dass der Raum gleichmäßig zwischen ihnen aufgeteilt wird.

Um den Spalten Farben zu geben, können wir den darin enthaltenen Text durch a ersetzen

tag, und geben Sie ihm die notificationKlasse und einen is-*Modifikator. So zum Beispiel:

Erste Spalte

Lassen Sie uns tun dies mit der is-info, is-success, is-warningund is-dangerModifikatoren, die Ergebnisse in der folgenden:

Die notificationKlasse ist eigentlich dazu gedacht, Benutzer auf etwas aufmerksam zu machen, da Sie den Hintergrund mithilfe der is-*Modifikatoren mit einer Farbe füllen können . Hier funktioniert es gut zum Trennen der Spalten.

Wir können auch leicht die Breite einer Spalte steuern. Fügen wir den is-halfModifikator zur grünen Spalte hinzu.

Dies führt dazu, dass die zweite Spalte jetzt die Hälfte der Breite einnimmt, während die drei anderen jeweils ein Drittel der verbleibenden Hälfte einnehmen.

Hier sind die Optionen, mit denen Sie die Breite der Spalten steuern können:

  • 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

Held

Lassen Sie uns zum Schluss auch lernen, wie man in Bulma einen Helden erschafft. Wir werden das semantische verwenden , und geben ihm eine Klasse heround is-infoes etwas Farbe zu geben. Wir müssen der Klasse auch ein Kind hinzufügen hero-body.

Um diesen Helden dazu zu bringen, etwas Sinnvolles zu tun, werden wir ein Containerelement in den Körper einfügen und einen Titel und einen Untertitel hinzufügen.

Primary title

Primary subtitle

Jetzt fängt es an gut auszusehen! Wenn wir möchten, dass es größer wird, können wir einfach is-mediumdas Tag selbst hinzufügen .

 ... 

Und das ist es!

Sie haben jetzt einen grundlegenden Eindruck davon bekommen, wie Bulma funktioniert. Und das Beste daran ist, dass der Rest der Bibliothek so intuitiv und einfach ist wie die Konzepte, die Sie bisher gesehen haben. Wenn Sie dies verstehen, werden Sie den Rest ohne Probleme verstehen.

Schauen Sie sich unbedingt den kostenlosen Bulma-Kurs auf Scrimba an, wenn Sie mehr erfahren möchten!

Danke fürs Lesen! Mein Name ist Per Borgen, ich bin Mitbegründer von Scrimba - der einfachste Weg, das Codieren zu lernen. Sie sollten sich unser Responsive Web Design Bootcamp ansehen, wenn Sie lernen möchten, moderne Websites auf professioneller Ebene zu erstellen.