Stiftung ist eines der beiden bekanntesten HTML/CSS/JS-Frameworks für Front-End-Entwickler. Das geschah nicht zufällig. Heute sind wir hier, um Ihnen alles darüber zu erzählen, warum Du sollte es nutzen. Nun zunächst einmal eine Erklärung für diejenigen, die vielleicht ihren eigenen HTML-Code schreiben, aber noch nie zuvor mit einem Framework gearbeitet haben: Frameworks sind im Grunde große Mengen vorab geschriebenen Codes, die Ihnen helfen, schneller mit Ihren Projekten zu beginnen. Im Fall von Frontend-Code wie HTML und CSS bedeutet das, dass Sie Dinge wie Layoutraster, grundlegende Schaltflächenstile und häufig verwendete Oberflächenelemente finden. Größere Frameworks können auch jQuery-Plugins enthalten. Sie sollen nicht wie komplette Website-Vorlagen oder Themes verwendet werden, sondern als eine Reihe von Bausteinen. Sie nehmen, was Sie brauchen, passen es an das Projekt an und machen im Allgemeinen mit Ihrer Arbeit (und vermutlich Ihrem Leben) weiter. Sie sollen individuell angepasst und gebastelt werden. Dies kann zunächst eine entmutigende Aufgabe sein, da Frameworks wie Foundation und sein Hauptkonkurrent, Bootstrap, sind riesig geworden. Sie enthalten jeweils Tausende von CSS-Zeilen. Bevor Sie sich verpflichten, ein Framework für ein Projekt zu verwenden, müssen Sie dessen potenziellen Nutzen im Vergleich zum Zeitaufwand abwägen. Sobald Sie sich jedoch an ein Framework gewöhnt haben, kann es die Zeit, die Sie mit dem Schreiben von Markup und CSS verbringen, erheblich reduzieren.
Einige Geschichten
Foundation begann sein Leben als nichts weiter als ein allgemeiner Styleguide und ein gemeinsamer Code. Die Jungs von ZURB beschlossen, ihren Prototyping-Prozess zu beschleunigen, indem sie HTML und Stile, die sie häufig wiederverwendeten, verwendeten und daraus ein Framework erstellten. Das ist es. So entstehen wirklich die meisten guten Dinge. Jemand brauchte es, also haben sie es gemacht. Mit der Zeit kamen sie zu dem Schluss, dass das, was sie gemacht hatten, zu gut war, um es für sich zu behalten, und veröffentlichten daher Version 2.0.0 für die Welt. Sie haben alles responsive gemacht, es aufpoliert und es für uns alle als Open Source bereitgestellt. Jetzt verwenden Designer und Entwickler auf der ganzen Welt den Code von ZURB, um ihre Produkte schneller und, ich wage es zu sagen, vielleicht sogar besser zu machen. Seit seiner Veröffentlichung am 18. Oktober 2011 ist das MIT-lizenziert Framework hat sich zu einem der „großen Zwei“ entwickelt und wird auf Tausenden von Websites eingesetzt. Seine Beliebtheit zeugt gleichermaßen von seiner Nützlichkeit und Vielseitigkeit. Wenn Sie entscheiden, dass Foundation das Richtige für Sie ist, wird sie Sie nicht im Stich lassen.
Merkmale
Die Stiftung befindet sich nun seit fast drei Jahren in aktiver Entwicklung. Kein Wunder also, dass die Funktionsliste umfangreich ist. Im Kern besteht das Framework aus CSS-Dateien (generiert aus SASS-Dateien, auch zum Download verfügbar) und mehreren jQuery-Plugins. Im Hauptdownload ist kein HTML enthalten (außer einer sehr einfachen Demoseite, die Sie ganz selbst schreiben können). Allerdings gibt es eine detaillierte Dokumentation zu jeder einzelnen Komponente. Jeder Abschnitt der Dokumentation enthält Beispiel-HTML für Sie Sie können es nach Bedarf verwenden und anpassen. Wenn Sie direkt eintauchen möchten, schauen Sie sich das an Dokumentation.
Wenn Sie das Framework von Grund auf anpassen möchten, können Sie zwei Dinge tun:
Option 1
Sie können direkt auf der Website auswählen, ob Sie nur die gewünschten Komponenten herunterladen möchten Haupt-Downloadseite. Wenn Sie nur das Raster, das Navigations-CSS und ein oder zwei jQuery-Plugins benötigen, ist das ganz einfach. Deaktivieren Sie einfach alle Dinge, die Sie nicht einbeziehen möchten, und los geht’s! Dieser „Rahmengenerator“ enthält auch Optionen zum Anpassen des Rasters, Ihrer Hauptfarben und einiger anderer Optionen. Dies ist die Option, die ich beispielsweise für die Prototypenerstellung oder die Entwicklung einer unternehmensinternen Anwendung wählen würde. Die Standard-Präsentationsstile sind für diese Dinge größtenteils gut genug. Warum also sollten Sie sie ändern, wenn Sie es nicht müssen?
Option 2
Dies ist nun für die Leute, die das Framework für öffentliche Projekte verwenden. Sie möchten nicht die Standard-Präsentationsstile verwenden, da diese aller Wahrscheinlichkeit nach nicht zu Ihrem Branding passen. Für eine tiefgreifende Anpassung müssen Sie zur Quelle gehen. Und mit der Quelle meine ich die Sass-Dateien. Damit können Sie jede Variable nach Ihren Wünschen anpassen und so das Framework zu Ihrem eigenen machen. (Ein Hinweis zu Sass-Dateien: Nochmals für diejenigen, die mit dem Begriff vielleicht nicht vertraut sind: Sass ist ein CSS-Präprozessor, der Dinge wie Variablen, Mixins und andere Programmierfunktionen in reguläres CSS einführt. Führen Sie eine Google-Suche nach etwas wie „Sass-Compiler für“ durch [your operating system here]”, und Sie werden finden, was Sie brauchen. Persönlich kann ich die plattformübergreifende Plattform nicht empfehlen Koala-App genug.) Sobald Ihre Sass-Dateien in einer regulären CSS-Datei kompiliert sind, verlinken Sie einfach in Ihrem Abschnitt darauf, wie Sie es mit jeder anderen CSS-Datei tun würden. Die Koala-App beispielsweise kompiliert die Sass-Dateien jedes Mal automatisch, wenn Sie sie speichern, sodass Ihr Browser immer die neuesten Änderungen sieht.
Struktur
Das Gitter
Ich kann nicht mit Sicherheit sagen, dass alle HTML-Frameworks über ein Rastersystem für das Layout verfügen, aber die meisten tun es. Das Raster der Foundation ist ohne jegliche Anpassung ein klassisches zwölfspaltiges, verschachtelbares und reaktionsfähiges Raster. Das Markup und die Klassen sind einfach, einschließlich Klassen zum Anpassen des Layouts an die Bildschirmgröße. Wenn Sie bereits mit Rastersystemen wie dem 960-Rastersystem gearbeitet haben, wird es für Sie nicht schwierig sein, das Raster von Foundation zu beherrschen. Hinweis: Es ist für den Mobile-First-Ansatz codiert, daher sollten Sie dies bei der Gestaltung Ihrer Website berücksichtigen.
Das Blockgitter
Betrachten Sie dies als ein „Mini-Raster“. Es ist so konzipiert, dass eine bestimmte Anzahl von Elementen unabhängig von der Bildschirmgröße gleichmäßig groß und gleichmäßig verteilt bleibt. Beispiel: Sie haben drei gleich große Elemente, die Sie auf jedem Gerät nebeneinander aufbewahren möchten. Dazu würden Sie dieses Blockraster-Beispiel verwenden, das ich schamlos direkt aus der Dokumentation geklaut habe: Beachten Sie, dass Sie, wenn Sie möchten dürfen Geben Sie eine unterschiedliche Anzahl von Spalten für unterschiedliche Bildschirmgrößen an. Die Elemente behalten ihre gleiche Größe. Diese Komponente eignet sich perfekt für Dinge wie Fotogalerien.
Responsive Sachen
Die Medienabfragen sind einfach gehalten, aber so konzipiert, dass sie eine Reihe von Bildschirmgrößen unterstützen, von Smartphones bis hin zu lächerlich großen iMac-Bildschirmen. Von Grund auf so konzipiert zu sein, dass es zuerst auf Mobilgeräte ausgerichtet ist, ist ein guter Anfang. Foundation geht noch einen Schritt weiter und integriert spezifische Komponenten, die Ihnen dabei helfen, die reaktionsfähigen Teile Ihrer Websites weiter zu verfeinern. Erstens gibt es die üblichen Klassen zum Ausblenden oder Anzeigen verschiedener Elemente in unterschiedlichen Ansichtsfenstergrößen. Dann gibt es etwas fortgeschrittenere Dinge, wie zum Beispiel Austausch.
Interchange ist eine JS-Bibliothek, die je nach Medienabfrage dynamisch unterschiedliche Inhalte lädt. Mithilfe dieser Bibliothek können Sie entscheiden, ob Sie beispielsweise ein .JPG-Bild einer Karte laden oder eine Google Maps-Einbettung vornehmen möchten. Oder ein normales Bild anstelle eines Bildes in der Größe eines Retina-Bildschirms. Mithilfe dieser Bibliothek können Sie Ihren Benutzern einige Daten ersparen Und etwas RAM. Stellen Sie sicher, dass Sie einen Fallback für Benutzer mit deaktiviertem JavaScript implementieren.
Navigation
Die Navigationsoptionen sind in Foundation reichlich vorhanden und reichen von der Allzweck-Navigationsleiste (komplett mit Dropdown-Menüs) bis hin zu Symbolleisten, Breadcrumb-Navigation, Paginierung, Seitenleisten und mehr. Es gibt jedoch zwei Navigationskomponenten, die Foundation von anderen Frameworks abheben.
Magellan
Das erste ist das Magellan Sticky Nav. Platzieren Sie diese Navigationsleiste an einer beliebigen Stelle auf der Seite. Sobald Sie über die Startposition hinaus scrollen, wird sie Ihnen nach unten folgen. Wenn Sie es verwenden, um einen Link zu einem Abschnitt innerhalb der aktuellen Seite zu erstellen, kann es jeden einzelnen Abschnitt (in der Leiste selbst) hervorheben, während Sie nach unten scrollen.
Offcanvas
Das zweite ist Offcanvas, Dabei handelt es sich um eine vertikale Navigationsleiste, die standardmäßig ausgeblendet ist. Klicken Sie auf die Menüschaltfläche und das Menü wird für Ihr Surfvergnügen auf die Seite verschoben. Beachten Sie, dass diese wie alle Foundation-Komponenten mit einem minimalen Aufschlag implementiert werden können. Die Jungs von ZURB haben viel Arbeit in die einfache Implementierung dieser recht fortgeschrittenen Benutzeroberflächenelemente gesteckt, und das merkt man.
Medien
Bei den medienbezogenen Komponenten eines Frameworks neigen Framework-Ersteller oft dazu, ein wenig anzugeben, und Foundation bildet da keine Ausnahme. Standardmäßig ist beispielsweise Folgendes enthalten: Leuchtkasten leeren. Eigentlich ist es eine absolut einfache Lightbox-Bildergalerie. Geben Sie einfach ein paar Miniaturansichten ein, fügen Sie die relevanten Klassen hinzu, und schon haben Sie eine Touch-fähige Bildergalerie, die Bilder mit variabler Höhe problemlos verarbeitet. Ein anderer ist Flex-Video, was theoretisch für nahezu jedes einbettbare Objekt verwendet werden kann. Wickeln Sie einfach ein Div mit dem ein Flex-Video Klasse rund um Ihr YouTube-Video, Iframe, Embed oder Objektelement, und schon kann es losgehen. Diese Objekte werden nicht automatisch an die Größe des Browsers angepasst. Schließlich gibt es noch Stile für Miniaturansichten von Bildern. Hier gibt es nichts Ausgefallenes oder Besonderes zu sehen … es ist einfach schön, sie zu haben.
Aber was ist mit Orbit?
Leute, die Foundation vor Version 5 verwendet haben, wundern sich vielleicht über das Orbit-Plugin von ZURB. Es handelt sich um ein Karussell, manchmal auch Diashow genannt, eine reaktionsfähige Komponente mit zahlreichen Funktionen, die ziemlich gut funktioniert. Obwohl es sich noch im Framework befindet, wird es von ZURB nicht mehr unterstützt und befindet sich auch nicht in der aktiven Entwicklung. Die Macher von Foundation selbst empfehlen, nach Alternativen zu suchen, wie z Eulenkarussell, oder Glatt.
Formen
Natürlich wurden grundlegende Stile für Formulare nicht vergessen. Tatsächlich wurden sie im Laufe der Jahre zu Werken von äußerst zurückhaltender Schönheit verfeinert. Man könnte meinen, ich übertreibe, aber ich glaube nicht, dass ich es bin. Aus jahrelanger Erfahrung sind grundlegende Formstile entstanden, die meiner Meinung nach mit einem Minimum an Anpassungen auf nahezu jedes Projekt angewendet werden können. Es erfordert Geschick, etwas so Langweiliges wie Formen gleichzeitig generisch und hübsch aussehen zu lassen. Es ist kein Wunder, dass viele der Frameworks, die ich ausprobiert habe, den Stil der Foundation imitiert haben. Allerdings sind es nicht nur langweilige Textfelder und Optionsfelder. Sie wissen, dass sie einiges selbst machen mussten. Nehmen Sie zum Beispiel die Slider-Komponente: Sie können Bereichs-Slider mit HTML5 implementieren, aber sie sind langweilig und verwenden das Standard-Erscheinungsbild des von Ihnen verwendeten Betriebssystems. Foundation hingegen enthält Schieberegler, die für Ihr individuelles Vergnügen mit CSS gestaltet werden können. Ebenfalls enthalten ist eine Formularvalidierungsbibliothek (mehr JavaScript hier…), mit der Sie sicherstellen können, dass Ihre Benutzer die richtigen Daten eingeben. Wenn sie etwas Falsches eingeben, beispielsweise eine ungültige E-Mail-Adresse, wird eine Benachrichtigung angezeigt, die sie darüber informiert.
Tasten
Ohne einige Standardschaltflächenstile kann es kein Framework geben. Ich meine, das kannst du, aber irgendwie wäre es einfach nicht richtig. Die Standard-Foundation-Schaltflächen unterscheiden sich nicht allzu sehr von denen anderer Frameworks. Das heißt, sie werden mit minimalem Markup implementiert und verfügen über verschiedene größen- und farbspezifische Klassen. Sie können sie jedoch gruppieren Tastengruppen um verwandte Aktionen irgendwie zusammenzufassen. Diese Tastengruppen (zumindest die horizontalen) sind so konzipiert, dass sie perfekt mit dem Raster zusammenarbeiten. Sie haben auch zusätzliche Klassen für Größe, Farbe und abgerundete Ecken … alles Übliche. Ändern Sie das Markup noch ein wenig, und Foundation kann es Ihnen auch bieten Dropdown-Schaltflächenund diese geteilte Tasten. Sie wissen schon, hauptsächlich Schaltflächen, Teil-Dropdown-Menüs? Die letzten beiden Komponenten nutzen das integrierte Dropdown-Plugin von Foundation. Dies bedeutet unter anderem, dass sie JavaScript-abhängig sind. Dennoch sind sie einfach umzusetzen. Es dreht sich alles um den Unterricht.
Typografie
Foundation verwendet einen sehr einfachen, serifenlosen typografischen Aufbau, um Ihnen den Einstieg zu erleichtern. Es ist einfach, lässt sich leicht mit einigen grundlegenden Sass-Variablen anpassen und ist alles relativ groß. Das ist richtig, Foundation verwendet rem. Da die Gründer der Foundation an Benutzerfreundlichkeit glauben, ist alles groß genug, um auch auf kleinen Bildschirmen gut lesbar zu sein. Auch das Lesen aus mäßiger Entfernung auf normalen Laptop-/Desktop-Bildschirmen bereitet mir keine Probleme. Zu den zusätzlichen typografischen Merkmalen gehören:
Inline-Listen
Möchten Sie eine horizontale textbasierte Liste? Wissen Sie, die Art, die Sie in die Fußzeile einer Website einfügen würden? Sie sind abgesichert. Laut den Machern sollten Sie: Sie haben Recht. Schrott wegen der räumlichen Kontrolle.
Etiketten
Dabei handelt es sich im Wesentlichen um winzige Textteile mit farbigem Hintergrund. Wofür könnten Sie sie verwenden? Tags und andere Metadaten, oder wie der Name schon sagt, können Sie sie verwenden, um Dinge zu kennzeichnen, z. Formularfelder. Enthalten sind normale Etiketten, Warnetiketten und Warnetiketten. Es ist nur eines dieser kleinen, nützlichen Dinge, die ich an Foundation liebe. Siehe auch: Tastenanschläge
Hinweise und Eingabeaufforderungen
Manchmal braucht man auf einer Website und viel häufiger in einer Anwendung Möglichkeiten, die Aufmerksamkeit eines Benutzers zu erregen. Sie tun dies entweder, um ihnen die notwendigen Informationen zu präsentieren, sie auf ein unvollständiges Formularfeld oder eine unvollständige Aktion aufmerksam zu machen oder um ihnen den Umgang mit einer Anwendung beizubringen. Wenn Sie böse sind, könnten Sie es tun, um Werbung abzuspielen … mit Ton. Sie könnten es mit einem modalen Fenster tun. Foundation verfügt über großartige modale Fenster mit umfangreichen Verhaltensoptionen, Größenoptionen, Ereignisbindungen … sogar einer Option zum Entfernen des Hintergrunds. Dann gibt es die Warnungen. Diese großen, farbenfrohen Warnboxen sind statisch positioniert und erstrecken sich über die gesamte Breite ihres Behälters. Sie können sie jedoch jederzeit zu einer festen Position für Site-weite Warnungen machen. Habe ich die Farbe, abgerundete Ecken und andere Präsentationsklassen schon erwähnt? Ich werde aufhören, weil sie das eine Zeit lang tun viel von Sachen. Dann haben wir Tooltips. Diese können auf nahezu jedes Element angewendet werden und so eingestellt werden, dass sie nur auf großen Bildschirmen oder auf allen Bildschirmen angezeigt werden. (Auf Mobilgeräten müssen Sie auf das betreffende Element tippen, um den Tooltip anzuzeigen.) Sie können auch auf einer beliebigen Seite des Elements positioniert werden.
Spritztour bringt Tooltips auf die nächste Ebene. Es handelt sich um ein Plugin, das Tooltips (und andere Dinge) nutzt, um Benutzern einen Rundgang durch Ihre Website oder Anwendung zu ermöglichen. Ideal für Erstbenutzer, wenn die Benutzeroberfläche unbedingt komplex ist.
Inhalt
Die grundlegenden HTML/CSS-Frameworks bieten Ihnen die Möglichkeit, Ihre Inhalte auf einer Seite zu organisieren und ihnen ein wenig Stil zu verleihen. Allerdings handelt es sich hierbei um eines der großen Frameworks, was zusätzliche Komponenten, auch für den Inhalt, bedeutet. Als Erstes haben wir Preistabellen: Die Jungs von ZURB kennen ihr Publikum ziemlich gut. Viele Menschen wünschen sich einfache Möglichkeiten, Preisinformationen für ihre verschiedenen Produkte und Dienstleistungen anzuzeigen. Die Foundation stellt es ihnen in einem ziemlich standardisierten Format zur Verfügung. Als nächstes die Fortschrittsbalken. Ich werde nicht näher darauf eingehen. Sie sind genau das, was Sie erwarten würden. Foundation enthält außerdem das grundlegende Akkordeon-Plugin und das erwartete Tabbed-Content-Plugin. Ich finde es interessant zu bemerken, dass man Inhalte mit Registerkarten in einen Akkordeonabschnitt einfügen kann. Schließlich habe ich das in wenigen anderen Frameworks gesehen und finde es unglaublich interessant: eine Komponente mit gleicher Spaltenhöhe. Sie nennen es das Equalizer, ein Name, der nur halb so schlimm ist wie seine Funktion. Dafür ist natürlich JavaScript erforderlich, aber es ist eine sehr einfache Möglichkeit, dafür zu sorgen, dass alle Spalten in einem bestimmten Abschnitt auf reaktionsfähige Weise die gleiche Höhe behalten. Fügen Sie einfach ein paar Datenattribute hinzu und schon kann es losgehen. So sieht es in Kombination mit der Preistabellenkomponente aus:
Wie man anfängt
Jetzt haben Sie die umfangreiche Funktionsliste durchgesehen und möchten diese Funktionen nutzen! Rechts? Nun, wenn ich tatsächlich richtig liege, dann erfahren Sie hier, wie Sie anfangen. Wir werden in Foundation eine schöne, einfache Grundvorlage für die Praxis erstellen. Sie können in Ihrem eigenen Texteditor mitmachen, den Code kopieren und einfügen oder einfach die Vorlage herunterladen, die ich zur Verfügung gestellt habe, weil Sie ein Betrüger sind. Nach diesem Abschnitt liste ich eine Reihe weiterer großartiger Tutorials und Schulungsressourcen auf, die Sie auf Ihrem Weg zum Foundation-Meister unterstützen. Laden Sie das Standardpaket herunter Download-Seiteund fangen wir an.
Fügen Sie die Basisdateien in Ihr Projekt ein
Wenn Sie nun das Paket herunterladen, sieht die darin enthaltene Dateistruktur etwa so aus: Projektordner index.html (Demodatei.) people.txt (Wie eine Readme-Datei.) robots.txt (Lassen Sie dies einfach in Ruhe.) /cssfoundation.cssfoundation.min.css * normalize.css * /img (Hinweis: Leer) /jsfoundation.min.js * /foundationfoundation.abide.jsfoundation.accordion.jsfoundation.alert.js (usw.) Riesige Liste hier. Sie können diese Dateien behalten, um die Quelle anzuzeigen/mit ihr zu spielen, aber Sie benötigen sie nicht wirklich, um das Framework zu verwenden.) /vendor fastclick.js jquery.cookie.js jquery.js * modernizr.js Platzhalter. js Sie werden feststellen, dass ich hinter einigen dieser Dateien ein Sternchen gesetzt habe. Dies sind die einzigen Dateien, die Sie tatsächlich benötigen, damit das Framework seine Aufgabe erfüllt. Der Rest sind Quelldateien oder nette zusätzliche Dienstprogramme. Diese Dienstprogramme können Ihnen sicherlich dabei helfen, großartige Dinge zu tun, sind aber nicht unbedingt notwendig. Zum Beispiel, placeholder.js implementiert die Platzhalter Attribut von HTML5-Formularen für Browser, die es nicht unterstützen. Die von mir markierten Dateien sind die einzigen, auf die Sie im Abschnitt Ihrer Webseite/Anwendung unbedingt verlinken müssen. Für die Zwecke dieses Tutorials werde ich die meisten dieser Dateien löschen und nur die wesentlichen Dateien behalten. Ich werde auch mit einem Rohling ganz von vorne beginnen index.html. Zunächst sieht unsere „Homepage“ etwa so aus: Möglicherweise ist Ihnen dort eine zusätzliche CSS-Datei aufgefallen. Wir benötigen das für benutzerdefinierte Stile.
Erstellen Sie ein einfaches Layout
Da es sich also um eine Homepage handelt, gehen wir das Konzept weiter aus. Wir machen daraus eine außergewöhnlich generische Landingpage für das eine oder andere Unternehmen. Für dieses Tutorial gibt es kein zweispaltiges Layout! Die sind so aus der Mode. Beachten Sie, dass ich in diesem Beispiel alles überspringe, etwa eine Navigationsleiste oder einen Call-to-Action. Dies sind unbedingt Dinge, die Sie in echten Projekten tun sollten.
Der Header
Gemäß den aktuellen Gesetzen der Designtrends müssen wir eine große Kopfzeile mit unserem Firmennamen, einem Slogan und einem riesigen Hintergrundbild erstellen (nicht in diesem Tutorial enthalten). Der HTML-Code dafür ist einfach genug:
Unser Firmenname
Fügen Sie hier einen prägnanten Slogan ein
Der Reihe Klasse definiert nicht nur die äußeren Grenzen unseres Rasters, sondern zentriert es für uns. Der Header Das Element dient sowohl aus semantischen Gründen als auch als Platzhalter für das spätere Hinzufügen eines Hintergrundbilds. Wir möchten, dass sich unsere Kopfzeilen-Rasterspalte unabhängig von der Bildschirmgröße auf einhundert Prozent ausdehnt, also müssen wir nur das verwenden klein-12 Klasse. Mittlere und große Bildschirme übernehmen diese Stile, sofern nicht andere angegeben werden. Wir haben unsere Kopfzeile und unseren zentrierten Text. Dies gibt uns jedoch nicht den hohen Kopfball, den wir wollen. Dafür benötigen wir einige benutzerdefinierte Stile: /* HEADER STYLES */ header#page-header { height: 500px; Hintergrund: #cecece; } header#page-header > div.row { position: relative; oben: 50 %; transform: TranslateY(-50%); } Wie Sie sehen können, habe ich unsere gegeben Header eine Hintergrundfarbe anstelle eines tatsächlichen Bildes und vertikal zentriert unseren Header-Inhalt. Ziemlich ordentlich, oder? So sieht unsere Seite bisher aus:
Die Einführung & Dienstleistungen
Sie haben sich also mit Ihrem Header mutig angekündigt. Es ist an der Zeit, Ihrem Benutzer zu sagen, wer Sie sind und was Sie tun. Eine kleine Beschreibung zu jeder Dienstleistung oder jedem Produkt… so machen wir es in der heutigen Zeit. Lass uns anfangen.
Wer wir sind
Lorem ipsum dolor sit amet, ut hat probatus laboramus beleidigt, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut see tempor accusam. Facer noster usu no, duo sumo maiorum eu. Sea id semper maluisset iracundia.
Was wir tun
Dienstname
Lorem ipsum dolor sit amet, ut hat probatus laboramus beleidigt, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut see tempor accusam.
Dienstname
Lorem ipsum dolor sit amet, ut hat probatus laboramus beleidigt, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut see tempor accusam.
Dienstname
Lorem ipsum dolor sit amet, ut hat probatus laboramus beleidigt, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut see tempor accusam.
Dienstname
Lorem ipsum dolor sit amet. ut hat probatus laboramus beleidigt, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut see tempor accusam. Okay, wie Sie sehen können, habe ich lediglich einige weitere Zeilen und Spalten mit Inhalt hinzugefügt. Ich habe die entsprechenden Klassen angewendet, um die Spalten an das Gerät anzupassen, auf dem sie angezeigt werden. Im #Einführung Im Abschnitt habe ich nicht nur die mittlere Spalte in voller Breite gestaltet. Um sicherzustellen, dass der Einleitungsabsatz lesbar ist, habe ich ihn stattdessen verkleinert und ihm das entsprechende Format gegeben versetzt Klassen für jede Bildschirmgröße. Der vertikale Abstand von Inhaltsabschnitten ist etwas, das Sie in jedem Framework selbst festlegen müssen, also brauchte ich wieder etwas benutzerdefiniertes CSS: section#page-content, section#page-content > #services { padding-top: 3em; } section#page-content { padding-bottom: 3em; } Da gibt es nichts Besonderes. Da nahezu alles, einschließlich des Rasters, mit Ems-Abständen versehen ist, habe ich sie für die Polsterung verwendet, um die optische Einheitlichkeit zu gewährleisten. Stellen Sie sich den em-basierten Elementabstand als ein integriertes Grundlinienraster vor, das Sie problemlos nutzen können. So sieht das Ganze jetzt aus:
Die Fußzeile
Geben wir uns eine ganz einfache Fußzeile mit ein paar Navigationslinks und einem Copyright-Hinweis, denn warum nicht?
Copyright © Unser Unternehmen, 2014
Hier habe ich eine Inline-Liste (siehe oben) für diese Fußzeilen-Links und zwei Spalten eingefügt, die auf Telefongröße vertikal ausgerichtet sind. Hier ist das CSS, das ich verwendet habe: footer#page-footer { padding-top: 3em; Polsterung unten: 3em; border-top: 1px solide #cecece; } Und voilà! Eine einfache Landingpage, die Sie nach Herzenslust anpassen können. So sieht das Ganze aus:
Schnappen Sie sich die ZIP-Datei, wenn Sie möchten, und spielen Sie mit dem Code, der bereits vorhanden ist. Beginnen Sie bei Null und werfen Sie einen Blick auf die Quelle. Oder werfen Sie einfach einen Blick auf die Schulungsmaterialien, die andere erstellt haben …
Tutorials und Schulungen
Schulungsmaterialien von ZURB
Wie zu erwarten ist, sind die Jungs von ZURB über die Dokumentation hinausgegangen und haben uns einige eigene Schulungsmaterialien zur Verfügung gestellt. Diese nehmen die Form an Grundlagenkursund das Fortgeschrittener Grundkurs. Diese Schulungsmaterialien sollen heruntergeladen und vor Ort angezeigt werden. ZURB bietet auch kostenpflichtige Schulungen an, die online absolviert werden können. Weitere Informationen hierzu finden Sie hier auf ihrer Website.
Screencasts von Webdesigner Depot
Das ist richtig! Wir haben einige eigene Schulungsvideos erstellt, mit besonderem Fokus auf Foundation 5. Schauen Sie sich diese auf YouTube an: Grundlagen 5 EinführungUnd Nutzung der erweiterten Funktionen der Foundation
Erste Schritte mit dem ZURB Foundation 5 Grid
Das Reihe von Screencasts von James Stone deckt alle Grundlagen ab. Zu den Themen gehören: Einrichten des Projekts, Beginnen mit dem Desktop-Raster, verschachtelte Desktop-Raster, Hinzufügen von Platzhalterbildern, Erstellen des mobilen Erlebnisses und Verfeinern des Tablet-Erlebnisses.
Tutorials zum ZURB Foundation 5-Framework
Die Jungs von ieatcss.com Ich habe ein ganzes E-Book rund um Foundation 5 geschrieben. Hier finden Sie die Tutorials für Anfänger Hier. Wenn Sie etwas Fortgeschritteneres wünschen, können Sie das E-Book für 29 USD herunterladen. Warum würden Sie das bezahlen? Denn anstatt Ihnen nur zu erklären, wie Sie das Framework verwenden, erklären sie Ihnen, wie alles funktioniert. Und ich meine alles, einschließlich der JavaScript-Plugins.
Mastering Foundation Zurb. Tutorials von A bis Z
Das ist etwas anderes Reihe von Tutorials, gefolgt von einem optionalen E-Book. Diese werden bereitgestellt von MonsterPost, der TemplateMonster-Blog.
Die frechen Stile der Foundation erklärt
Wenn Sie sich ein etwas fortgeschritteneres, ausführlicheres Tutorial gewünscht haben, Hier sind Sie ja! In diesem Beitrag unsere Freunde von Tuts+ Beschreiben Sie ausführlich, wie Sie FOundation von den Sass-Dateien an anpassen. Wenn Sie noch nie mit Sass-Dateien gearbeitet haben, beginnen Sie hier.
So erstellen Sie responsive Tabellen in Foundation
Zu guter Letzt zeigen uns die brillanten Leute von Sitepoint, wie man etwas erstellt Responsive Tabellen. Allerdings ist dies eine Lösung, die Foundation standardmäßig implementiert. In diesem Tutorial erfahren Sie, wie Sie eine bestimmte Komponente von Foundation in ein anderes Projekt integrieren. (Wenn Sie neu im Webdesign sind, haben Sie vielleicht etwas davon gehört, dass Tabellen „böse“ sind. Nun, wenn Sie sie für das Layout Ihrer Website verwenden, ist das absolut wahr. Manchmal werden Daten jedoch am besten in einem Tabellenformat dargestellt. Daher ist es gut zu lernen, wie man Tabellen auf mobilen Geräten lesbar macht.)
Gabeln
Gumby – eine Foundation-Gabel
Das Schöne an Open-Source-Frameworks wie Foundation ist, dass ihre Lizenzen es den Leuten ermöglichen, sie zu übernehmen, zu ändern und sie sogar ihr Eigen zu nennen. Die Designer und Entwickler von Digitale Chirurgen habe genau das getan. Sie behielten die strukturellen Teile von Foundation bei und fügten dann einige interessante neue Benutzeroberflächenkomponenten und eigene jQuery-Plugins hinzu. Das Ergebnis wurde benannt Gumby, und es ist ein fantastischer Rahmen für sich. Dabei ist Foundation so konzipiert, dass es flexibel ist und sowohl für inhaltsgesteuerte Websites geeignet ist Und Auf Webanwendungen ist Gumby spezialisierter. Es konzentriert sich auf eines: inhaltsgesteuerte Websites und deren einfache Erstellung.
Fast flache Benutzeroberfläche
Die Änderungen an Foundation in diese Gabel sind so subtil, dass ich nicht sicher bin, ob ich es einen Fork oder ein Theme nennen soll. Es handelt sich im Wesentlichen um Foundation 5.2.2 mit nur wenigen kleinen ästhetischen Änderungen. Was es für mich interessant macht, ist, dass diese Änderungen dem Trend des „flachen Designs“ in sehr kleinem Maße entgegenwirken. Der Grund dafür scheint zu sein, dass bestimmte Elemente der Benutzeroberfläche, wie etwa Schaltflächen, sollen behalten einen subtilen Bezug zur dritten Dimension bei. Das Design ist leicht skeuomorph und ich denke, dass es die Benutzerfreundlichkeit tatsächlich verbessern könnte. Na ja, für einige Benutzer jedenfalls.
Verschiedene Ressourcen und Tools
Hier sind einige interessante Foundation-bezogene Tools und Dinge, die in keine andere Kategorie passen:
Bausteine von ZURB
Der Bausteine sind Codeausschnitte, die mit und/oder für Foundation erstellt wurden. Dazu gehören neue UI-Komponenten, wiederverwendbare Inhaltslayouts und mehr.
Erhabene Textausschnitte
Erhabener Text ist ein fantastischer Texteditor, der von Programmierern weltweit verwendet wird. Diese Ausschnitte (Codeblöcke, die einfach in jede Datei eingefügt werden können) sind im Wesentlichen dazu gedacht, das Erstellen von Layouts mit Foundation viel schneller zu machen. Sie sind sowohl mit Sublime Text 2 als auch mit Sublime Text 3 kompatibel.
Experimenteller Gittergenerator
Gefällt Ihnen das Standardraster mit zwölf Spalten nicht oder ist es nicht das Richtige für Ihr Projekt? Dann machen Sie ein neues! Gehen Sie einfach hier vorbei Netzgenerator, geben Sie Ihre Werte ein und holen Sie sich Ihr CSS. Allerdings scheint das CSS auf einer älteren Version von Foundation zu basieren, daher müssen Sie es möglicherweise an die neueren Klassennamen und responsiven Klassen anpassen. Dennoch erledigt es alle schwierigen Berechnungen für Sie.
Lesezeichen
Lesezeichen sind kleine Tools, die normalerweise mit JavaScript erstellt werden und in Ihrer Lesezeichenleiste platziert werden können. Sobald Sie sie auslösen, können sie die aktuelle Seite teilen, nützliche Informationen in einem Overlay anzeigen und viele andere nützliche Kleinigkeiten. Der Rasteranzeige-Lesezeichen von Antoine Lefeuvre kann verwendet werden, um ein visuelles Raster über die Seite zu legen, an der Sie gerade arbeiten. Das Raster ist anpassbar, Sie können es jedoch problemlos auf die Foundation-Standardeinstellungen zurücksetzen. Der Vertikales Rhythmus-Raster-Lesezeichen von Kevin Altman macht im Großen und Ganzen das Gleiche wie der Grid Displayer. Der Unterschied besteht darin, dass Sie anstelle vertikaler Linien eine Reihe horizontaler Linien erhalten, die Ihnen dabei helfen, den vertikalen Abstand zwischen Elementen zu verwalten. Der [Responsive Design Bookmarklet] von Victor Coulon lädt die aktuelle Seite, auf der Sie sich befinden, in einem Tool neu, mit dem Sie schnell eine Vorschau Ihrer Designs in verschiedenen Auflösungen anzeigen können.
Ein Blick auf das, was kommt
Sie sollten besser glauben, dass ZURB nicht still sitzt. Neben all den anderen Dingen, die sie tun, sind sie auch hart bei der Arbeit. Sie haben ein paar coole Sachen im Gepäck, wie zum Beispiel:
Stiftung für Apps
ZURB erstellt eine brandneue Version von Foundation, die Foundation 5 nicht ersetzen, sondern parallel dazu arbeiten wird. Es wird Funktionen speziell für das Entwerfen, Prototyping und Erstellen von Webanwendungen enthalten. Zu den Funktionen gehören ein neues Raster, die Integration mit Angular.js, neue Funktionen, die speziell für das Prototyping entwickelt wurden, und mehr. Um mehr darüber zu erfahren, was sie tun, lesen Sie selbst, was sie zu sagen haben: Die nächste Stiftung.
Motion-Benutzeroberfläche
Technisch gesehen wird Motion UI Teil dieser neuen, App-zentrierten Version von Foundation sein, aber ich kann mir vorstellen, dass es als separate Komponente für den Einsatz überall verfügbar sein wird. (Das ist eine fundierte Vermutung, mehr nicht …) Was ist das? Es ist eine Animationsbibliothek. Moderne Apps nutzen häufig Animationen, nicht nur um die Benutzer zu beeindrucken, sondern auch um die Benutzerfreundlichkeit zu verbessern. Motion UI soll denjenigen von uns die Erstellung komplexer Schnittstellen erleichtern. Laut den ZURB-Leuten selbst: Und obwohl ich denke, dass die absichtliche, vollständige Eliminierung des Skeuomorphismus von vornherein eine leichte Überreaktion gewesen sein könnte (siehe, was ich zuvor über „Almost Flat UI“ gesagt habe), bin ich froh darüber Wir überlegen uns Alternativen. Wir brauchen neue Möglichkeiten, unseren Benutzern zu zeigen, wie sie das Beste aus unseren Produkten herausholen können, und Animationen sind eine großartige Möglichkeit, dies zu erreichen.
Abschluss
Foundation ist genau das, was der Name andeutet. Es ist ein Ausgangspunkt, und zwar ein großartiger. Es ist nicht das einzige großartige Framework auf dem Markt, aber es ist eine gute Wahl für alle, die schneller schöne Produkte erstellen möchten. Passt es zu Ihnen und Ihren Projekten? Werfen Sie einen Blick hinein und finden Sie es heraus.
