Die Magie von Zurb Foundation

Sie möchten nicht, dass Ihre Website als Außenseiter behandelt wird. Sie wollen in dieser scharfen, ernsten und extrem wettbewerbsorientierten Welt nicht das hässliche Entlein sein. 

Richtig?

Daher ist eine professionell aussehende Website eine wichtige Plattform für alle Arten von Unternehmen. Es spielt keine Rolle, ob Sie planen, Geld zu verdienen oder nicht, die Behandlung Ihrer Website wie Ihrer Mitarbeiter ist ein Muss.

Warum?

Nun, weil sie einen Eindruck von Ihrem Unternehmen vermittelt, ein Ort, an dem die Leute sehen, wer Sie sind und was Sie wollen. Ob es sich um eine große E-Commerce-Site oder eine One-Pager-Seite handelt - eine gute Website bringt Ihnen und Ihrem Unternehmen immer einen Mehrwert. 

So wichtig die Website für Sie ist, so sehr tragen die Themes zur Benutzerfreundlichkeit und Funktionalität einer bestimmten Website bei.

Ihr Theme ist das gesamte Erscheinungsbild und die Gestaltung Ihrer Website und das allererste, was das Publikum wahrnimmt. Und in diesem Bereich ist Drupal unschlagbar. 

Einführung in das Zurb Foundation 

Hier ist also Zurb Foundation für Sie.

Zurb Foundation ist das Prototyp-Theme, das zum Prototyping im Browser verwendet wird. Es ermöglicht Ihnen, schnell eine Website oder Anwendung zu erstellen und dabei mobile und responsive Technologien zu nutzen, die gut getestet sind. 

Das Front-End-Framework ist die Sammlung von HTML, CSS und Javascript, die Designmuster enthält. Diese Designmuster helfen dem Benutzer, Zeit zu sparen, indem sie ihm helfen, langweiligen, standardmäßigen Code zu vermeiden. Die Seiten, die auf dieser Grundlage aufgebaut sind, funktionieren hervorragend, wenn es mehrere Bildschirme gibt, darunter Laptops, Mobiltelefone, PCs und iPads. Der Grund dafür ist, dass Zurb Foundation ein responsives Framework hat, das CSS-Media-Queries und einen Mobile-First-Ansatz verwendet. 

Verschiedene Versionen von Zurb 
 

Zurb Foundation 3

Wenn das Hauptziel Ihrer Website Rapid Prototyping ist, dann ist Zurb Foundation 3 das Richtige für Sie.  Dieses Theme wurde in Sass entwickelt, einem leistungsstarken CSS-Präprozessor, der Ihnen hilft, sauberes und organisiertes CSS zu schreiben, das im Laufe der Zeit leicht gewartet werden kann. 

Einer der größten Vorteile der Verwendung von Zurb Foundation 3 war die Verlagerung der Entwicklung des Frameworks auf Sass und Compass anstelle von reinem CSS. 

Sass bietet dem Benutzer Variablen, Funktionen und leistungsstarke Mixins, die die Entwicklung des Frameworks beschleunigen und den Code kohärenter machen. 

Zurb Foundation 4 

Diese Version von Zurb Foundation brachte viele neue Funktionalitäten und Änderungen in seinem Framework. Zurb Foundation 4, das als mobilfreundliches Theme begann, unterstützte einige komplexe Layouts, Raster und Media Queries. 

Diese Version brachte flexible und leistungsstarke integrierte Tools mit dem Vorteil, dass sie für verschiedene Bildschirmgrößen zugänglich sind (neue, einfachere Syntax, die besser widerspiegelt, wie das Raster funktioniert).

Abgesehen davon dreht sich bei Zurb Foundation 4 alles um Semantik.  Benutzer erhielten die Möglichkeit, alle präsentationsbezogenen Klassen aus dem Markup mit integrierten Sass-Mixins und -Erweiterungen zu entfernen und zu schreiben. 

Zurb Foundation 4 präsentierte den Benutzern auch einige hervorragende Plugins, die gut mit AJAX funktionierten. 

Zurb Foundation 5

Schnell, stark und eine bessere Grundlage, Zurb Foundation 5 ist ideal für Designer und Entwickler, die es in ihrem Workflow verwenden. Die Foundation konzentrierte sich speziell auf intelligentes Programmieren, das den Benutzern bessere Programmierpraktiken vorstellte. Und wenn es sich um ein Team handelt, dann würde dies ihnen eine Idee geben, von einem gemeinsamen Punkt aus zu starten. Der Vorteil: Es half ihnen, alle Interaktionen und Workflows in kürzerer Zeit zusammenzuführen. 

