Bevor es Twitter Bootstrap gab, gab und gibt es ZURB Foundation, ein Framework, mit dem Sie mit ein paar gut platzierten CSS-Klassen hübsche Schaltflächen, Blockraster, Fortschrittsbalken, Preistabellen und vieles mehr hinzufügen können. Mit dem ZURB Foundation-Theme für Drupal können Sie all diese Dinge auf Ihrer Drupal-Site mit tödlicher Leichtigkeit entfesseln.
Was ist das ZURB Foundation Framework?
Das ZURB Foundation-Framework ist eine Sammlung von CSS- und Javascript-Code für eine Reihe von Dingen, die Sie wahrscheinlich auf Ihrer Website haben möchten. Dazu gehören nicht nur anklickbare Augensüßigkeiten wie die oben genannten Tasten, sondern auch eine wirklich erstaunliche Reaktionsfähigkeit.
Sie verwenden die meisten dieser Funktionen, indem Sie spezielle CSS-Klassen hinzufügen. Zum Beispiel:
Hier ist ein .
Und hier ist ein winziger Knopf.
Das ZURB Foundation Framework ist völlig unabhängig von Drupal. Die Leute verwenden es auf WordPress, Joomla und sogar auf statischen HTML-Websites.
Was ist das ZURB Foundation Drupal Theme?
Die Drupal ZURB Foundation Thema ermöglicht es Ihnen, all diese ZURBish-Leistung zu entfesseln, indem Sie einfach ein Thema herunterladen und aktivieren (und die Dokumentation lesen und natürlich einige zusätzliche Schritte ausführen).
Die ZURB Foundation basiert beispielsweise auf der jQuery-Javascript-Bibliothek. Daher müssen Sie wahrscheinlich jQuery Update installieren. Prüfen Sie, ob Sie andere Module verwenden, die jQuery verwenden. Wenn Sie eine neue Version von jQuery verwenden, funktionieren diese Module möglicherweise nicht mehr.
Möglicherweise möchten Sie dieses Thema auch als Basisdesign für Ihr eigenes benutzerdefiniertes Design verwenden. Angepasst wird die ZURB Foundation wirklich.
Benötigen Sie dieses Thema, um die ZURB Foundation in Drupal zu verwenden?
Du nicht brauchen Dieses Thema verwendet das ZURB Foundation Framework. Im einfachsten Fall fügt dieses Thema Ihrer Website lediglich ZURB Foundation CSS und Javascript hinzu. Sie können dies auch manuell tun.
Dieses Thema macht das jedoch einfacher und beinhaltet auch eine weitere Integration mit Drupal.
Außerdem können Sie kleinere zusätzliche Module für die weitere Integration hinzufügen. Mit dem ZURB Orbit-Modul können Sie beispielsweise eine Orbit-Diashow mit Bildfeldern erstellen. Mit dem ZURB Clearing-Modul können Sie responsive Leuchtkästen mit Medienbildern erstellen.
Hinweis: Ich habe diese winzigen Module noch nicht selbst verwendet, daher sind sie möglicherweise mit Gefahren behaftet. Zum Zeitpunkt dieses Schreibens erfordert ZURB Clearing
Media-2.x-dev, was ein gefährliches Upgrade sein könnte, wenn Sie gerade Media 1.x verwenden. Und eine Anforderung an eine Entwicklungsversion eines Moduls sollte immer eine Pause geben. Diese und andere ZURB-Module sind jedoch einen Blick wert.
Wählen Sie aus, welche Version von ZURB Foundation verwendet werden soll
Bevor Sie das ZURB Foundation-Theme herunterladen, prüfen Sie, welche Version Sie verwenden sollten. Es gibt verschiedene Hauptversionen des ZURB Foundation Frameworks, und die Hauptversionsnummer des Themas entspricht dem Framework, mit dem es arbeitet. Also die
7.x-3.x Versionen des Themas arbeiten mit Foundation 3, das
7.x-4.x Versionen arbeiten mit Foundation 4, und das
7.x-5.x Versionen arbeiten mit Foundation 5.
Zum jetzigen Zeitpunkt ist die neueste stabile Version des Themes 7.x-4.x, die mit Foundation 4 zusammenarbeitet. Die 7.x-5.x-Version befindet sich noch in der Entwicklung. Obwohl auf der Foundation Framework-Website davon ausgegangen wird, dass Sie Foundation 5 verwenden, sollten Sie sich zunächst für Foundation 4 entscheiden.
Beachten Sie auch, dass für Foundation 5 zusätzliche Anforderungen gelten, insbesondere jQuery
1.10. Foundation 4 benötigt nur jQuery
1.7+.
Beachten Sie, welche Version von Foundation Sie verwenden, wenn Sie die Online-Dokumentation lesen. Dies gilt insbesondere, wenn Sie nicht die neueste Version des Frameworks verwenden. Es ist verhängnisvoll, die Dokumentation für Foundation 5 zu lesen und frustriert zu werden, wenn eine neue Funktion auf Ihrer Foundation 4-Site nicht funktioniert.
Zum Beispiel enthält Foundation 5 eine ganze Reihe von
Mittel Klassen für mittlere Bildschirme. In Foundation 4 werden diese auf mysteriöse Weise fehlschlagen, wenn Sie keine zusätzlichen Schritte unternehmen.
Verwenden Sie SASS, Compass und "_variables.scss"!
Wenn Sie das CSS für dieses Thema optimieren möchten, stellen Sie Folgendes sicher:
- Verwenden Sie das ZURB Foundation-Design als Basisdesign für Ihr eigenes benutzerdefiniertes Unterthema
- Erzeugen Sie dieses Unterthema mit der
Saufen Befehl vom Theme bereitgestellt. So was:
drush fst deinen_theme_name
- Lesen Sie das Ausgezeichnete gemütlich durch
_variables.scss Datei
Das
_variables.scss Datei wird automatisch von erstellt
drush fst. Diese einzelne Datei enthält fast alle Variablen etwas Möglicherweise möchten Sie in Ihrem CSS-Design optimieren. Es ist wunderbar! Alles an einem Ort können Sie alles von der Standardschriftart über die Bildschirmbreite bis zum Rand der Breadcrumbs einstellen.
Natürlich können Sie auch zusätzliche Dateien einrichten. Aber
_variables.scss ist ein großartiger Ort, um zu beginnen.
Beachten Sie die Dateierweiterung:
scssnicht
css. Benutzen
_variables.scss, Sie müssen SASS (eine CSS-Erweiterungssprache) und Compass (ein mit SASS erstelltes Framework) einrichten. Wenn du rennst
Kompass kompilieren, Ihre
scss Dateien werden in separaten Dateien in schönes CSS umgewandelt. (Ich bevorzuge
Kompassuhr - Dies läuft weiter und aktualisiert das CSS, während Sie das optimieren
scss Dateien.)
Wenn Sie sich wirklich nicht mit SASS beschäftigen möchten, können Sie wie gewohnt CSS-Dateien schreiben und diese in Ihrem Theme auflisten
.Info Datei. Aber glauben Sie mir - die winzige Zeitinvestition, um genug zu lernen, um sie zu kompilieren
_variables.scss wird fast sofort zurückgezahlt.
Bevor Sie die ZURB Foundation verwenden
Die ZURB Foundation ist hervorragend, aber nicht das einzige Frontend-Framework, das in Drupal integriert wurde. Vielleicht möchten Sie Bootstrap betrachten, ein ähnliches Framework, das auch ein Drupal-Design hat. Zur Zeit verwende ich die ZURB Foundation selbst. Dies ist jedoch darauf zurückzuführen, dass meine Recherche ergab, dass sie einfacher anzupassen ist als Bootstrap.
Die Joyride-Komponente ist auch ziemlich süß.
Unabhängig davon, ob Sie ZURB Foundation, Bootstrap oder ein anderes Framework verwenden, sollten Sie diese Tipps zur Verwendung eines Frameworks mit Drupal erhalten.
