Stiftung ist eines der beiden großen HTML / CSS / JS-Frameworks für Frontend-Entwickler. Das ist nicht zufällig geschehen. Heute sind wir hier, um Ihnen alles darüber zu erzählen, warum Sie es verwenden sollten.

Jetzt zuerst, für diejenigen, die vielleicht ihr eigenes HTML schreiben, aber noch nie mit einem Framework gearbeitet haben, hier eine Erklärung:

Frameworks sind im Grunde genommen eine große Menge vordefinierten Codes, die Ihnen helfen, schneller mit Ihren Projekten zu beginnen. Im Fall von Front-End-Code wie HTML und CSS bedeutet dies, dass Sie Dinge wie Layout-Raster, grundlegende Schaltflächenstile und häufig verwendete Schnittstellenelemente finden. Größere Frameworks können auch jQuery-Plugins enthalten.

Sie sind nicht als vollständige Website-Vorlagen oder -Themen gedacht, sondern als eine Reihe von Bausteinen. Du nimmst, was du brauchst, modifizierst es für das Projekt und kommst im Allgemeinen mit deiner Arbeit voran (und vermutlich auch mit deinem Leben). Sie sind dazu gedacht, angepasst zu werden und daran zu basteln.

Dies kann zunächst eine entmutigende Aufgabe sein, da Rahmen wie Foundation und ihr 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 potenzielle Vorteile anhand der Zeitkosten bewerten.

Wenn Sie sich jedoch an ein Framework gewöhnt haben, können Sie die Zeit für das Schreiben von Markup und CSS erheblich reduzieren.

Einige Geschichten

Die Stiftung begann ihr Leben als nichts anderes als einen allgemeinen Stilführer und einen gemeinsamen Code. Die Leute bei ZURB entschieden, ihren Prototyping-Prozess zu beschleunigen, indem sie einige HTML- und Stile, die sie tendenziell wiederverwendeten, nahmen und daraus ein Framework machten. Das ist es. So werden die meisten guten Dinge gemacht. Jemand brauchte es, also haben sie es geschafft.

Im Laufe der Zeit entschieden sie, dass das, was sie gemacht hatten, zu gut war, um sich selbst zu behalten, also veröffentlichten sie die Version 2.0.0 auf der Welt. Sie machten alles reaktionsfreudig, polierten es und öffneten es für uns alle. Jetzt verwenden Designer und Entwickler auf der ganzen Welt den Code von ZURB, um ihre Produkte schneller zu machen, und vielleicht wage ich es besser zu sagen.

Seit seiner Veröffentlichung am 18. Oktober 2011 hat die MIT-lizenziert Framework wurde zu einem der "großen zwei", und Verwendung auf Tausenden von Websites gesehen.

Seine Popularität spricht für seinen Nutzen und seine Vielseitigkeit gleichermaßen. Wenn Sie entscheiden, dass Foundation für Sie das Richtige ist, wird Sie das nicht enttäuschen.

Eigenschaften

Die Stiftung wird seit fast drei Jahren aktiv weiterentwickelt. Es ist daher keine Überraschung, dass die Feature-Liste umfangreich ist.

Im Kern besteht das Framework aus CSS-Dateien (generiert aus SASS-Dateien, die ebenfalls zum Download verfügbar sind) und mehreren jQuery-Plugins. Im Hauptdownload ist kein HTML enthalten (außer einer sehr einfachen Demo-Seite, die Sie selbst schreiben können).

Allerdings gibt es zu jeder Komponente eine ausführliche Dokumentation. Jeder Abschnitt der Dokumentation enthält ein Beispiel-HTML, das Sie bei Bedarf verwenden und anpassen können. Wenn du direkt tauchen willst, schau dir die Dokumentation.

Wenn Sie das Framework von Grund auf anpassen möchten, gibt es zwei Dinge, die Sie tun können:

Option 1

Sie können wählen, nur die Komponenten, die Sie möchten, direkt auf die herunterladen Haupt-Download-Seite. Wenn alles, was Sie wollen, ist das Raster, die Navigation CSS und ein jQuery-Plugin oder zwei, das ist einfach genug. Einfach alle Dinge, die du nicht berücksichtigen willst, abwählen und los!

Dieser "Framework-Generator" enthält auch Optionen zum Anpassen des Rasters, Ihrer Hauptfarben und einiger anderer Optionen. Dies ist die Option, die ich zum Beispiel für das Prototyping oder die Entwicklung einer firmeninternen Anwendung wählen würde. Die Standarddarstellungsstile sind meistens gut genug für diese Dinge, also warum gehst du und änderst sie, wenn du nicht musst?