Zurb Foundation 6

Foundation of Site 6 wurde entwickelt, um den Benutzern Produktionseffizienz in ihren Projekten zu bieten. Es enthält eine breite Palette von modularen und flexiblen Komponenten, die nicht nur leicht, sondern auch einfach zu warten sind. 

Foundation 6 ist auch halb so groß wie Foundation 5, mit anderen Worten, es gab eine Reduzierung von 50 % des Codes. Alle diese Codes werden mit ARIA-Attributen und -Rollen zusammen mit Anweisungen geliefert. 

Der Basisstil in Foundation 6 fungiert als codiertes Framework, was die Arbeit des Benutzers noch einfacher und flexibler macht. Einfachere CSS-Stile ermöglichen es dem Benutzer, sie leicht zu modifizieren und an seine Bedürfnisse anzupassen. 

Zurb Foundation oder Bootstrap?

Wenn man über Zurb und seine verschiedenen Versionen spricht, findet Bootstrap oft seinen Weg dazwischen. 

Wie?

Nun, weil Bootstrap und Zurb die wichtigsten Teilnehmer sind, wenn es um Webdesign-Methoden geht.  Oft scheinen sich Designer und Entwickler im Nebel zu verlieren, während sie kämpfen und zwischen einem wählen. 

	Zurb Foundation	Bootstrap
Community	Die Community ist hier kleiner als bei Bootstrap, wächst aber mit anständigem technischem Support.	Die Community ist hier kleiner als bei Bootstrap, wächst aber mit anständigem technischem Support.
CSS-Präprozessor	Foundation unterstützt SASS	Bootstrap unterstützt auch SASS, ist aber weniger verbreitet.
Anpassung	Minimalistischer Ansatz für seine vorgefertigten UI-Komponenten, der den Designern Raum gibt, neue Dinge zu schaffen.	Bootstrap besteht aus einem einfachen GUI-Customizer, der es den Benutzern meistens nicht erlaubt, etwas Neues zu erstellen.
Browserunterstützung	Unterstützt Chrome, Mozilla Firefox, Safari, Opera, Android	Unterstützt Chrome, Mozilla Firefox, Safari, Opera, Android und IE8
Grid-System	Foundation war das erste, das mobilfreundlich wurde und sich an das Grid-System anpasste.	Bootstrap hatte ausreichend Zeit, die Lücke in Bezug auf Funktionen und Funktionalitäten zu schließen.
Erweiterte Funktionselemente	Zurb Foundation   von X-y Grid, Responsive Tab, Off-Canvas usw.	Es ist mit einer Vielzahl von Designs anpassbar.
Releases	Zurb hat mehr Releases in Bezug auf die Entwicklungsanforderungen. Es hat 6 Releases und der 7. steht noch aus.	Bootstrap hat 4 Releases. Der  4.  Release war am 19. August 2011

Warum Drupal für Zurb Foundation wählen?

Was ist das allererste, was der Benutzer beim Aufbau einer Website sieht?

Inhalt? Funktionalitäten? Informationen? Oder Layout?

Die Auswahl des Themes und der Funktionalitäten einer Website ist eine der wichtigsten Entscheidungen, die ein Website-Besitzer treffen muss, und Drupal ist das CMS, das Ihnen helfen kann, diese Aufgabe zu erfüllen. Es hat etwa 1.316 Themes, von denen jedes eine Vielzahl von Stärken hat

Von denen das Zurb Foundation Theme ein Grid-basiertes, Mobile-First-CSS ist. In Kombination mit Drupal bietet Zurb dem Front-End-Entwickler Effizienz. Es ist eine plattformspezifische Methode, die Ihnen hilft, verschiedene Funktionalitäten zu erreichen. 

• Das Foundation XY Grid (im zeitlosen Zustand) ermöglicht es dem Benutzer, Drupal-Inhalte einfach zu erstellen und zu layouten.
• Die obere Leiste der Foundation ist mit der Menünavigation von Drupal kombiniert und funktioniert gut mit Untermenüs.
• Die Off-Campus-Region in der Zurb Foundation ist als Drupal-Blöcke verfügbar und die Menüleiste, die in dieser Region platziert ist, wird automatisch thematisiert. 

Erstellen von Sub-Themes 

Es ist unerlässlich, dass der Benutzer Sub-Themes erstellt, die es Zurb Foundation ermöglichen, auf jede Website angewendet zu werden. 

Es gibt zwei Möglichkeiten, ein Sub-Theme zu erstellen:

Drush: Drush ist im Grunde ein Befehlszeilenzugriff auf gängige Drupal-Verwaltungsaufgaben und -Konfigurationen. Der Benutzer kann das Verzeichnis mit Hilfe von Drush ändern.  

