Beginnen Sie mit Bulma

Willst du mit Bulma anfangen? Du bist an der richtigen Stelle. Bulma ist ein beliebtes CSS-Framework mit einem einfachen Flexbox-Gittersystem. Es unterscheidet sich von anderen Frameworks, indem er einen leichteren Ansatz ergreift und keine JavaScript -, die diese Entscheidung vollständig auf den Entwickler lässt (um andere Optionen zu erkunden, siehe unsere Auswahl der beste CSS-Frameworks. ).

In diesem Tutorial zeigen wir, wie Sie Bulma installieren, und erstellen Sie eine Website mit seinen verschiedenen Klassen. Um zu beweisen, wie vielseitig die Klassen in Bulma sind, wurde die gesamte Tutorialseite gebaut, ohne eine einzige Zeile von CSS zu schreiben. Willst du andere Möglichkeiten? Probieren Sie ein hervorragendes ab Webseitenersteller . Und um sicherzustellen, dass Ihre Site am besten läuft, wählen Sie das Recht aus Web-Hosting Bedienung.

• Klicken Sie hier, um die Tutorialialdateien herunterzuladen

Generieren Sie CSS ist das heißeste Webveranstaltung der Stadt. Ab 20-22 September können Sie ein Ticket für den halben Preis mit dem Code abholen Flashsale55. Klicken Sie auf das Bild, um mehr zu erfahren.

01. Erste Schritte

Erstellen Sie ein neues Verzeichnis und erstellen Sie eine index.html. Datei. Öffnen Sie diese Datei in einem Code-Editor und erstellen Sie ein einfaches Starter-HTML-Dokument mit einem Doctype-HTML und einem ansprechenden Ansichtsfenster-Tag.

 & lt ;! doctype html & gt;
& lt; HTML & GT;
& lt; head & gt;
& lt; Meta Name = "Ansichtsfenster" Inhalt =
Width = Gerätebreite, Initial-Scale = 1 "& gt;
& lt; Titel & GT; Seitentitel & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; / body & gt;
& lt; / html & gt; 

02. Installieren Sie Bulma.

Die Verwendung von Bulma aus dem Feld ist so schnell wie das Hinzufügen einer einzelnen CSS-Datei. Verwenden des CDN Fügen Sie einen Link in der HTML hinzu. Wenn es notwendig ist, Variablen zu ändern und mehr Kontrolle über den Rahmen zu haben, NPM installieren Bulma. kann verwendet werden (siehe das Vollständige Dokumentation ). Für das volle Erlebnis sollte die Schrift fantastisch 5 ebenfalls enthalten sein.

 & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt;
& lt; Skript mit SRC = "https://use.fontawesome.com/releases/v5.3.1/js/all.js" & gt; & lt; / script & gt; 

03. Baue eine Seite

Erstellen Sie im Körper-Tag ein Abschnittselement und eine DIV mit der Klasse Container . Erstellen Sie innerhalb des Containers einen H1 mit der Klasse Titel Dann ein Absatz mit der Klasse Untertitel . Geben Sie jetzt 'Hallo World' in den Titel und einen Text in den Absatz in den Titel ein. Wir haben jetzt die grundlegende Anlasservorlage für Bulma.

 & lt; Abschnittsklasse = "Abschnitt" & GT;
& lt; div class = "container" & gt;
& lt; H1-Klasse = "Titel" & GT;
Hallo Welt
& lt; / h1 & gt;
& lt; p class = "subtitle" & gt;
Dies ist der Grundstarter
Vorlage für Bulma.
& lt; / p & gt;
& lt; / div & gt;
& lt; / ordnung & gt; 

04. Erstellen Sie eine Top-Helden-Bar

Machen Sie einen neuen Abschnitt über dem vorherigen und anstelle der Klasse Sektion , geben Sie ihm die Klasse Held . Die Heldenklasse ermöglicht die Erstellung eines Full-Width-Banners mit einer Vielzahl von Optionen, die ihre Höhe steuern. Erstellen Sie in diesem neuen Abschnitt eine DIV mit der Klasse Heldenkörper und dann A. Container Dies hält den Inhalt.

 & lt; Abschnittsklasse = "Held" & GT;
& lt; div class = "Heldenkörper" & GT;
& lt; div class = "container" & gt; ... & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

05. Titel und Untertitel hinzufügen