Option 2

Jetzt ist dies für die Leute, die den Rahmen für öffentliche Projekte verwenden werden. Sie werden die standardmäßigen Darstellungsstile nicht verwenden wollen, da sie aller Wahrscheinlichkeit nach nicht mit Ihrem Branding übereinstimmen. Für eine detaillierte Anpassung müssen Sie zur Quelle gehen.

Und mit der Quelle meine ich die Sass-Dateien. Mit diesen können Sie nach Belieben alle Variablen anpassen und den Rahmen zu Ihrem eigenen machen.

( Ein Hinweis auf Sass-Dateien: Auch für diejenigen, die mit dem Begriff nicht vertraut sind, Sass ist ein CSS-Präprozessor, der Dinge wie Variablen, Mixins und andere Programmierfunktionen in reguläres CSS einführt.

Machen Sie eine Google-Suche nach etwas wie "Sass-Compiler für [Ihr Betriebssystem hier]", und Sie werden finden, was Sie brauchen. Persönlich kann ich die Cross-Plattform nicht empfehlen Koala App genug.)

Sobald Ihre Sass-Dateien in eine reguläre CSS-Datei kompiliert sind, verknüpfen Sie sie einfach in Ihrer Section wie mit jeder anderen CSS-Datei. Die Koala App zum Beispiel kompiliert die Sass-Dateien automatisch jedes Mal, wenn Sie sie speichern, so dass Ihr Browser immer die neuesten Änderungen sehen wird.

Struktur

Das Gitter

Ich kann nicht mit Sicherheit sagen, dass alle HTML-Frameworks mit einem Rastersystem für das Layout ausgestattet sind, aber die meisten tun es. Das Raster der Foundation ist ohne jegliche Anpassung eine klassische Zwölf-Spalten-Version, nestbar und reaktionsfähig.

Das Markup und die Klassen sind einfach, einschließlich Klassen für die Anpassung des Layouts nach Bildschirmgröße. Wenn Sie bereits mit Grid-Systemen wie dem 960 Grid System gearbeitet haben, können Sie das Grid-System von Foundation nicht so leicht beherrschen.

Hinweis: Es ist für einen ersten Ansatz für Mobilgeräte codiert. Sie sollten dies bei der Gestaltung Ihrer Website berücksichtigen.

Das Blockraster

Betrachten Sie dies als ein "Mini Grid". Es wurde entwickelt, um eine bestimmte Anzahl von Objekten gleichmäßig und unabhängig von der Bildschirmgröße zu halten.

Beispiel: Sie haben drei identisch große Elemente, die Sie nebeneinander auf jedem Gerät speichern möchten. Um dies zu tun, würden Sie dieses Blockraster-Beispiel verwenden, das ich schamlos direkt aus der Dokumentation gestohlen habe:

Beachten Sie, dass Sie bei Bedarf eine andere Anzahl von Spalten für unterschiedliche Bildschirmgrößen angeben können. Die Elemente behalten ihre gleiche Größe bei. Diese Komponente ist perfekt für Dinge wie Fotogalerien.

Reaktionsschnelles Zeug

Die Medienabfragen werden einfach gehalten, sind aber so konzipiert, dass sie eine Reihe von Bildschirmgrößen abdecken können, von Smartphones bis hin zu lächerlich großen iMac-Bildschirmen.

Von Grund auf neu entwickelt zu werden, um mobil zu sein, ist ein guter Anfang. Foundation geht noch einen Schritt weiter und enthält spezielle Komponenten, mit denen Sie die reaktionsfähigen Bereiche Ihrer Websites weiter verfeinern können.

Zunächst einmal gibt es die üblichen Klassen, um verschiedene Elemente bei verschiedenen Darstellungsgrößen zu verbergen oder anzuzeigen. Dann bekommst du etwas fortgeschrittenere Dinge, wie Austausch.

Interchange ist eine JS-Bibliothek, die abhängig von Medienabfragen unterschiedliche Inhalte dynamisch lädt. Sie können diese Bibliothek verwenden, um zu entscheiden, ob Sie beispielsweise ein JPG-Bild einer Karte oder eine Google Maps-Einbettung laden möchten. Oder ein normales Bild anstelle eines Bildes im Retina-Bildschirmformat.

Mit dieser Bibliothek können Sie Ihren Benutzern einige Daten und etwas RAM sparen. Stellen Sie sicher, dass Sie für Benutzer mit deaktiviertem JavaScript einen Fallback implementieren.

