Beginnen Sie mit Bulma

Finden
(Bildnachweis: Bulma)

Möchten Sie mit Bulma beginnen? Du bist am richtigen Ort. Bulma ist ein beliebtes CSS-Framework mit einem einfachen Flexbox-Grid-System. Es unterscheidet sich von anderen Frameworks dadurch, dass es einen leichteren Ansatz verfolgt und kein JavaScript enthält. Diese Entscheidung liegt ganz beim Entwickler (weitere Optionen finden Sie in unserer Auswahl unter beste CSS-Frameworks ).

In diesem Tutorial zeigen wir Ihnen, wie Sie Bulma installieren und eine Website mit ihren verschiedenen Klassen erstellen. Um zu beweisen, wie vielseitig die Klassen in Bulma sind, wurde die gesamte Tutorial-Seite erstellt, ohne eine einzige Zeile CSS zu schreiben. Willst du andere Optionen? Versuchen Sie es mit einem ausgezeichneten Webseitenersteller . Um sicherzustellen, dass Ihre Website optimal funktioniert, wählen Sie die richtige aus Web-Hosting Bedienung.

Flash-Verkauf generieren



(Bildnachweis: Zukunft)

Generate CSS ist das heißeste Web-Event der Stadt. Vom 20. bis 22. September können Sie mit dem Code ein Ticket zum halben Preis abholen FLASHSALE5. Klicken Sie auf das Bild, um mehr zu erfahren.

Wasserkolben Kaffee- und Teeflasche

01. Fangen Sie an

Bulma: Los geht

(Bildnachweis: Bulma)

Erstellen Sie ein neues Verzeichnis und erstellen Sie darin ein index.html Datei. Öffnen Sie diese Datei in einem Code-Editor und erstellen Sie ein einfaches HTML-Starterdokument mit einem DOCTYPE-HTML-Code und einem ansprechenden Ansichtsfenster-Tag.

Page Title

02. Installation finden

Die sofortige Verwendung von Bulma ist so schnell wie das Hinzufügen einer einzelnen CSS-Datei. Fügen Sie mithilfe des CDN einen Link in den HTML-Code ein. Wenn es notwendig ist, Variablen zu ändern und mehr Kontrolle über das Framework zu haben, npm Bulma installieren kann verwendet werden (siehe die vollständige Dokumentation ). Für die volle Erfahrung sollte auch font awesome 5 enthalten sein.

03. Erstellen Sie eine Seite

Bulma: Hallo Welt

(Bildnachweis: Bulma)

Erstellen Sie innerhalb des Body-Tags ein Abschnittselement und ein Div mit der Klasse Container . Erstellen Sie innerhalb des Containers ein h1 mit der Klasse Titel dann ein Absatz mit der Klasse Untertitel . Geben Sie zunächst 'Hallo Welt' in den Titel und Text in den Absatz ein. Wir haben jetzt die grundlegende Starter-Vorlage für Bulma.

Hello World

This is the basic starter template for Bulma

04. Erstelle eine Top-Heldenleiste

Erstellen Sie einen neuen Abschnitt über dem vorherigen und anstelle der Klasse Sektion , gib ihm die Klasse Held . Die Heldenklasse ermöglicht die Erstellung eines Banners in voller Breite mit einer Vielzahl von Optionen zur Steuerung der Höhe. In diesem neuen Abschnitt erstellen Sie ein Div mit der Klasse Heldenkörper und dann a Container Dies wird den Inhalt enthalten.

Wie erstelle ich einen Kalender in Indesign?
...

05. Titel und Untertitel hinzufügen

Fügen Sie innerhalb des Container-Divs ein h1- und ein h2-Tag mit den Klassen hinzu Titel und Untertitel . Dies sind Typografieklassen, die den Inhalt vergrößern. Bulma ist schlau zu wissen, wann ein Titel und ein Untertitel kombiniert werden, und bringt sie näher zusammen.



06. Fügen Sie einen Farbtupfer hinzu

Finden: Farbe

(Bildnachweis: Bulma)

Fügen Sie die Klasse hinzu ist-primär zum Heldenbereich. Dadurch wird die Primärfarbe auf den Hintergrund angewendet und der Text in die hellere Variante geändert. Statt primär , die Info , Erfolg , Warnung , Achtung , Licht und dunkel kann auch gewählt werden

07. Teilen Sie den Inhalt in Spalten auf

Der erste Inhaltsbereich der Website ist in zwei Spalten unterteilt. Erstellen Sie einen neuen Abschnitt mit dem Klassenabschnitt und fügen Sie einen Container hinzu. Um die Spalten einzurichten, wird ein div mit hinzugefügt Säulen Klasse. Jede Spalte wird im übergeordneten Container hinzugefügt. Spalten platzieren sich gleichmäßig auf dem verfügbaren Platz mit einem kleinen Abstand dazwischen, sofern nicht anders angegeben.

Wenn Sie viel Inhalt haben, stellen Sie sicher, dass Sie Ihre Assets in einem zuverlässigen Cloud-Speicher sichern.

... ...

08. Erstellen Sie reaktionsschnelle Bilder

Bulma: reaktionsschnelle Bilder

(Bildnachweis: Bulma)

