Erstellen Sie superschnelle Websites mit Foundation 5 [Ein Leitfaden]
Die Verwendung eines Frontend-Frameworks kann Ihren Webdesign-Workflow in vielerlei Hinsicht verbessern. Es kann helfen Sie dabei, moderne Designprinzipien zu befolgen wie Mobile-First-Ansatz, semantisches Markup und responsives Design. Sie können Nutzen Sie die vielen gebrauchsfertigen CSS- und JavaScript-Elemente und wesentlich Beschleunigen Sie Ihren Entwicklungsprozess, So bleibt mehr Zeit für das visuelle und User Experience-Design.
Zurb Foundation 5 ist eines der leistungsfähigsten Frontend-Frameworks auf dem Markt. Es ist logisch aufgebaut, einfach zu bedienen und völlig kostenlos. Damit können Sie ein flexibles CSS-Raster Das erleichtert die Erstellung eines sauberen, benutzerfreundlichen Layouts. Das Foundation-Framework ist außerdem ausgiebig getestet und sorgt so für die Browser- und geräteübergreifende Kompatibilität.
In diesem Tutorial zeige ich Ihnen Wie können Sie mit Zurb Foundation 5 eine Website erstellen, die superschnell ist?. Sie können das Endergebnis auf der Demo-Seite betrachten.
Ich werde das Layout der Website erstellen, die Aufgabe, subtile Designelemente hinzuzufügen, wartet auf Sie. Die Website, die wir in diesem Lernprogramm gemeinsam erstellen, erfüllt den Traum des modernen UX-Designers: Sie wird reaktionsschnell, mobil zuerst, benutzerfreundlich und semantisch.
Aufgrund der Länge dieses Handbuchs finden Sie hier die Kurzbefehle, um schnell zu dem gewünschten Abschnitt zu gelangen:
- Foundation herunterladen 5
- Das Raster verstehen
- Wann werden die Klassen Large-N, Medium-N und Small-N verwendet?
- Hinzufügen der oberen Menüleiste
- Füllen des Hauptteils
- Ein Panel für beliebte Beiträge hinzufügen
- Hinzufügen von 3 weiteren Beiträgen zum populären Panel
- Das CSS verzaubern
- Hinzufügen weiterer Inhalte
- Paginierung hinzufügen
- Die Sidebar füllen
- Das Newsletterformular
- Flex Video
- Das Menü der Seitenleiste
- Fazit
1. Herunterladen von Foundation 5
Sie können Foundation 5 in 4 verschiedenen Formen herunterladen:
- der vollständige Code
- eine leichtere Version mit nur dem wesentlichen Code
- eine benutzerdefinierte Version, in der Sie das anpassen können, was Sie brauchen und was nicht
- eine Sass-Version, wenn Sie Ihre Variablen und Mixins in SCSS festlegen möchten.
In diesem Tutorial wähle ich den Complete-Code mit Vanilla CSS aus. Sie können jedoch auch andere Versionen wählen, wenn Sie Ihre Site rationalisieren möchten und nur das verwenden möchten, was Sie wirklich benötigen.
Nachdem Sie die ZIP-Datei heruntergeladen und entpackt haben, öffnen Sie die index.html-Datei in Ihrem Browser. Daraufhin sehen Sie Folgendes:
Ja, die Devs haben nützliche Links in die Indexdatei eingefügt. Sie können es so belassen und eine neue Datei für Ihren Prototyp mit dem Namen home.html oder etwas Ähnlichem erstellen. Sie müssen sie jedoch nicht unbedingt beibehalten, da Sie die Foundation-Dokumentation jederzeit erreichen können.
Öffnen Sie die index.html-Datei in Ihrem bevorzugten Code-Editor und lösche alles in der Abschnitt, aber vor dem Schließen Die Stilregeln, die wir dem hinzufügen app.css Datei, um unseren Prototypen hübsch zu machen, sind: Als Foundation 5 werden relative Einheiten verwendet, wir müssen verwenden “em”-s oder “rem”-s anstelle von Pixeln mit den Regeln Schritt halten (Sie können über CSS-Einheiten lesen: Pixels vs ems vs%.) Ich habe die Firebug-Erweiterung von Firefox verwendet, um festzustellen, wo ich die CSS-Regeln von Foundation 5 überschreiben muss. Sie können auch andere Browsererweiterungen für die Webentwicklung verwenden, wenn Sie möchten. In diesem kurzen CSS-Snippet mussten wir in der letzten Regel nur einmal die Standard-CSS von Foundation überschreiben (.row .row.popular-main). So sieht die Demo-Site jetzt aus: Mit den gleichen Regeln wie zuvor fügen wir dem Hauptabschnitt der Seite weitere Inhalte hinzu. Der Inhalt, den wir jetzt hinzufügen werden, ist der Neueste Beiträge mit kleinen Thumbnails. Foundation 5 hat wirklich coole vorbereitete Miniaturstile, die wir in diesem Schritt verwenden werden. Foundation Thumbnails verwenden a vorgefertigte CSS-Klasse aufgerufen “th” dass wir zu den Bildern, die wir als Miniaturbilder anzeigen möchten, so hinzugefügt werden müssen, wie Sie es im folgenden Codeausschnitt sehen können. Für jeden letzten Beitrag fügen wir eine neue Zeile unter dem Popular Panel mit unserem hinzu benutzerdefinierte CSS-Klasse aufgerufen “Neuester Beitrag”. Auf der Tablet- und Desktopgröße zeigen wir links eine kleine Miniaturansicht mit der Miniaturklasse von Foundation und rechts den Titel und eine kurze Beschreibung. Auf dem Handy werden die Überschrift und die Beschreibung unterhalb der Miniaturansicht angezeigt. Jetzt habe ich die “Medium-3 Spalten” und “Medium-9 Spalten” Klassen, damit sie den Bildschirm in 1: 3 aufteilen, 25% für das Bild und 75% für den Text ab mittlerer Größe. Fügen Sie das folgende Code-Snippet drei Mal unter dem Popup-Fenster ein (für die drei letzten Beiträge). Ich füge hier nur den Code einer Zeile "Letzte Post" ein, da alle dieselbe HTML-Markierung verwenden, nur der Inhalt unterscheidet sich. Inhalt des letzten Beitrags… Unsere in Schritt 4.3 erstellte benutzerdefinierte CSS-Datei, app.css Außerdem gibt es einige neue Stilregeln, um das Erscheinungsbild der Demo aufgeräumt zu halten. HinweisWenn Sie ein eigenes benutzerdefiniertes CSS zu Foundation hinzufügen möchten, vergessen Sie nicht, mit einem Web-Entwickler-Tool zu überprüfen, wo Sie die Standardregeln überschreiben müssen. Im CSS-Snippet müssen wir sie in der ersten Regel (.row .row.latest-post) überschreiben. In der zweiten Regel reicht es aus, unseren eigenen benutzerdefinierten Selektor (.latest-post h4) zu verwenden.. Unser Prototyp sieht jetzt so aus: In diesem Schritt werden wir eine coole Paginierung unter den letzten Beiträgen hinzufügen. Foundation 5 hilft uns mit seinen praktischen, gebrauchsfertigen Paginierungskursen. Wir verwenden in diesem Schritt denselben Code, den Sie im finden können “Erweitert” Abschnitt in den Paginierungsdokumenten. Hier sind die neuesten Beiträge mit dem neu hinzugefügten Paginierungsabschnitt: Nun, da wir mit dem Hauptinhalt unserer Demo-Site fertig sind, ist es an der Zeit, die rechte Seitenleiste zu füllen. Die rechte Seitenleiste wird bei Handy- und Tablet-Größen unter dem Hauptinhalt angezeigt. Sie müssen alle Code-Snippets in diesem Abschnitt in das Feld einfügen Die linke Seitenleiste enthält ein Newsletter-Anmeldeformular (1), ein letztes Video (2) und ein Sidebar-Menü im Akkordeon-Stil unter dem Spitznamen “Unser Kochbuch” (3). Am Ende dieses Schrittes werden wir mit unserer Demo fertig sein, die folgendermaßen aussehen wird: Um ein Formular in Foundation 5 zu erstellen, müssen Sie nichts weiter tun. Platzieren Sie das Raster einfach in einem HTML-Tag. Wenn Sie sich das Code-Snippet unten ansehen, werden Sie feststellen, dass wir das Formular in eine Reihe stellen, in der wir verschiedene CSS-Selektoren für alle 3 Raster einstellen: “klein-12”, “mittel-9”, und “groß-12”. Wir haben uns für diese Lösung entschieden, weil ein 100% breites Newsletter-Formular auf der mobilen Größe cool aussieht, auf der Tablet-Größe jedoch sehr unangenehm ist sehr breit. Zum Glück lässt uns Foundation 5 verwenden “Unvollständige Zeilen”: wir müssen nur das hinzufügen “Ende” Klasse zur CSS-Klassendefinition der unvollständigen Spalte. Das wird also hier passieren: Auf der Handy-Größe wird die Seitenleiste unterhalb des Hauptinhalts mit einem Newsletter-Anmeldeformular angezeigt, das den gesamten Bildschirm abdeckt. Bei mittlerer Größe bleibt die Seitenleiste unter dem Hauptinhalt, aber das Newsletterformular deckt nur 75% des Bildschirms ab und die restlichen 25% bleiben leer. Bei Desktopgröße befindet sich die Seitenleiste direkt neben dem Hauptinhalt, und das Newsletter-Formular wird wieder die gesamte Breite der Seitenleiste einnehmen. In den Raster-Dokumenten finden Sie weitere Informationen zu unvollständigen Zeilen. Nun werfen Sie einen Blick in die header margin-bottom: 2em; .popular-additional h4 font-size: 1.125em; Rand oben: 0,4 em; .row.row.popular-main margin-bottom: 1.5em;
4.4 Hinzufügen weiterer Inhalte
Titel des letzten Beitrags
.Zeile .low.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; Schriftgröße: 1.125em;
4.5 Paginierung hinzufügen
5. Befüllen der Seitenleiste
5.1 Das Newsletterformular
Registriere dich für unseren Newsletter
Für Basisformulare gibt es viele andere Layoutoptionen, z. B. Präfixbezeichnung, Präfixradiusbezeichnung, Postfix-Schaltfläche und Postfixbezeichnung. Wir haben uns hier für die Postfix-Schaltfläche entschieden, da sie benutzerfreundlicher ist: Benutzer können darauf klicken und das Formular sofort senden.
Innerhalb des Formulars fügen wir eine neue verschachtelte Zeile hinzu, die den Bildschirm in 2: 1 unterteilt. Die Texteingabe enthält 8 Spalten und die Postfix-Schaltfläche 4. Da dieses Layout auch auf dem mobilen Bildschirm angezeigt werden soll, legen wir das fest “klein-8 Spalten” und “kleine 4 Spalten” CSS-Selektoren hier, wobei das Small Grid die kleinste Größe ist, bei der dieses Markup implementiert werden soll.
Im HTML-Code darüber sehen Sie eine weitere neue Sache “Reihenkollaps” Klasse. Dies ist der in Foundation 5 integrierte Stil. Standardmäßig befindet sich zwischen zwei nebeneinander liegenden Säulen ein Zwischensteg wenn wir das hinzufügen “Zusammenbruch” Klasse zu unserer Reihe, die Rinne wird verschwinden. Wir machen dies, weil wir möchten, dass sich die Schaltfläche direkt neben der Texteingabe befindet, ohne dass Leerzeichen dazwischen stehen.
Nun ist es Zeit, dieses Code-Snippet in das
5.2 Flex Video
Unter dem Newsletter-Bereich fügen wir unserer Seitenleiste ein tägliches Videorezept hinzu. Foundation 5 hilft uns Integrieren Sie eingebettete Videos und lassen Sie sie automatisch skalieren mit seiner Flex-Video-Funktion.
Flex Videos verwenden das eingebaute “Flex-Video” CSS-Klasse Wir erstellen eine neue Zeile für die Seitenleiste des Daily Video Recipe und platzieren eine breite Spalte mit der “klein-12 mittel-9 groß-12 Säulenende” Aus demselben Grund haben CSS-Selektoren im vorherigen Schritt eine unvollständige Zeile im mittleren Raster verwendet.
Hier ist der Code, den Sie unterhalb des Newsletter-Abschnitts einfügen müssen. Sie können jedes Video von Youtube, Vimeo usw. Verwenden.
Tägliches Videorezept
5.3 Das Menü der Seitenleiste
Für das Sidebar-Menü verwenden wir die Accordion-Funktion von Foundation 5. Accordions sind Webelemente, die den Inhalt in logische Abschnitte erweitern und reduzieren.
Auf unserer Demo-Site sind diese logischen Abschnitte die drei verschiedenen Lebensmittelgruppen (Hauptgerichte, Beilagen, Desserts). Jede Gruppe enthält mehrere kleinere Gruppen wie “Geflügel”, “Schweinefleisch”, “Rindfleisch”, “Vegetarier”.
Wir platzieren das gesamte Sidebar-Akkordeon in einer breiten Spalte mit derselben Logik wie in den vorherigen Schritten 5.1 und 5.2. Wir fügen das Akkordeon als ungeordnete Liste mit den entsprechenden integrierten CSS-Klassen wie z “Akkordeon” und “Akkordeon-Navigation”.
Da Foundation Accordions mit JavaScript arbeitet, können Sie das Verhalten mithilfe von vorgefertigten JavaScript-Variablen anpassen, wenn Sie möchten. Schauen Sie sich dazu das an “Optionale JavaScript-Konfiguration” Abschnitt in den Akkordeon-Dokumenten. Das folgende Codefragment befindet sich unterhalb der Flex Video-Sektion in der Datei index.html.
Fazit
Nun, da wir mit unserer Demo-Site fertig sind, wollen wir sehen, was Sie sonst noch mit Foundation 5 erreichen können. Die Elemente, die wir in dieser Demo verwendet haben, sind nur ein kleiner Satz der Funktionen des Foundation-Frameworks. Es gibt viele andere Dinge, die Sie in Ihrem Design verwenden können, wie z. B. anpassbare Symbolleisten, Breadcrumbs, Lightboxes, Bereichsregler, Formularüberprüfung und viele andere. Die Docs sind ziemlich gut geschrieben und helfen Entwicklern mit vielen Codebeispielen.
Wenn Sie mit Sass vertraut sind, haben Sie noch mehr Möglichkeiten, da in jedem Abschnitt in den Dokumenten erklärt wird, wie Sie eigene Mixins erstellen und welche Sass-Variablen Sie zum Anpassen Ihrer Site verwenden können. Bevor Sie mit dem Entwerfen Ihrer Webseite beginnen, vergessen Sie nicht, die Kompatibilität des Foundation Framework zu überprüfen, um sicherzustellen, dass es mit allen Browsern funktioniert, für die Sie einen Browser erstellen müssen.
- Demo anzeigen
- Quelle herunterladen