Navigation

Die Navigationsoptionen sind reichhaltig und reichen von der Allzweck-Navigationsleiste (mit Dropdown-Menüs) über Symbolleisten, Brotkrümelnavigation, Seitenumbruch, Seitenleisten und vieles 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, und wenn Sie an der Startposition vorbeiscrollen, folgt sie Ihnen nach unten. Wenn Sie ihn verwenden, um auf der aktuellen Seite mit dem Abschnitt zu verlinken, kann er beim Herunterscrollen jeden einzelnen (in der Leiste selbst) hervorheben.

Offcanvas

Das zweite ist Offcanvas, Dies ist eine vertikale Navigationsleiste, die standardmäßig ausgeblendet ist. Klicken Sie auf die Menüschaltfläche, und das Menü wird auf der Seite angezeigt, damit Sie das Surfen genießen können.

Beachten Sie, dass diese wie alle Foundation-Komponenten mit einem Minimum an Markup implementiert werden können. Die Leute von ZURB haben viel Arbeit darauf verwendet, diese ziemlich fortgeschrittenen Benutzeroberflächenelemente einfach zu implementieren, und das zeigt sich.

Medien

Die medienbezogenen Komponenten eines jeden Frameworks sind oft dort, wo Framework-Macher dazu neigen, ein wenig zu zeigen, und Foundation ist keine Ausnahme.

Zum Beispiel, standardmäßig enthalten ist Lightbox wird gelöscht. Es ist eine tot-einfache Lightbox-Bildergalerie, wirklich. Werfen Sie einfach einige Thumbnails ein, fügen Sie die relevanten Klassen hinzu und Sie verfügen über eine touch-fähige Bildergalerie, die Bilder mit variabler Höhe ohne Probleme behandelt.

Ein anderes ist Flex-Video, Das kann theoretisch für fast jedes einbettbare Objekt verwendet werden. Wickeln Sie einfach ein div mit der Flex-Video- Klasse um Ihr Youtube-Video, iframe, embed oder object-Element, und schon können Sie loslegen. Diese Objekte werden nicht automatisch mit der Größe des Browsers skaliert.

Zu guter Letzt gibt es Styles für Bildminiaturen. Nichts Besonderes oder Besonderes hier zu sehen ... sie sind einfach nur nett zu haben.

Aber was ist mit Orbit?

Leute, die Foundation vor Version 5 benutzt haben, werden sich vielleicht über das Orbit-Plugin von ZURB wundern. Es ist ein Karussell, manchmal auch als Slideshow bezeichnet, eine Komponente, die reaktionsschnell, mit Funktionen geladen ist, und es funktioniert ziemlich gut.

Obwohl es noch im Framework ist, wird es weder von ZURB unterstützt, noch befindet es sich in aktiver Entwicklung.

Die Gründer der Stiftung selbst empfehlen die Suche nach Alternativen wie Eulenkarussell, oder Glatt.

Formen

Natürlich sind grundlegende Stile für Formen nicht vergessen worden. In der Tat wurden sie im Laufe der Jahre zu Werken von untertriebener Schönheit verfeinert. Du denkst vielleicht, ich übertreibe, aber ich glaube nicht, dass ich es bin. Jahrelange Erfahrung wurde in grundlegende Formstile umgewandelt, von denen ich glaube, dass sie auf fast jedes Projekt angewendet werden können, mit einem Minimum an Optimierungen.

Es braucht Geschick, um etwas so langweilig zu machen, wie Formen sowohl allgemein als auch schön zugleich aussehen. Es ist kein Wunder, dass viele der Frameworks, die ich ausprobiert habe, Foundation Stil nachgeahmt haben.

Das heißt, es sind nicht alle langweiligen Textfelder und Radioknöpfe. Du weißt, dass sie ein paar Sachen machen mussten.

Nehmen Sie zum Beispiel die Slider-Komponente: Sie können Bereichsschieberegler mit HTML5 implementieren, aber sie sind langweilig und verwenden die Standarddarstellung des von Ihnen verwendeten Betriebssystems. Foundation hingegen enthält Schieberegler, die mit CSS für Ihr Anpassungsvergnügen gestylt werden können.

Außerdem ist eine Formularvalidierungsbibliothek enthalten (mehr JavaScript hier ...), mit der Sie sicherstellen können, dass Ihre Benutzer die richtigen Daten eingeben. Wenn sie etwas falsches eingeben, zum Beispiel eine ungültige E-Mail-Adresse, wird eine Benachrichtigung angezeigt und sie werden benachrichtigt.