Manuell: Der Benutzer kann auch Sub-Themes manuell erstellen. Sie können die Aufgabe erledigen, indem sie den Theme-Ordner erweitern und ihn dann durch Starterdateien ersetzen. 

Beigesteuerte Drupal-Module, die mit Zurb verwendet werden können

Das Ziel von Zurb Foundation ist es, Theming ohne die Hilfe von Abhängigkeiten zu betreiben, aber es gibt viele Module, die helfen, das Theming zu verbessern. 

Module wie Panels, Block Class, Display Suite, Special Menu Items. 

Panels: Das Panels-Modul ermöglicht es einem Site-Administrator, benutzerdefinierte Layouts für einen oder mehrere Benutzer zu erstellen. Es bietet eine API, die die Konfiguration und Platzierung von
Blöcken in Regionen ermöglicht. 

Block Class: Block Class ermöglicht es dem Benutzer, Klassen zu jedem Block über die Konfigurationsoberfläche des Blocks hinzuzufügen. 

Display Suite: Display Suite ermöglicht es den Benutzern, die Kontrolle über Inhalte vollständig über eine Drag-and-Drop-Oberfläche zu übernehmen. 

Menu Items: Dieses Modul ermöglicht es dem Benutzer, Dropdown-Trennzeichen und alle Arten von Headern im Navigationsmenü zu erstellen. 

Fallstudie über MIT Press CogNet 

MIT Press CogNet ist eine wichtige Online-Ressource für alle Studenten und Wissenschaftler, die sich mit Kognitionswissenschaften beschäftigen. 

Das Ziel dieses Projekts war es, den Benutzern ein vollständig responsives Design auf allen Geräten zu bieten. Eine Organisation arbeitete eng mit dem CogNet-Team zusammen. Zusammen mit dem CogNet-Team entwickelten sie ein einfaches Wireframe. Es wurde ein benutzerdefiniertes Drupal-Theme basierend auf der Zurb Foundation erstellt.

Das Zurb Foundation Theme und Sass für die CSS-Vorverarbeitung wurden verwendet, um das bereits vorhandene Theme zu überarbeiten. Um eine nahtlose Erfahrung auf jeder Art von Bildschirm zu gewährleisten, verwendeten die Entwickler jQuery, um eine elegante Navigation, ein elegantes Scrollen und eine elegante Inhaltserkundung zu erstellen. 

Die Ergebnisse waren auffällig. Von einer reinen Desktop-Website wurde MIT Press CogNet in eine zugängliche Website umgewandelt, auf der die Benutzer sie auf jedem Gerät anzeigen konnten. Die größte Errungenschaft des gesamten Verfahrens war, dass es im Rahmen des von der Organisation bereitgestellten Budgets durchgeführt wurde.  

Zukunft von Zurb Foundation

Zurb wird noch eine weitere Version der Architektur (ITCSS+SMACSS) veröffentlichen. 

Zurb Foundation 7 trennt die Ansichtsebene von der Logikebene, um sie einfach und zuverlässig zu machen. 

Es würde Ihre Freiheit, zwischen JavaScript-Frameworks zu wechseln, mit einer superleistungsstarken, steckbaren JavaScript-Architektur drastisch verbessern. Kurz gesagt, es gibt zwei wichtige Änderungen, die in Zurb Foundation 7 stattfinden würden 

Die erste, wie bereits erwähnt, würde es dem Benutzer drastisch ermöglichen, mit der JavaScript-Architektur zwischen JavaScript-Frameworks zu wechseln. UI-Frameworks neigen heutzutage entweder dazu, in ein Framework zu gehen oder verschiedene und unabhängige Ports für verschiedene JS-Frameworks zu haben.

Und ja, die zweite große Änderung in der Foundation ist die ITCSS-basierte Architektur mit der Verwendung von SMACSS. Dies würde es einfacher machen, skalierbare Sites und Themes zu erstellen und zu pflegen. 

Fazit 

Denken Sie daran, dass Themes mit der inneren Reise des Protagonisten verbunden sind. Es sind nicht nur die visuellen Elemente, sondern auch die Reise der Benutzererfahrung, die sie beim Durchlaufen Ihrer Website haben würden.

Bei OpenSense Labs verstehen wir, wie wichtig es ist, eine Website zu erstellen, die Ihren Zielen und Vorgaben entspricht. Schreiben Sie uns an [email protected], damit wir Dienstleistungen arrangieren können, um Ihre Website zu dem zu machen, was Sie sich immer erhofft haben.