Erstellen Sie eine kartenbasierte Benutzeroberfläche mit Fundament

Kartenbasiert. Website-Layouts. habe das Web übernommen. Beliebt von Pinterest, Twitter, Facebook und Google, Karten sind zu einem Go-to-Design-Muster für viele verschiedene Anwendungsfälle geworden.

Es ist nicht schwer zu sehen, warum. Karten arbeiten perfekt in sich anpassendes Webdesign . Als in sich geschlossene Einheiten können sie bewegt, gemischt und mit verschiedenen Inhaltstypen gemischt werden. Sie reagieren auch leicht auf verschiedenen Bildschirmgrößen, von einzelnen Spalten auf mobilen Geräten bis hin zu mehreren Spalten auf größeren Geräten.

• Schritte zum perfekten Website-Layout

Das Zurb-Team hat seit Jahren kartenbasierte Layouts in seiner Designarbeit verwendet. Sein Frontend Framework, Foundation, hat immer gesucht, Webdesigner mit den Werkzeugen auszurüsten, die sie benötigen, um ansprechende Websites schnell zu gestalten und aufzubauen, indem sie ein breites Sortiment an modularen und flexiblen Komponenten einschließen. Version 6.3 In dieser Sammlung von Bausteinen wurde eine brandneue Off-Canvas-Implementierung, ansprechende Akkordeons / Registerkarten und eine leistungsstarke neue Kartenkomponente hinzugefügt.

In diesem Tutorial lernen wir, wie man eine ansprechende kartenbasierte Benutzeroberfläche erstellt, die das FlexBox-basierte Gitter der 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 knownbasierte Entwicklungsumgebung, sodass Sie node.js installieren müssen. Die Details, die dies tun, hängen von Ihrer Umgebung ab, also überprüfen Sie Hier herauszufinden, was zu tun ist.

Sobald Sie den Knoten installiert haben, installieren Sie die Foundation CLI mit NPM installieren -g Foundation-CLI , was es leicht macht, ein neues Foundation-Projekt einzubauen.

02. Starten Sie ein neues Projekt

Lassen Sie uns ein neues Projekt basierend auf der Zurb-Vorlage erstellen. Führen Sie den Befehl aus Gründung neues Net-Magazin-Tutorial , wählen Sie 'eine Website (Foundation für Standorte)', 'Net-Magazin-Tutorial und dann Zurb-Vorlage. Dadurch wird eine Projektvorlage auf Basis von Foundation eingerichtet, komplett mit Build-System- und Entwicklungsserver.

Die Vorlage enthält eine Musterseite in SRC / PAGER / INDEX.HTML . Zur Vereinfachung entfernen wir diese Probe und ersetzen sie mit einem leeren & lt; Header & GT; & lt; / header & gt; Beginnen Sie mit Beginn der Grundlage unseres kartenbasierten UI. Lauf NPM-Start. von der Befehlszeile, um den Entwicklungsserver auszuführen, und Sie sollten eine bloße HTML-Seite für Karten bereit sehen.

03. Erstellen Sie eine Karte

Jetzt ist es Zeit, unsere erste Karte zu erstellen. Lassen Sie es sich jetzt einfach direkt in einen Abschnitt mit der Klasse stellen ...Cards-Container. . Beim Erstellen einer Karte mithilfe von Foundation gibt es drei Kernklassen, die sich dessen bewusst sind: .Karte , .Card-Sektion. und .Card-Divider . Für fortgeschrittene Benutzer entspricht jedes von diesen einem SCSS-Mixin ( Kartenbehälter , Kartenabschnitt und Kartenteiler ).

Für dieses Tutorial verwenden wir jedoch die Standardklassen zur Vereinfachung. Das .Karte Klasse ist der Container; Jede Karte wird in einem leben .Karte . Dies definiert Dinge wie Borders, Schatten und Standardfarben.

Das .Card-Sektion. Klasse definiert einen erweiterbaren Inhaltsblock, in dem Sie den Inhalt setzen, während Sie die .Card-Divider Die Klasse definiert einen nicht wachsenden Block, z. B. eine Fußzeile, einen Header oder einen Teiler. Nutzen wir alle diese Klassen, um unsere erste Basiskarte zu erstellen.

 & lt; Header & GT;
  & lt; div class = "Zeilenspalten" & gt;
    & lt; H3 & GT; Karten sind die besten & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / header & gt;