Tasten

Kann kein Framework ohne Standard-Schaltflächenstile haben. Ich meine du kannst es, aber irgendwie wäre es nicht richtig. Die Standard-Foundation-Schaltflächen unterscheiden sich nicht zu sehr von anderen Frameworks. Das heißt, sie werden mit minimalem Markup implementiert, und sie haben verschiedene Größen und farbspezifische Klassen.

Sie können sie jedoch gruppieren Schaltflächengruppen um verwandte Aktionen zusammen zu werfen. Diese Schaltflächengruppen (zumindest die horizontalen) sind so konzipiert, dass sie perfekt mit dem Raster funktionieren. Sie haben auch zusätzliche Klassen für Größe, Farbe und abgerundete Ecken ... all die üblichen Sachen.

Ändern Sie das Markup etwas mehr, und Foundation kann Ihnen auch geben Dropdown-Tasten , und diese geteilte Tasten . Sie wissen, meist Button, Teil Dropdown-Menü?

Die letzten beiden Komponenten nutzen das eingebaute Dropdown-Plugin von Foundation. Dies bedeutet unter anderem, dass sie JavaScript-abhängig sind. Trotzdem sind sie einfach zu implementieren. Es dreht sich alles um die Klassen.

Typografie

Foundation verwendet eine sehr einfache, serifenlose typografische Einrichtung, um Ihnen den Einstieg zu erleichtern. Es ist einfach, einfach mit einigen grundlegenden Sass-Variablen anzupassen, und es ist alles relativ groß. Das ist richtig, Foundation verwendet Rem .

Da die Schöpfer von Foundation an Usability glauben, ist alles groß genug, um auf kleinen Bildschirmen leicht gelesen zu werden. Auf mäßigem Abstand auf normalen Laptop / Desktop-Bildschirmen zu lesen, macht mir auch keine Probleme.

Zu den zusätzlichen typografischen Merkmalen gehören:

Inline-Listen

Möchten Sie eine horizontale textbasierte Liste? Weißt du, die Art, die du in eine Fußzeile der Website einbringen könntest? Du bist bedeckt. Laut den Machern sollten Sie:

Sie haben Recht.   saugt für räumliche Kontrolle.

Etiketten

Dies sind im Wesentlichen winzige Textteile mit farbigen Hintergründen. Wofür könnten Sie sie verwenden? Tags und andere Metadaten, oder wie ihr Name sagt, könnten Sie verwenden, um Dinge zu beschriften, d. Formularfelder.

Enthalten sind normale Etiketten, Warnschilder, Warnschilder. Es ist nur eines dieser kleinen, nützlichen Dinge, die ich an Foundation liebe.

Siehe auch: Tastenanschläge

Callouts und Eingabeaufforderungen

Manchmal auf einer Website und viel häufiger in einer Anwendung benötigen Sie Möglichkeiten, die Aufmerksamkeit eines Benutzers zu gewinnen. Sie tun dies, um sie mit den notwendigen Informationen zu konfrontieren, ihre Augen auf ein unvollständiges Formularfeld oder eine Aktion zu richten oder ihnen beizubringen, wie sie eine Anwendung verwenden.

Wenn du böse bist, kannst du Werbung machen ... 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 eine Option zum Entfernen des Hintergrunds.

Dann gibt es die Warnungen. Diese großen, bunten Alarmboxen sind statisch positioniert und erstrecken sich auf die Breite ihres Containers. Sie können jedoch immer eine feste Position für standortweite Warnungen festlegen. Habe ich schon die Farbe, abgerundete Ecken und andere Präsentationsklassen erwähnt? Ich werde aufhören, weil sie das für viele Dinge tun.

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 mobilen Gerä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.

Joyride bringt Tooltipps auf die nächste Ebene. Es ist ein Plugin, das Tooltips (und andere Dinge) nutzt, um Benutzern einen Überblick über Ihre Website oder Anwendung zu geben. Großartig für Erstanwender, wenn die Schnittstelle notwendigerweise komplex ist.

Inhalt

Die grundlegenden HTML / CSS-Frameworks bieten Ihnen eine Möglichkeit, Ihren Inhalt auf einer Seite zu organisieren und ihm ein wenig Styling zu geben. Dies ist jedoch einer der großen Rahmen, der zusätzliche Komponenten, sogar für den Inhalt, bedeutet.

