Erstellen Sie Websites Superfast mit Foundation 5 [Ein Leitfaden]
Die Verwendung eines Frontend-Frameworks kann Ihren Webdesign-Workflow auf viele Arten verbessern. Es kann Ihnen dabei helfen, moderne Designprinzipien wie Mobile-First-Ansatz, semantisches Markup und Responsive Design zu befolgen . Sie können von vielen gebrauchsfertigen CSS- und JavaScript-Elementen profitieren und Ihren Entwicklungsprozess erheblich beschleunigen, sodass mehr Zeit für die visuelle Gestaltung und die Gestaltung des Benutzererlebnisses bleibt .
Zurb Foundation 5 ist eines der leistungsfähigsten Frontend-Frameworks auf dem Markt. Es ist logisch aufgebaut, einfach zu bedienen und völlig kostenlos. Sie können ein flexibles CSS-Raster verwenden, das die Erstellung eines sauberen, benutzerfreundlichen Layouts erleichtert . Das Foundation-Framework wird ebenfalls stark getestet. Es kümmert sich um die browserübergreifende und geräteübergreifende Kompatibilität.
In diesem Tutorial zeige ich Ihnen, wie Sie mit Zurb Foundation 5 superschnell eine Website erstellen können. Sie können sich das Endergebnis auf der Demo-Seite ansehen.
Ich werde das Layout der Website erstellen, die Aufgabe, subtile Designelemente hinzuzufügen, wartet auf Sie. Die Website, die wir zusammen in diesem Tutorial erstellen werden, wird den Traum des modernen UX-Designers erfüllen: Er wird reaktionsschnell, mobil - zuerst -, benutzerfreundlich und semantisch sein.
Aufgrund der Länge dieses Handbuchs finden Sie hier die Kurzbefehle, um schnell zum gewünschten Abschnitt zu gelangen:
- Herunterladen der Foundation 5
- Das Grid verstehen
- Wann verwenden Sie die Large-N-, Medium-N- und Small-N-Klassen
- Hinzufügen der oberen Menüleiste
- Füllen des Hauptteils
- Ein Panel für beliebte Beiträge hinzufügen
- Hinzufügen von 3 weiteren Posts zum populären Panel
- Das CSS aufpäppeln
- Hinzufügen weiterer Inhalte
- Seitenumbruch hinzufügen
- Die Seitenleiste auffüllen
- Das Newsletter-Formular
- Flex-Video
- Das Sidebar-Menü
- Fazit
1. Herunterladen der 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, wo Sie anpassen können, was Sie brauchen und was nicht
- eine Sass-Version, wenn Sie Ihre Variablen und Mixins in SCSS setzen möchten.
In diesem Tutorial werde ich den Complete-Code mit Vanille-CSS auswählen, aber natürlich können Sie auch andere Versionen wählen, wenn Sie Ihre Site optimieren und nur das verwenden möchten, was Sie wirklich brauchen.
Nachdem Sie die ZIP-Datei heruntergeladen und entpackt haben, öffnen Sie die Datei index.html in Ihrem Browser und Sie sehen etwa Folgendes:
Ja, die Devs enthalten nützliche Links in der Indexdatei. Sie können es so belassen und eine neue Datei für Ihren Prototyp mit dem Namen home.html oder etwas ähnliches erstellen, aber Sie müssen es nicht wirklich behalten, da Sie die Foundation-Dokumentation jederzeit erreichen können.Öffnen Sie die Datei index.html in Ihrem bevorzugten Code - Editor und löschen Sie alles darin Abschnitt, aber vor dem Schließen
Die Stilregeln, die wir der app.css- Datei hinzufügen, um unseren Prototyp zu verschönern, sind folgende:
Kopfzeile {margin-bottom: 2em; } .popular-zusätzliche h4 {font-size: 1.125em; Rand oben: 0.4em; } .row .row.popular-main {Rand-unten: 1.5em; }
Da Foundation 5 relative Einheiten verwendet, müssen wir "em" -s oder "rem" -s anstelle von Pixeln verwenden, um mit den Regeln Schritt zu halten. (Hier können Sie mehr über CSS-Einheiten lesen: Pixel vs ems vs%.) Ich habe die Firebug-Erweiterung von Firefox verwendet, um festzustellen, wo ich die CSS-Regeln von Foundation 5 außer Kraft setzen muss.
Hier in diesem kurzen CSS-Snippet mussten wir Foundation's Standard-CSS nur einmal bei der letzten Regel (.row .row.popular-main) außer Kraft setzen. So sieht die Demo-Site jetzt aus:
4.4 Einige weitere Inhalte hinzufügenNach den gleichen Regeln wie zuvor fügen wir dem Hauptbereich der Seite noch weitere Inhalte hinzu. Der Inhalt, den wir jetzt hinzufügen werden, sind die neuesten Beiträge mit kleinen Vorschaubildern.
Foundation 5 hat wirklich coole vorbereitete Miniaturansichten, die wir in diesem Schritt verwenden werden. Foundation Thumbnails verwenden eine vorgefertigte CSS-Klasse namens "th", die wir zu den Bildern hinzufügen müssen, die wir als Miniaturbilder anzeigen möchten, so wie Sie sie im folgenden Code-Snippet sehen können.
Für jeden letzten Post fügen wir eine neue Zeile unterhalb des Populären Panels mit unserer benutzerdefinierten CSS-Klasse namens "aktuellste Post" hinzu .
Auf Tablet- und Desktop-Größe zeigen wir ein kleines Thumbnail mit der Foundation-Thumbnail-Klasse auf der linken Seite und den Titel und eine kurze Beschreibung auf der rechten Seite. Auf Mobilgeräten werden die Überschrift und die Beschreibung unter dem Thumbnail angezeigt.
Jetzt habe ich die Klassen "Medium-3 columns" und "Medium-9 columns" verwendet, um den Bildschirm in 1: 3 zu unterteilen, 25% für das Bild und 75% für den Text ab der mittleren Größe.
Fügen Sie das folgende Code-Snippet dreimal unter dem Popup-Bedienfeld ein (für die drei neuesten Posts). Hier schließe ich einfach den Code einer Zeile des letzten Posts ein, da alle dasselbe HTML-Markup verwenden, nur der Inhalt unterscheidet sich.
4.5 Seitenumbruch hinzufügenIn diesem Schritt fügen wir eine coole Seitennummerierung unter den neuesten Posts hinzu. Foundation 5 unterstützt uns mit praktischen, gebrauchsfertigen Paginierungsklassen. Wir verwenden den gleichen Code in diesem Schritt, den Sie im Abschnitt "Erweitert" in den Paginierungsdokumenten finden.
Hier sind die neuesten Beiträge mit dem neu hinzugefügten Bereich "Paginierung":
5. Füllen der SeitenleisteJetzt, wo wir mit dem Hauptinhalt unserer Demoseite fertig sind, ist es Zeit, die rechte Seitenleiste zu füllen. Die rechte Seitenleiste wird unterhalb des Hauptinhalts auf Mobil- und Tablet-Größe verschoben.
Sie müssen alle Code-Snippets in diesem Abschnitt in die einfügen
Die linke Seitenleiste enthält ein Newsletter-Anmeldeformular (1), ein Latest Video (2) und ein Sidebar-Menü im Akkordeon-Stil unter dem Nicknamen "Our Cookbook" (3).
Am Ende dieses Schrittes werden wir mit unserer Demo fertig sein, die wie folgt aussehen wird:
5.1 Das NewsletterformularUm in Foundation 5 ein Formular zu erstellen, müssen Sie nichts anderes tun. Platzieren Sie das Raster einfach in einem
Markieren Sie das Code-Snippet oben. Wir verwenden das integrierte Formularsystem von Foundation mit der Option Postfix Button (class = "button postfix"). Foundation Forms haben viele andere Layout-Optionen wie Präfix-Label, Präfix-Radius-Label, Postfix-Button und Postfix-Label. Wir haben die Option "Postfix Button" gewählt, 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 auf 2: 1 aufteilt. Die Texteingabe erhält 8 Spalten und die Postfix-Schaltfläche wird 4. Da wir dieses Layout auch auf dem mobilen Bildschirm haben wollen, werden wir hier die CSS-Selektoren "small-8 columns" und "small-4 columns" einstellen Kleines Grid ist die kleinste Größe, in der wir dieses Markup implementieren möchten.
Sie können eine andere neue Sache in dem HTML-Code darüber sehen, der die "Reihe-Zusammenbruch" -Klasse ist. Dies ist der integrierte Stil von Foundation 5. Standardmäßig gibt es einen Gutter zwischen zwei benachbarten Spalten, aber wenn wir die Klasse "collapse" zu unserer Zeile hinzufügen, wird der Gutter verschwinden . Wir machen das, weil wir wollen, dass die Schaltfläche direkt neben der Texteingabe steht, ohne dass zwischen ihnen ein Leerzeichen steht.
Jetzt ist es an der Zeit, dieses Code-Snippet in die
5.2 Flex-Video
Unterhalb des Newsletterbereichs fügen wir ein tägliches Video-Rezept in unsere Seitenleiste ein. Foundation 5 hilft uns dabei , eingebettete Videos reaktionsschnell zu machen und sie mithilfe der Flex Video-Funktion automatisch skalieren zu lassen .
Flex-Videos verwenden die integrierte CSS-Klasse "flex-video". Wir erstellen eine neue Zeile für den Daily Video Recipe Seitenleistenbereich und platzieren eine breite Spalte darin mit den CSS-Selektoren "small-12 medium-9 large-12 columns end" aus demselben Grund, aus dem wir eine unvollständige Zeile im Medium Grid in verwendet haben der vorherige Schritt.
Hier ist der Code, den Sie unterhalb des Newsletterbereichs einfügen müssen. Sie können jedes Video von Youtube, Vimeo usw. verwenden.
Tägliches Video-Rezept
5.3 Das Sidebar-Menü
Für das Sidebar-Menü verwenden wir die Accordion-Funktion von Foundation 5. Akkordeons sind Web-Elemente, die den Inhalt in logische Abschnitte erweitern und reduzieren.
Auf unserer Demoseite sind diese logischen Abschnitte die 3 verschiedenen Lebensmittelgruppen (Hauptgerichte, Beilagen, Desserts), und jede Gruppe enthält mehr kleinere Gruppen wie "Geflügel", "Schweinefleisch", "Rindfleisch", "Vegetarisch".
Wir legen die ganze Sidebar Accordion in eine breite Spalte mit der gleichen Logik wie in den 5.1 und 5.2 Schritten zuvor. Wir legen das Akkordeon als ungeordnete Liste mit den entsprechenden integrierten CSS-Klassen wie "Akkordeon" und "Akkordeon-Navigation" hinein.
Da Foundation Accordions mit JavaScript arbeiten, können Sie das Verhalten mithilfe vordefinierter JavaScript-Variablen anpassen, wenn Sie möchten. Sehen Sie sich dazu den Abschnitt "Optionale JavaScript-Konfiguration" in den Accordion-Dokumenten an. Das folgende Code-Snippet wird unterhalb des Abschnitts "Flex Video" in der Datei index.html angezeigt.
Unser Kochbuch
Fazit
Nun, da wir mit unserer Demo-Site fertig sind, schauen wir uns an, was Sie sonst noch mit Foundation 5 erreichen können. Die Elemente, die wir in dieser Demo verwendet haben, sind nur ein kleiner Teil der Funktionen des Foundation-Frameworks. Es gibt viele andere Dinge, die Sie in Ihrem Design verwenden können, wie anpassbare Symbolleisten, Breadcrumbs, Lightboxes, Bereichsschieberegler, Formularüberprüfung und viele andere. Die Docs sind ziemlich gut geschrieben und sie helfen Entwicklern mit vielen Codebeispielen.
Wenn Sie mit Sass vertraut sind, haben Sie noch mehr Möglichkeiten, da jeder Abschnitt in den Docs erklärt, wie Sie Ihre eigenen Mixins erstellen können und welche Sass-Variablen Sie verwenden können, um Ihre Site anzupassen. Bevor Sie mit dem Design Ihrer Webseite beginnen, vergessen Sie nicht, die Kompatibilität des Foundation-Frameworks zu überprüfen, um sicherzustellen, dass es auf allen Browsern funktioniert, für die Sie Builds benötigen.
- Demo anzeigen
- Quelle herunterladen
28 Tipps für das digitale Dekonnern und Organisieren
Die meisten von uns verbringen viel Zeit in digitalen Räumen innerhalb unserer Computer und Handys, und genauso wie unser realer Raum erfordert digitaler Raum von Zeit zu Zeit Aufräumen, Organisation und sogar eine Art Erneuerung, damit er sein volles Potenzial ausschöpfen kann .In diesem Artikel teile ich Ihnen einige Tipps, wie Sie Ihren digitalen Raum effizient entschlüsseln und verwalten können .1. S
Materialise - Ein Material Design CSS Framework
Google Material Design zielt darauf ab, gut im Web und auch in mobilen Apps zu funktionieren. Es wird immer beliebter bei Entwicklern und wenn Sie es auch übernehmen möchten, gibt es viele Möglichkeiten, Material Design auf Ihrer Website zu implementieren. Sie können Polymer oder Angular verwenden oder Materialise verwenden.Mat