& lt; Abschnittsklasse = "Kartencontainer" & gt;
  & lt; div class = "card" & gt;
    & lt; div class = "card-divider" & gt;
      & lt; H4 & GT; Yeti Header & lt; / h4 & gt;
    & lt; / div & gt;
    & lt; Div Class = "Kartenabschnitt" & GT;
      & lt; img src = "https://foundation.zurb.com/sits/docs/assets/img/yeti.svg" & gt; & lt; / iMG & gt;
    & lt; / div & gt;
    & lt; div class = "card-divider" & gt;
      & lt; p & gt; Yeti Fußzeile & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / ordnung & gt; 

04. Komponentenstile hinzufügen

Wenn wir dies einfach tun, ist unsere Karte riesig und erweitert, um den gesamten Bildschirm zu füllen. Wir werden in Kürze mit der Gesamtgröße umgehen, aber wir nutzen wir dies als Entschuldigung, um zu erfahren, wie Sie Komponentenstile in der Zurb-Vorlage hinzufügen können.

Fügen Sie eine Datei hinzu _card.scss. zu SRC / Assets / SCSS / Bauteile / Angabe von A. Max-Breite: 300px zum .Karte und enthalten die Datei in unserem Haupt-CSS, indem Sie sie hinzufügen @Import-Komponenten / -Karte; zu SRC / Assets / SCSS / APP.SCSS .

05. Machen Sie Ihre Karten wiederverwendbar

Um ein wiederholtes Layout mit mehreren Karten zu erstellen, möchten wir, dass unsere Karten wiederverwendbare Komponenten sind, die wir immer wieder anschließen können. Die ZBOb-Vorlage, die wir für dieses Tutorial verwenden, verwendet eine Vorlagensprache namens Lenker, die die Fähigkeit zur Erstellung von Partials oder wiederverwendbaren Codeblöcken enthält.

Um unsere Kartenimplementierung in ein Teil zu verschieben, schneiden Sie einfach die .Karte Komponente, die wir in eine Datei eingebaut haben SRC / PARTIALS. , sagen SRC / PARTIALS / BASIC-CARD.HTML . Sie können diesen Inhalt dann einschließen, indem Sie einfach die Zeile hinzufügen {{& gt; Basic-Card}} in Ihrer Indexdatei.

06. Beginnen Sie mit dem Bau Ihres Layouts

Wir decken unterschiedliche Kartentypen in ein wenig ab, aber zunächst verwenden wir unsere wiederverwendbare Basiskarte, um ein größeres, ansprechendes Layout für unsere Karten zu erstellen. Dazu werden wir ein Konzept von der Stiftung namens The Block Grid verwenden.

Die Stiftung enthält ein paar verschiedene Arten von Gittern, aber alle beginnen alle von dem Konzept von Zeilen und Säulen. Eine Zeile erstellt einen horizontalen Block, der mehrere vertikale Säulen enthalten kann. Diese grundlegenden Bausteine ​​bilden den Kern fast aller Layouts.

Blocknetze sind eine Abkürzung, um gleichmäßig große Säulen zu erzeugen und die Flexibilität und Freiheit zu ermöglichen, einen unbestimmten Inhalt hinzuzufügen und es in gleichen Säulen nett aufzustreben. Sie fügen einfach eine Klasse in die Zeile hinzu und fügen Sie dann so viele Spaltenkomponenten hinzu, wie Sie möchten. Die Gründung lässt sie ordentlich und sauber ausrichten.

Da wir erwarten, dass wir eine sehr große und wechselnde Anzahl von Karten haben, ist dies ideal für unsere Zwecke. Lassen Sie uns dies schnell in ein Viersäulengitter einrichten und ein paar Dutzend Karten hinzufügen. Im Moment sorgen wir uns nur um große Bildschirme, sodass wir einfach das anwenden .Large-up-4 Klasse in die Reihe.

 & lt; Abschnittsklasse = "Kartencontainer" & gt;