Zuerst haben wir Preistabellen: Die ZURB-Jungs kennen ihr Publikum ziemlich gut. Viele Menschen wollen einfache Möglichkeiten, Preisinformationen für ihre verschiedenen Produkte und Dienstleistungen anzuzeigen. Foundation gibt es ihnen in einem ziemlich standardisierten Format.

Als nächstes, die Fortschrittsbalken . Ich werde nicht näher auf diese eingehen. Sie sind genau das, was Sie erwarten würden.

Foundation beinhaltet auch das grundlegende Akkordeon-Plugin und das erwartete Tabbed-Content-Plugin. Ich finde es interessant zu bemerken, dass Sie Tabbed Content in eine Akkordeon Sektion einfügen können.

Zu guter Letzt ist dies etwas, was ich in einigen anderen Frameworks gesehen habe, und ich finde es unglaublich interessant: eine Komponente mit gleicher Spaltenhöhe. Sie nennen es das Equalizer ein Name, der nur halb so gut ist wie seine Funktion. Es erfordert natürlich JavaScript, aber es ist eine sehr einfache Möglichkeit, alle Spalten in einem bestimmten Abschnitt reaktionsschnell gleich hoch zu halten.

Fügen Sie einfach ein paar Datenattribute hinzu und Sie können loslegen. Folgendes sieht folgendermaßen aus, wenn es mit der Preistabelle kombiniert wird:

Wie man anfängt

So, jetzt sind Sie durch die umfangreiche Feature-Liste gegangen, und Sie wollen sie Features! Recht? Nun, wenn ich in der Tat richtig bin, dann ist hier, wie Sie beginnen.

Wir werden in Foundation eine einfache, einfache Vorlage für die Praxis erstellen. Sie können Ihrem eigenen Texteditor folgen, 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 werde ich eine Reihe anderer toller Tutorials und Trainingsressourcen auflisten, um Ihnen auf Ihrem Weg zum Foundation Master zu helfen.

Go downloade das Standardpaket auf dem Downloadseite und lass uns anfangen.

Fügen Sie die Basisdateien in Ihr Projekt ein

Jetzt, wenn Sie das Paket herunterladen, sieht die Dateistruktur darin etwa so aus:

project-folderindex.html (Demo file.)humans.txt (Like a readme file.)robots.txt (Just leave this alone.)/cssfoundation.cssfoundation.min.css *normalize.css */img (Note: Empty)/jsfoundation.min.js */foundationfoundation.abide.jsfoundation.accordion.jsfoundation.alert.js(Etc. Huge list here.You can keep these files to see/playwith the source, but you don't actuallyneed them to use the framework.)/vendorfastclick.jsjquery.cookie.jsjquery.js *modernizr.jsplaceholder.js

Sie werden feststellen, dass ich nach einigen dieser Dateien ein Sternchen platziert 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 helfen, tolle Dinge zu tun, sind aber nicht unbedingt notwendig.

Beispiel: placeholder.js implementiert das Platzhalterattribut von HTML5-Formularen für Browser, die es nicht unterstützen.

Die Dateien, die ich markiert habe, sind die einzigen, auf die du unbedingt im Abschnitt deiner Webseite / Anwendung verlinken musst. Für die Zwecke dieses Tutorials lösche ich die meisten dieser Dateien und behalte nur die, die wesentlich sind. Ich werde auch von vorne anfangen mit einem leeren index.html .

Zu Beginn sieht unsere "Startseite" ungefähr so ​​aus:

< !DOCTYPE html>

Möglicherweise haben Sie eine zusätzliche CSS-Datei dort bemerkt. Wir werden das für benutzerdefinierte Stile benötigen.

Erstellen Sie ein einfaches Layout

Also, da dies eine Homepage ist, nehmen wir das Konzept weiter. Wir machen es zu einer außergewöhnlich generischen Zielseite für das eine oder andere Geschäft. Kein zweispaltiges Layout für dieses Tutorial! Das sind so aus der Mode.

Beachten Sie, dass ich in diesem Beispiel alles überspringe, einschließlich einer Navigationsleiste oder eines Call-to-Action. Das sind alles Dinge, die Sie in realen Projekten tun sollten.

Der Header

Nach den aktuellen Gesetzen der Designtrends müssen wir mit unserem Firmennamen, einem Slogan und einem massiven Hintergrundbild (nicht in diesem Tutorial enthalten) eine riesige Überschrift machen.

Der HTML-Code dafür ist einfach genug:

Our Company Name
Insert a pithy slogan here

Die Zeilenklasse definiert nicht nur die äußeren Grenzen unseres Gitters, sondern zentriert sie für uns. Das Header- Element ist dort sowohl aus semantischen Gründen als auch um einen Platzhalter bereitzustellen, um später ein Hintergrundbild hinzuzufügen.

Wir möchten, dass sich unsere Kopfzeilenspalte unabhängig von der Bildschirmgröße auf einhundert Prozent ausdehnt. Daher müssen wir nur die Klasse " Small-12" verwenden . Mittlere und große Bildschirme erben diese Stile, sofern nicht andere angegeben werden.

Wir haben unseren Header und unseren zentrierten Text. Dies gibt uns jedoch nicht den großen Header, den wir wollen. Dazu benötigen wir einige benutzerdefinierte Stile:

/*  HEADER STYLES  */header#page-header {height: 500px;background: #cecece;}header#page-header > div.row {position: relative;top: 50%;transform: translateY(-50%);}

Wie Sie sehen, habe ich unserem Header eine Hintergrundfarbe anstelle eines tatsächlichen Bildes gegeben und unseren Header-Inhalt vertikal zentriert. Ziemlich ordentlich, nicht wahr? So sieht unsere Seite aus:

Die Einführung und Dienstleistungen

Du hast dich mutig mit deinem Kopf angekündigt. Es ist Zeit, Ihrem Benutzer zu sagen, wer Sie sind und was Sie tun. Eine kleine Beschreibung über jede Dienstleistung oder jedes Produkt ... so machen wir es in dieser modernen Zeit.

Lass uns anfangen.

Who We Are
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam. Facer noster usu no, duo sumo maiorum eu. Sea id semper maluisset iracundia.
What We Do
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
Service Name
Lorem ipsum dolor sit amet. ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.

Alles in allem, wie Sie sehen, habe ich nur einige Zeilen und Spalten mit Inhalt hinzugefügt. Ich habe die entsprechenden Klassen angewendet, um die Spalten auf das Gerät zu skalieren, auf dem sie angezeigt werden.

Im Abschnitt " Einführung " habe ich nicht nur die zentrale Spalte in voller Breite erstellt. Um sicherzustellen, dass der Einleitungsabschnitt lesbar ist, habe ich ihn stattdessen verkleinert und für jede Bildschirmgröße die entsprechenden Offset- Klassen angegeben.

Der vertikale Abstand der Inhaltsabschnitte muss in jedem Framework für sich selbst festgelegt werden. Daher brauchte ich wiederum ein benutzerdefiniertes CSS:

section#page-content, section#page-content > #services {padding-top: 3em;}section#page-content {padding-bottom: 3em;}

Nichts besonderes dort. Da fast alles, einschließlich des Rasters, mit ems gespreizt ist, habe ich sie für die Füllung verwendet, um die Dinge visuell konsistent zu halten. Stellen Sie sich em-basierte Elementabstände als integriertes Grundlinienraster vor, das Sie leicht nutzen können.

So sieht das Ganze jetzt aus:

Die Fußzeile

Lassen Sie uns einen einfachen Fuß, mit ein paar Navigationslinks und einem Copyright-Hinweis geben, warum nicht?

Hier habe ich eine Inline-Liste (siehe oben) für diese Fußzeilenlinks und zwei Spalten, die in Telefongröße vertikal verlaufen, eingefügt. Hier ist das CSS, das ich verwendet habe:

footer#page-footer {padding-top: 3em;padding-bottom: 3em;border-top: 1px solid #cecece;}

Und voilà! Eine einfache Zielseite, die Sie nach Herzenslust anpassen können. So sieht das Ganze aus:

Greifen Sie die Zip-Datei, wenn Sie möchten, und spielen Sie mit dem bereits vorhandenen Code. Beginnen Sie bei Null und schauen Sie sich die Quelle an. Oder sehen Sie sich einfach die Trainingsmaterialien an, die andere gemacht haben ...

Tutorials und Training

Schulungsunterlagen von ZURB

Wie nicht anders zu erwarten, haben die Jungs von ZURB über die Dokumentation hinaus auch eigene Trainingsmaterialien zur Verfügung gestellt. Diese nehmen die Form der Grundlagenkurs , und das Fortgeschrittener Grundkurs . Diese Schulungsmaterialien sollen heruntergeladen und lokal angesehen werden.

Zurb bietet auch kostenpflichtige Schulungen an, die online absolviert werden können. Sie können mehr Informationen darüber finden auf ihrer Website .

Screencasts von Webdesigner Depot

Stimmt! Wir haben einige eigene Trainingsvideos erstellt, mit besonderem Fokus auf Foundation 5. Schau sie dir auf Youtube an: Stiftung 5 Einführung , und Verwenden der erweiterten Funktionen von Foundation

Erste Schritte mit dem ZURB Foundation 5 Grid

Dies Reihe von Screencasts von James Stone deckt alle Grundlagen ab. Zu den Themen gehören: Einrichten des Projekts, Starten mit dem Desktop-Grid, Verschachtelte Desktop-Grids, Hinzufügen von Platzhalterbildern, Erstellen des Mobile Experience und Verfeinern des Tablet-Erlebnisses.

ZURB Foundation 5 Rahmenlehrgänge

Die Leute bei ieatcss.com Ich habe ein ganzes E-Book geschrieben und alles über Foundation 5 geschrieben. Sie können ihre Anfänger-Tutorials finden Hier. Wenn Sie etwas fortgeschrittener wollen, können Sie ihr Ebook für 29 USD herunterladen.

Warum würdest du das bezahlen? Anstatt zu erklären, wie man das Framework benutzt, erklären sie, wie alles funktioniert. Und ich meine alles, einschließlich der JavaScript-Plugins.

Mastering Foundation Zurb. Tutorials von A bis Z

Das ist ein anderes Satz von Tutorials, gefolgt von einem optionalen E-Book. Diese werden von bereitgestellt Monsterpost, der TemplateMonster Blog.

Die frechen Styles der Foundation werden erklärt

Wenn Sie sich ein etwas fortgeschritteneres, tiefer gehendes Tutorial gewünscht haben, Hier sind Sie ja ! In diesem Post, unsere Freunde bei Tut + Beschreiben Sie detailliert, wie Sie FOundation aus den Sass-Dateien anpassen können.

Wenn Sie noch nie mit Sass-Dateien gearbeitet haben, starten Sie hier.

So erstellen Sie reaktionsfähige Tabellen in Foundation

Zu guter Letzt zeigen uns die brillanten Jungs von Sitepoint, wie man etwas schafft ansprechende Tische . Wohlgemerkt, das ist eine Lösung, die Foundation standardmäßig implementiert. In diesem Lernprogramm erfahren Sie, wie Sie eine bestimmte Komponente von Foundation verwenden und sie in ein anderes Projekt integrieren.

(Wenn Sie neu im Webdesign sind, haben Sie vielleicht schon einmal gehört, dass Tabellen "böse" sind. Wenn Sie sie zum Layout Ihrer Website verwenden, ist das absolut richtig. Manchmal werden Daten jedoch am besten in einem Tabellenformat dargestellt. Es ist also gut zu lernen, Tabellen auf mobilen Geräten lesbar zu machen.)

Gabeln

Gumby - eine Stiftung Gabel

Eine schöne Sache über Open-Source-Frameworks wie Foundation ist, dass ihre Lizenzen Menschen erlauben, sie zu nehmen, sie zu ändern und sogar ihre eigenen zu nennen. Die Designer und Entwickler bei Digitale Chirurgen tat genau das.

Sie behielten die strukturellen Teile von Foundation und enthielten dann einige interessante neue Benutzerschnittstellenkomponenten und jQuery-Plugins. Das Ergebnis wurde benannt Gumby und es ist ein fantastischer Rahmen für sich.

Wo Foundation flexibel gestaltet ist und sowohl Content-getriebene Websites als auch Webanwendungen unterstützt, ist Gumby spezialisierter. Es konzentriert sich auf eines: Content-getriebene 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 eine Gabel oder ein Thema nennen soll. Es ist im Wesentlichen Foundation 5.2.2 mit nur wenigen, kleinen ästhetischen Veränderungen.

Für mich ist es interessant, dass diese Veränderungen dem Trend "Flat Design" auf sehr kleine Art und Weise entgegenwirken. Der Grund dafür scheint zu sein, dass bestimmte Benutzeroberflächenelemente wie Schaltflächen einen subtilen Verweis auf die dritte Dimension beibehalten sollten .

Es ist ein leicht skeuomorphes Design und ich denke, es könnte die Benutzerfreundlichkeit verbessern. Nun, für einige Benutzer sowieso.

Verschiedene Ressourcen und Werkzeuge

Hier sind ein paar interessante stiftungsbezogene Tools und Dinge, die in keine andere Kategorie passen:

Bausteine ​​von ZURB

Das Bausteine sind Codefragmente, die mit und / oder für Foundation erstellt wurden. Dazu gehören neue UI-Komponenten, wiederverwendbare Inhaltslayouts und mehr.

Erhabene Textschnipsel

Erhabener Text ist ein fantastischer Texteditor, der von Programmierern weltweit benutzt wird. Diese Schnipsel (Teile des Codes, die für das einfache Einfügen in eine Datei gedacht sind), sollen Gebäude-Layouts mit Foundation wesentlich schneller machen. Sie sind kompatibel mit beiden Sublime Text 2 & 3.

Experimenteller Gittergenerator

Ist das Standard-Raster mit zwölf Spalten nicht nach Ihrem Geschmack oder nicht richtig für Ihr Projekt? Dann mach einen neuen! Geh einfach dazu Netzgenerator , geben Sie Ihre Werte ein und greifen Sie auf Ihr CSS zu.

Wohlgemerkt, das CSS scheint auf einer älteren Version von Foundation zu basieren, daher müssen Sie es möglicherweise an die neueren Klassennamen und responsiven Klassen anpassen. Dennoch, es macht all die harten Berechnungen für Sie.

Bookmarklets

Bookmarklets sind kleine Tools, die normalerweise mit JavaScript erstellt werden und in Ihre Lesezeichenleiste eingefügt werden können. Sobald Sie sie ausgelöst haben, können sie die aktuelle Seite teilen, nützliche Informationen in einem Overlay anzeigen und viele andere nützliche kleine Dinge.

Das Raster Displayer-Lesezeichen von Antoine Lefeuvre kann verwendet werden, um ein visuelles Raster über der Seite, an der Sie gerade arbeiten, zu überlagern. Das Raster ist anpassbar, Sie können es jedoch einfach auf die Foundation-Standardwerte einstellen.

Das Vertikales Rhythm Grid Bookmarklet von Kevin Altman macht das selbe wie der Grid Displayer. Der Unterschied besteht darin, dass Sie anstelle von vertikalen Linien eine Reihe horizontaler Linien erhalten, mit denen Sie den vertikalen Abstand zwischen Elementen verwalten können.

Das [Responsive Design Bookmarklet] von Victor Coulon lädt die aktuelle Seite, in der Sie sich gerade befinden, in einem Tool neu, mit dem Sie Ihre Entwürfe in verschiedenen Auflösungen schnell in der Vorschau anzeigen können.

Ein Blick auf das, was kommt

Du solltest besser glauben, dass ZURB nicht still sitzt. Zusammen mit all den anderen Sachen, die sie machen, sind sie hart an der Arbeit. Sie haben ein paar coole Sachen kommen, wie:

Grundlage für Apps

ZURB erstellt eine brandneue Version von Foundation, die Foundation 5 nicht ersetzen, sondern mit ihr zusammenarbeiten wird. Es enthält Funktionen speziell für das Entwerfen, Prototyping und Erstellen von Webanwendungen.

Zu den Features gehören ein neues Raster, die Integration mit Angular.js, neue Features, die speziell für das Prototyping entwickelt wurden, und vieles mehr. Um mehr darüber zu erfahren, was sie tun, sehen Sie, was sie für sich selbst sagen müssen: Die nächste Stiftung .

Bewegungs-UI

Technisch gesehen ist Motion UI ein Teil dieser neuen App-zentrierten Version von Foundation, aber ich kann mir vorstellen, dass sie als separate Komponente für den Einsatz überall verfügbar sein wird. (Das ist eine fundierte Schätzung, nichts mehr ...) Was ist das? Es ist eine Animationsbibliothek.

Moderne Apps nutzen häufig Animationen, um nicht nur die Benutzer zu beeindrucken, sondern auch die Benutzerfreundlichkeit zu verbessern. Motion UI wurde entwickelt, um den Aufbau komplexer Schnittstellen zu erleichtern.

Laut den ZURB-Jungs selbst:

Und während ich denke, dass die bewusste, vollständige Beseitigung des Skeuomorphismus von vornherein eine leichte Überreaktion gewesen sein könnte (siehe das, was ich zuvor über "Fast Flat UI" gesagt habe), bin ich froh, dass wir Alternativen finden . Wir brauchen neue Wege, um unseren Nutzern zu erklären, wie sie unsere Produkte optimal nutzen können, und Animation ist eine großartige Möglichkeit, dies zu bewältigen.

Fazit

Foundation ist genau das, was der Name impliziert. Es ist ein Ausgangspunkt, und es ist ein toller dabei. Es ist nicht der einzige großartige Rahmen, aber es ist eine solide Wahl für alle, die schöne Produkte schneller bauen möchten.

Ist es richtig für dich und deine Projekte? Schau rein und finde es heraus.