Innerhalb des Container-DIV fügen Sie mit den Klassen ein H1- und H2-Tag hinzu Titel und Untertitel . Dies sind Typografieklassen, die die Größe ihres Inhalts erhöhen werden. Bulma ist schlau zu wissen, wann ein Titel und ein Untertitel kombiniert werden, und bringt sie näher zusammen.

06. Fügen Sie einen Farbspritz hinzu

Die Klasse hinzufügen ist-primär zum Heldenabschnitt. Dadurch wird die primäre Farbe auf den Hintergrund angewendet und den Text an die leichtere Variante ändern. Statt primär , die Info , Erfolg , Warnung , Achtung , Licht und dunkel kann auch ausgewählt werden

 & lt; Abschnittsklasse = "Held ist-primär" & gt; 

07. Teilen Sie den Inhalt in Spalten auf

Der erste Inhaltsbereich der Website ist in zwei Spalten aufgeteilt. Erstellen Sie einen neuen Abschnitt mit dem Klassenabschnitt und fügen Sie einen Container hinzu. Um die Spalten einrichten, wird ein Div mit hinzugefügt Säulen Klasse. Jede Spalte wird in den Elternbehälter hinzugefügt. Säulen platzieren sich selbst gleichermaßen in dem verfügbaren Raum mit einem kleinen Lücke, wodurch nicht angegeben wird.

Wenn Sie viel Inhalte haben, stellen Sie sicher, dass Sie Ihr Vermögen in einem zuverlässigen Cloud-Speicher zurückgeben.

 & lt; Abschnittsklasse = "Abschnitt" & GT;
& lt; div class = "container" & gt;
& lt; div class = "columente ist-vcenter" & gt;
& lt; div class = "columne" & gt;
...
& lt; / div & gt;
& lt; div class = "columne" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / ordnung & gt; 

08. Erstellen Sie ansprechende Bilder

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

 & lt; div class = "columne" & gt;
& lt; Figure Class = "Image IS-16 by9" & gt;
& lt; img src = "img / dog.jpg" & gt;
& lt; / figure & gt;
& lt; / div & gt; 

09. Aktion mit Knöpfen vorschlagen

Die Schaltflächenklasse erstellt farbenfrohe Schaltflächen und kann angewendet werden & lt; A & gt; Elemente oder & lt; button & gt; Elemente in Forms.add zwei Tasten in der ersten Spalte und wenden Farbmodifizierungsmittel an. Wenn Sie mehr als eine Taste verwenden, wickeln Sie sie mit der Klasse in eine DIV Tasten , was die Lücke korrigiert und die Anwendung von Klassen als Gruppe ermöglicht.

 & lt; div class = "buttons" & gt;
& lt; A Class = "Button IS-Info" & GT;
Erfahren Sie mehr und lt; / a & gt;
& lt; Eine Klasse = "Button ist-Danger isrined" & gt;
Jetzt kaufen & lt; / a & gt;
& lt; / div & gt; 

10. Erstellen Sie den Kästchen Inhalt

Fügen Sie einen neuen Abschnitt am unteren Rand der Seite mit drei Spalten hinzu. Innerhalb der Spalten wird ein Kästchenelement hinzugefügt. Kastenelemente sind einfache Behälter mit einem Rand um sie herum, der sie vom Hintergrund einer Seite trennen.

 & lt; div class = "columne" & gt;
& lt; div class = "box" & gt;
Prüfung
& lt; / div & gt;
& lt; / div & gt; 

11. Verwenden Sie ikonische Boxen

Bulma integriert mit der Schrift fantastisch 5, ist aber mit allen Schriftbibliotheken kompatibel und verfügt über Klassen, um die meisten verfügbaren Symbole anzurufen. Fügen Sie in jeder Box einen Inhaltscontainer hinzu, gefolgt von einem Spannelement mit der Klasse Symbol . Verwenden Sie in der Spannweite ein & lt; i & gt; Element, um die erforderlichen Klassen für das gewünschte Symbol aufzurufen. Symbole sind auf dieselbe Weise wie Text gefärbt.

 & lt; div class = "content" & gt;
& lt; span class = "icon" & gt;
& lt; i Klasse = "FAS FA-LG FA-HOME
hat Text-Erfolg "& gt; & lt; / i & gt;
& lt; / span & gt;
& lt; div class = "title is-size-6" & gt; ... & lt; / div & gt;
& lt; div class = "subtitle is-size-6" & gt; ... & lt; / div & gt;
& lt; / div & gt;

12. Sei mutig

Erstellen Sie am Ende der Seite einen neuen Zwei-Spalte-Heldenabschnitt und geben Sie ein is-info. Klasse zum Abschnitt. Bei einem interessanten Effekt auch das anwenden ist-fett Klasse in diesen Abschnitt für einen subtilen Gradienten. Dieser Modifikator arbeitet mit allen sieben Hauptfarben.

13. Ändern Sie die Ebenen

Die Ebenen sind eine großartige Möglichkeit, um sicherzustellen, dass Elemente in Folge vertikal zentriert sind. Fügen Sie innerhalb eines neuen Abschnitts am Ende der Seite einen DIV mit der Ebeneklasse hinzu und nisten Sie in vier Ebenen ein. Alle in einem Level-Element hinzugefügten Inhalt werden vertikal ausgerichtet.

 & lt; Div Class = "Level" & GT;
& lt; Div Class = "Level-Artikel hat textzentriert" & gt;
...
& lt; / div & gt;
& lt; Div Class = "Level-Artikel hat textzentriert" & gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. Formulare hinzufügen und steuern

Um ein Formular zum Ende der Seite hinzuzufügen, machen Sie einen neuen Zwei-Spalten-Heldenabschnitt mit ist-primär . Teilen Sie es in zwei Spalten, und erstellen Sie in der rechten Spalte eine Feld Klasse. Die Feldklasse wird verwendet, um mehrere Formeingaben zusammen zu gruppieren, um sicherzustellen, dass sie ordnungsgemäß beabstandet sind. Jeder Eingang muss auch in eine Person eingewickelt werden .Steuerung Klasse.

 & lt; div class = "field" & gt;
& lt; div class = "Control Has-Icons - links
HAS-ICONS-RECHTS "& GT;
& lt; Input Class = "INPUT" TYPE = "E-Mail"
Platzhalter = "Ihre E-Mail-Adresse" & GT;
& lt; span class = "Symbol ist klein
ist-links "& gt;
& lt; i Klasse = "FAS FA-Hüllkurve" & GT; & lt; / i & gt;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt; 

15. Geben Sie Benutzern Feedback an

Sobald ein Formular eingereicht wird, sollte es eine Nachricht an Benutzer zurückgeben, damit sie wissen, was als nächstes passiert. Obwohl Bulma nicht steuern kann, wenn diese Meldung angezeigt wird, kann das vordere Ende mit der Nachrichtenklasse aufgebaut sein.

 & lt; Artikel-Klasse = "Nachricht IS-Info" & GT;
& lt; div class = "message-header" & gt;
& lt; p & gt; danke! & lt; / p & gt;
& lt; / div & gt;
& lt; div class = "message-body" & gt;
... & lt; / div & gt;
& lt; / article & gt; 

16. Fügen Sie eine Fußzeile hinzu

Mit der flexiblen Fußzeileklasse können jedes Element an der Unterseite einer Seite hinzugefügt werden, wodurch ein Ort für Copyright-Info und--Navigation bereitgestellt wird, sowie ein Ziel auf die Website zu bringen.

 & lt; Fußzeileklasse = "Fußzeile" & GT;
& lt; Div Class = "Inhalt hat textzentriert" & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;
& lt; / founder & gt; 

17. Anpassen von Variablen

Die meisten Projekte, die jenseits der Prototypen hinausgeht, haben eine Anforderung, mit einer Markenrichtlinie und -farben zusammenzuarbeiten. In ähnlicher Weise ist es sicher anzunehmen, dass ein Designer die Schriftarten, Farben oder andere Aspekte von Bulma ändern muss. Ein Hauptteil von Bulma ist, dass es anpassbar und modular ist. Nicht nur können Module selektiv importiert werden, aber bis zu 415 SASS-Variablen können im Rahmen geändert werden.

Die Verwendung von Variablen bedeutet, dass eine neue Farbe eingestellt wird, da Primär die Farbe in dem gesamten Bulma-Framework für dieses Projekt ändert. Das Einstellen der Aufstellung kann zunächst knifflig sein, aber die Guide wurden mitgeliefert drei verschiedene Methoden in der Dokumentation.

Dieser Artikel wurde ursprünglich in Ausgabe 289 des kreativen Webdesign-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