Die zweite Spalte enthält ein Bild. Wickeln Sie das Bild in ein Figurenelement ein und geben Sie der Figur nach Möglichkeit eine Klasse des Seitenverhältnisses des Bildes. Im Beispiel 16by9 wurde verwendet (siehe die vollständige Liste der verfügbaren Verhältnisse ).

09. Schlagen Sie eine Aktion mit Schaltflächen vor

Die Schaltflächenklasse erstellt farbenfrohe Schaltflächen und kann angewendet werden Elemente oder Elemente in Formularen. Fügen Sie der ersten Spalte zwei Schaltflächen hinzu und wenden Sie Farbmodifikatoren an. Wenn Sie mehr als eine Schaltfläche verwenden, schließen Sie sie mit der Klasse in ein div ein Tasten Dies korrigiert die Lücke und ermöglicht die Anwendung von Klassen als Gruppe.

Find out more Buy now

10. Erstellen Sie Box-Inhalte

Bulma: Boxed Content

(Bildnachweis: Bulma)

Fügen Sie am Ende der Seite einen neuen Abschnitt mit drei Spalten hinzu. Innerhalb der Spalten wird ein Box-Element hinzugefügt. Box-Elemente sind einfache Container mit einem Rand, der sie vom Hintergrund einer Seite trennt.

Test

11. Verwenden Sie Symbolfelder

Bulma lässt sich in Font Awesome 5 integrieren, ist jedoch mit allen Schriftbibliotheken kompatibel und verfügt über Klassen zum Aufrufen der meisten verfügbaren Symbole. Fügen Sie in jedem Feld einen Inhaltscontainer hinzu, gefolgt von einem span-Element mit der Klasse Symbol . Verwenden Sie innerhalb der Spanne eine Element zum Aufrufen der erforderlichen Klassen für das gewünschte Symbol. Symbole werden genauso gefärbt wie Text.

... ...

12. Sei mutig

Bulma: Sei mutig

Apple MacBook Pro umfasst 15 Zoll
(Bildnachweis: Bulma)

Erstellen Sie unten auf der Seite einen neuen zweispaltigen Heldenabschnitt mit einem ist info Klasse zum Abschnitt. Für einen interessanten Effekt wenden Sie auch die an ist fett Klasse in diesem Abschnitt für einen subtilen Farbverlauf. Dieser Modifikator funktioniert mit allen sieben Hauptfarben.

13. Ändern Sie die Ebenen

Ebenen sind eine großartige Möglichkeit, um sicherzustellen, dass Elemente vertikal in einer Reihe zentriert sind. Fügen Sie in einem neuen Abschnitt am Ende der Seite ein Div mit der Ebenenklasse hinzu und verschachteln Sie es in vier Ebenenelementen. Alle Inhalte, die innerhalb eines Ebenenelements hinzugefügt werden, werden vertikal ausgerichtet.

... ...

14. Formulare hinzufügen und steuern

Um ein Formular am Ende der Seite hinzuzufügen, erstellen Sie einen neuen zweispaltigen Heldenabschnitt mit ist-primär . Teilen Sie es in zwei Spalten auf und erstellen Sie in der rechten Spalte eine Feld Klasse. Die Feldklasse wird verwendet, um mehrere Formulareingaben zu gruppieren und sicherzustellen, dass sie den richtigen Abstand haben. Jede Eingabe muss auch in eine Einzelperson eingeschlossen werden .Steuerung Klasse.

15. Geben Sie den Benutzern Feedback

Finden: Feedback

(Bildnachweis: Bulma)

Sobald ein Formular gesendet wurde, sollte es eine Nachricht an die Benutzer zurückgeben, damit diese wissen, was als nächstes passiert. Obwohl Bulma nicht steuern kann, wann diese Nachricht angezeigt wird, kann das Front-End mit der Nachrichtenklasse erstellt werden.

Thank you!

...

Mit der flexiblen Fußzeilenklasse kann jedes Element am Ende einer Seite hinzugefügt werden. Dies bietet Platz für Copyright-Informationen und die Navigation unten und verleiht der Website ein Finish.

...

17. Passen Sie die Variablen an

Die meisten Projekte, die über Prototypen hinausgehen, müssen mit einer Markenrichtlinie und Farben arbeiten. Ebenso kann man davon ausgehen, dass ein Designer die Schriftarten, Farben oder andere Aspekte von Bulma ändern muss. Ein wesentlicher Teil von Bulma ist, dass es anpassbar und modular ist. Module können nicht nur selektiv importiert werden, sondern es können auch bis zu 415 Sass-Variablen innerhalb des Frameworks geändert werden.

So bearbeiten Sie Gifs in Photoshop

Die Verwendung von Variablen bedeutet, dass durch Festlegen einer neuen Farbe als Primärfarbe diese Farbe im gesamten Bulma-Framework für dieses Projekt geändert wird. Das Einrichten kann zunächst schwierig sein, es wurden jedoch Anleitungen verwendet drei verschiedene Methoden in der Dokumentation.

Dieser Artikel wurde ursprünglich in Ausgabe 289 des Creative Web Design Magazins veröffentlicht Webdesigner . Ausgabe 289 kaufen oder Abonnieren Sie hier .

Weiterlesen: