Erstellen Sie mit Foundation eine kartenbasierte Benutzeroberfläche
Kartenbasiert Website-Layouts haben das Web übernommen. Karten, die von Pinterest, Twitter, Facebook und Google populär gemacht wurden, sind zu einem Muster für viele verschiedene Anwendungsfälle geworden.
Es ist nicht schwer zu verstehen, warum. Karten funktionieren perfekt innerhalb sich anpassendes Webdesign . Als eigenständige Einheiten können sie mit verschiedenen Inhaltstypen verschoben, gemischt und gemischt werden. Sie reagieren auch problemlos auf verschiedene Bildschirmgrößen, von einzelnen Spalten auf Mobilgeräten bis zu mehreren Spalten auf größeren Geräten.
Das ZURB-Team verwendet seit Jahren kartenbasierte Layouts für seine Entwurfsarbeit. Das Frontend-Framework Foundation hat stets versucht, Webdesigner mit den Tools auszustatten, die sie zum schnellen Entwerfen und Erstellen reaktionsfähiger Websites benötigen, indem eine breite Palette modularer und flexibler Komponenten integriert wird. Die dieser Sammlung von Bausteinen hinzugefügte Version 6.3 bietet eine brandneue Off-Canvas-Implementierung, reaktionsschnelle Akkordeons / Tabs und eine leistungsstarke neue Kartenkomponente.
In diesem Tutorial lernen wir, wie Sie eine reaktionsschnelle kartenbasierte Benutzeroberfläche erstellen, die das Flexbox-basierte Raster von Foundation nutzt, um eine ganze Reihe von Möglichkeiten zu eröffnen.
01. Richten Sie eine Entwicklungsumgebung ein
Der erste Schritt besteht darin, eine Entwicklungsumgebung einzurichten. Für dieses Tutorial verwenden wir eine knotenbasierte Entwicklungsumgebung. Daher müssen Sie Node.js installieren. Die Details dazu hängen von Ihrer Umgebung ab. Überprüfen Sie dies Hier um herauszufinden, was zu tun ist.
Sobald Sie Node installiert haben, installieren Sie die Foundation CLI mit npm install -g Foundation-Cli Dies erleichtert die Einrichtung eines neuen Foundation-Projekts.
02. Starten Sie ein neues Projekt
Erstellen wir ein neues Projekt basierend auf der ZURB-Vorlage. Führen Sie den Befehl aus Gründung neues Netzmagazin-Tutorial Wählen Sie 'Eine Website (Foundation for Sites)', 'Netzmagazin-Tutorial' und dann 'ZURB-Vorlage'. Dadurch wird eine auf Foundation basierende Projektvorlage mit Build-System und Entwicklungsserver eingerichtet.
Die Vorlage enthält eine Beispielseite in src / pages / index.html . Der Einfachheit halber entfernen wir dieses Muster und ersetzen es durch ein leeres von vorne anfangen unsere kartenbasierte Benutzeroberfläche aufzubauen. Lauf über dem Meeresspiegel beginnen Über die Befehlszeile, um den Entwicklungsserver auszuführen, sollte eine leere HTML-Seite angezeigt werden, die für Karten bereit ist.
03. Erstellen Sie eine Karte
Jetzt ist es Zeit, unsere erste Karte zu erstellen. Lassen Sie es uns zunächst direkt in einen Abschnitt mit der Klasse einfügen .cards-container . Beim Erstellen einer Karte mit Foundation sind drei Kernklassen zu beachten: .Karte , .Kartenabschnitt und .kartenteiler . Für fortgeschrittene Benutzer entspricht jedes dieser Elemente einem SCSS-Mixin ( Kartenbehälter , Kartenabschnitt und Kartenteiler ).
In diesem Tutorial werden wir der Einfachheit halber die Standardklassen verwenden. Das .Karte Klasse ist der Container; Jede Karte wird in einem leben .Karte . Dies definiert Dinge wie Rahmen, Schatten und Standardfarben.
Das .Kartenabschnitt Klasse definiert einen erweiterbaren Inhaltsblock, in den Sie Inhalte einfügen können, während die .kartenteiler Klasse definiert einen nicht expandierenden Block, z. B. eine Fußzeile, eine Kopfzeile oder einen Teiler. Verwenden wir alle diese Klassen, um unsere erste Basiskarte zu erstellen.
Cards Are The Best
Yeti Header
Yeti Footer
04. Komponentenstile hinzufügen
Wenn wir dies nur tun, wird unsere Karte riesig und erweitert sich, um den gesamten Bildschirm auszufüllen. Wir werden uns in Kürze mit der Gesamtgröße befassen, aber jetzt wollen wir dies als Ausrede verwenden, um zu lernen, wie Komponentenstile in die ZURB-Vorlage eingefügt werden.
Fügen Sie eine Datei hinzu _card.scss zu src / assets / scss / components / Angabe von a maximale Breite: 300px zum .Karte und fügen Sie die Datei durch Hinzufügen in unser Haupt-CSS ein @ Import Komponenten / Karte; zu src / assets / scss / app.scss .
05. Machen Sie Ihre Karten wiederverwendbar
Um ein wiederholbares Layout mit mehreren Karten zu erstellen, möchten wir, dass unsere Karten wiederverwendbare Komponenten sind, die wir immer wieder anschließen können. Die ZURB-Vorlage, die wir für dieses Lernprogramm verwenden, verwendet eine Vorlagensprache namens 'Lenker', die die Möglichkeit zum Erstellen von Partials oder wiederverwendbaren Codeblöcken umfasst.
Um unsere Kartenimplementierung in einen Teil zu verschieben, schneiden Sie einfach die aus und fügen Sie sie ein .Karte Komponente, die wir in eine Datei eingebaut haben src / partials , sagen src / partials / basic-card.html . Sie können diesen Inhalt dann einfügen, indem Sie einfach die Zeile hinzufügen {{> Grundkarte}} in Ihrer Indexdatei.
06. Erstellen Sie Ihr Layout
Wir werden in Kürze verschiedene Kartentypen behandeln, aber zuerst verwenden wir unsere wiederverwendbare Basiskarte, um ein größeres, ansprechendes Layout für unsere Karten zu erstellen. Zu diesem Zweck verwenden wir ein Konzept von Foundation, das als Blockgitter bezeichnet wird.
Foundation enthält einige verschiedene Arten von Gittern, die jedoch alle vom Konzept der Zeilen und Spalten ausgehen. Eine Zeile erstellt einen horizontalen Block, der mehrere vertikale Spalten enthalten kann. Diese Grundbausteine bilden den Kern fast aller Layouts.
Blockgitter sind eine Abkürzung, um gleich große Spalten zu erstellen und sich die Flexibilität und Freiheit zu geben, eine unbestimmte Menge an Inhalten hinzuzufügen und diese in gleichen Spalten anordnen zu lassen. Sie fügen der Zeile einfach eine Klasse hinzu und fügen dann so viele Spaltenkomponenten hinzu, wie Sie möchten. Foundation wird sie ordentlich und sauber für Sie auslegen.
Da wir eine sehr große und sich ändernde Anzahl von Karten erwarten, ist dies ideal für unsere Zwecke. Lassen Sie uns dies schnell in einem vierspaltigen Raster einrichten und ein paar Dutzend Karten hinzufügen. Im Moment kümmern wir uns nur um große Bildschirme, daher wenden wir einfach die an .groge-up-4 Klasse in die Reihe.
{{#repeat 24}} {{> basic-card}} {{/repeat}} 07. Mach es reaktionsschnell
Lassen Sie uns als Nächstes überlegen, was auf verschiedenen Bildschirmgrößen geschehen soll. In Foundation sind kleine, mittlere und große Haltepunkte integriert, sodass wir einfach für jeden Haltepunkt eine andere Block-Grid-Klasse anwenden können, um die Dinge zu verschieben.
Legen Sie eine Karte pro Zeile auf mobile Bildschirme und drei pro Zeile auf ein Tablet, indem Sie die Klassen hinzufügen .small-up-1 und .medium-up-3 in der Reihe. Wenn wir dies tun, entfernen Sie die Notlösung maximale Breite Eigentum, das wir setzen _card.scss . Wir haben bereits ein ansprechendes Layout, das auf allen Bildschirmgrößen gut aussieht.
08. Probieren Sie einige neue Kartentypen aus
Lassen Sie uns nun unseren Kartensatz diversifizieren. Ein anderer Typ ist ein reines Foto von Kante zu Kante. Kartenabschnitte und Kartenteiler enthalten standardmäßig Auffüllungen. Um jedoch Rand-zu-Rand-Inhalte zu erhalten, können Sie das Bild einfach direkt in die Karte einfügen. Fügen wir dies als hinzu Fotokarte.html teilweise in src / partials .
09. Flexbox einführen
Es gibt Hunderte von Möglichkeiten, wie wir Karten zusammenstellen können. Als Inspiration können Sie sich bei der Stiftung umsehen Kartenpaket-Repository . Fahren wir jedoch mit der Verwaltung des Layouts fort, wenn wir Karten unterschiedlicher Größe haben. Wenn Sie die Fotokarte teilweise wie zuvor abwechselnd mit der Basiskarte in das Layout einfügen, erhalten wir eine etwas gezackte Erfahrung, da unsere Höhen unterschiedlich sind. Dies kann in Ordnung sein, oder wir möchten unser Layout anpassen, um dies zu kompensieren.
Für dieses Tutorial kompensieren wir dies mit unserer neuen Lieblings-CSS-Layout-Technik - Flexbox. Foundation verfügt über einen Flexbox-Modus für das Raster. Um es zu aktivieren, müssen Sie es nur öffnen src / assets / scss / app.scss , auskommentieren @include Foundation-Grid; und @include Foundation-Float-Klassen; und Kommentar @include Foundation-Flex-Grid; und @include Foundation-Flex-Klassen; .
10. Machen Sie Ihre Karten gleich hoch
Wenn die Flexbox-Klassen aktiviert sind, ist es einfach, dass unsere Karten dieselbe Höhe haben. Erstens können wir unsere Spalten dazu bringen, Eltern zu beugen, indem wir die hinzufügen .flex-container Klasse. Dies ist eine Prototyping-Verknüpfung zum Hinzufügen von Anzeige: flex; Eigentum an ihnen. Sobald wir dies tun, werden alle Karten gleich hoch, aber da flexible untergeordnete Elemente standardmäßig schrumpfen, werden einige unserer Karten etwas schmaler.
Wir können dieses Problem beheben, indem wir diesen Elementen einfach sagen, dass sie wachsen sollen. Dies geschieht, indem Sie sie entweder mit CSS ansprechen und ihnen geben Flex-Grow: 1; oder der Einfachheit halber beim Prototyping, indem Sie einfach die Klasse hinzufügen .flex-child-grow . Sobald dies alles erledigt ist, füllen alle unsere Karten die Spalten und haben eine schöne Höhe.
Dieser Artikel wurde ursprünglich in vorgestellt Netzmagazin Ausgabe 293. Kaufen Sie es hier oder Abonnieren Sie net hier .
Mochte dies? Probiere diese...