& lt; div class = "Reihe groß-up-4" & gt;
{{#repeat 24}}
& lt; div class = "columne" & gt;
{{& gt; Basic-Card}}
& lt; / div & gt;
{{/wiederholen}}
& lt; / div & gt;
& lt; / ordnung & gt; 

07. Machen Sie es ansprechend

Als nächstes halten wir uns an, was wir auf verschiedenen Bildschirmgrößen passieren wollen. Die Stiftung ist mit kleinen, mittleren und großen Haltepunkten ausgestattet, so dass wir einfach eine andere Blockgitterklasse für jeden Haltepunkt anwenden können, um die Dinge umzustellen.

Lassen Sie uns eine Karte pro Zeile auf mobile Bildschirme geben, und drei pro Zeile auf Tablet, indem Sie den Klassen hinzufügen .Small-Up-1 und .medium-up-3 in der Reihe. Wenn wir das tun, und entfernen Sie den Stopgap maximale Breite Eigentum, das wir verleihen _card.scss. . Wir haben bereits ein schön ansprechendes Layout, das auf allen Bildschirmgrößen gut aussieht.

08. Versuchen Sie es mit neuen Kartentypen

Lassen Sie uns nun unsere Kartengruppe diversifizieren, ein anderer Typ ist ein reines Rand-to-Rand-Foto. Kartenabschnitte und Kartenteiler enthalten standardmäßig die Polsterung, aber um Kanten-to-Rand-Inhalte zu haben, können wir einfach das Bild direkt in die Karte einsetzen. Fügen wir das als A hinzu Foto-card.html. teilweise in. SRC / PARTIALS. .

 & lt; div class = "card" & gt;
& lt; img src = "http://foundation.zurb.com/assets/img/foundation-emails/inky-all-devices.svg" / & gt;
& lt; / div & gt; 

09. FlexBox einführen

Es gibt Hunderte von Möglichkeiten, wie wir Karten zusammenstellen können - für eine Inspiration können Sie die Stiftung überprüfen Cardpack-Repository. . Aber lassen Sie uns weitergehen, wie wir das Layout verwalten, wenn wir unterschiedliche Karten haben. Wenn Sie die Foto-Karten-Teilweise in das Layout einfügen, wechseln Sie mit der Basic-Card, wie wir es zuvor gemacht haben, ein bisschen ein bisschen eingestauneres Erlebnis, da unsere Höhen unterschiedlich sind. Dies kann in Ordnung sein, oder wir möchten möglicherweise unser Layout anpassen, um zu kompensieren.

Für dieses Tutorial kompensieren wir mit unseren bevorzugten neuen CSS-Layout-Technik - Flexbox. Die Stiftung wird mit einem FlexBox-Modus für sein Gitter geliefert. Um es zu aktivieren, müssen Sie einfach öffnen SRC / Assets / SCSS / APP.SCSS , auskommentieren @include Foundation-Grid; und @include Foundation-Float-Klassen; und vollkommen @include Foundation-Flex-Grid; und @include Foundation-Flex-Klassen; .

10. Machen Sie Ihre Karten die gleiche Höhe

Wenn die FlexBox-Klassen aktiviert sind, ist es einfach, unsere Karten in der gleichen Höhe zu erhalten. Erstens können wir unsere Kolumnen Eltern durch Hinzufügen der .flex-Container Klasse. Dies ist eine Prototyping-Verknüpfung zum Hinzufügen der Anzeige: Flex; Eigentum an sie. Sobald wir dies tun, werden alle Karten die gleiche Größe, aber da Flex-Kinderelemente standardmäßig schrumpfen, werden einige unserer Karten eine Art eng.

Wir können dieses Problem beheben, indem wir einfach diesen Elementen erzählen, um zu wachsen. Dies geschieht, indem Sie sie entweder mit CSS ansprechen und ihnen geben Flex-wachsen: 1; oder zur Vereinfachung beim Prototyping, nur indem Sie die Klasse hinzufügen .flex-kind wachsen . Sobald das alles alles erledigt wurde, füllen alle unsere Karten die Spalten aus und werden schön die gleiche Höhe sein.

Dieser Artikel wurde ursprünglich in vorgestellt Netzmagazin. Ausgabe 293. Kaufen Sie es hier. oder Abonnieren Sie hier das Netz .

Mochte dies? Probiere diese...

• 10 Gründe, warum Sie Atom Design verwenden sollten
• Erstellen und animieren Sie SVG-Polygone
• CSS-Tricks, um Ihre Layouts zu revolutionieren