Beginnen Sie mit 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.
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.
01. Fangen Sie an
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
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.
... 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
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
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
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
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
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!
... 16. Fügen Sie eine Fußzeile hinzu
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.
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:
- 5 inspirierende Webdesign-Fallstudien
- Die besten UI-Design-Tools
- Master minimalistisches Website-Design
