Foundation - Kurzanleitung

Was ist Stiftung?

Foundation ist eines der fortschrittlichen Front-End-Frameworks für die Gestaltung schöner, reaktionsschneller Websites. Es funktioniert auf allen Arten von Geräten und bietet Ihnen HTML-, CSS- und JavaScript-Plugins.

Die Gründung begann als interner Styleguide, der 2008 von ZURB erstellt wurde. ZURB ist ein Produktdesignunternehmen in Campbell, Kalifornien. Foundation 2.0 wurde im Oktober 2011 als Open Source veröffentlicht. Die neueste Version von Foundation ist 6.1.1 und wurde im Dezember 2015 veröffentlicht.

Warum Foundation verwenden?

• Es bietet eine schnellere Entwicklung durch Verwendung des Sass-Compilers, der viel schneller als der Standard-Compiler arbeitet.

• Es bereichert Ihre Website mit Preistabellen, Schaltern, Joyride, Range Slidern, Lightbox und vielem mehr.

• Es wird mit einem Entwicklungspaket wie Grunt und Libsass für eine schnellere Codierung und Steuerung geliefert.

• Foundation for Sites bietet Ihnen HTML, CSS und JS, um schnell Websites zu erstellen.

• Das E-Mail-Framework bietet Ihnen reaktionsschnelle HTML-E-Mails, die auf jedem Gerät gelesen werden können.

• Mit Foundation for Apps können Sie vollständig reaktionsschnelle Web-Apps erstellen.

Eigenschaften

• Es verfügt über ein leistungsstarkes Grid-System und einige nützliche UI-Komponenten sowie coole JavaScript-Plugins.

• Es bietet ein ansprechendes Design, das alle Arten von Geräten bedient.

• Es ist für mobile Geräte optimiert und unterstützt den Mobile First Approach.

• Es bietet HTML-Vorlagen, die anpassbar und erweiterbar sind.

Vorteile

• Es ist leicht zu erlernen, sobald Sie das grundlegende Verständnis von HTML und CSS haben.

• Sie können Foundation frei verwenden, da es sich um Open Source handelt.

• Es bietet Ihnen eine Reihe von Vorlagen, mit denen Sie sofort mit der Entwicklung der Website beginnen können.

• Foundation unterstützt Präprozessoren wie SASS und Compass, was die Entwicklung beschleunigt.

Nachteile

• Aufgrund der Beliebtheit von Twitter Bootstrap ist die Community-Unterstützung für Twitter Bootstrap besser als für Foundation.

• Es kann einige Zeit dauern, bis Anfänger die Präprozessorunterstützung gelernt und genutzt haben.

• Mangel an umfassenderer Unterstützung wie QS-Websites und Foren zur Behebung von Problemen.

• Foundation hat weniger Themen als andere.

In diesem Kapitel wird erläutert, wie Foundation auf der Website installiert und verwendet wird.

Laden Sie die Stiftung herunter

Wenn Sie den Link Foundation.zurb.com öffnen , sehen Sie einen Bildschirm wie unten gezeigt -

Drücke den Download Foundation 6 Klicken Sie auf die Schaltfläche, um zu einer anderen Seite weitergeleitet zu werden.

Hier sehen Sie vier Schaltflächen -

• Download Everything - Sie können diese Version von Foundation herunterladen, wenn Sie alles im Framework haben möchten, dh Vanilla CSS und JS.

• Download Essentials - Es wird die einfache Version heruntergeladen, die das Raster, die Schaltflächen, die Typografie usw. enthält.

• Custom Download - Dadurch wird die benutzerdefinierte Bibliothek für Foundation heruntergeladen. Sie enthält Elemente und definiert die Größe der Spalten, die Schriftgröße, die Farbe usw.

• Install via SCSS - Dadurch werden Sie zur Dokumentationsseite weitergeleitet, auf der Foundation for Sites installiert wird.

Sie können auf klicken Download EverythingSchaltfläche, um alles in das Framework zu bekommen, dh CSS und JS. Da die Dateien alle Elemente des Frameworks enthalten, müssen Sie nicht jedes Mal separate Dateien für einzelne Funktionen einfügen. Zum Zeitpunkt des Schreibens dieses Tutorials wurde die neueste Version (Foundation 6) heruntergeladen.

Dateistruktur

Nachdem Foundation heruntergeladen wurde, extrahieren Sie die ZIP-Datei und Sie sehen die folgende Datei- / Verzeichnisstruktur:

Wie Sie sehen können, gibt es kompiliertes CSS und JS (Foundation. *) Sowie kompiliertes und minimiertes CSS und JS (Foundation.min. *).

In diesem Tutorial verwenden wir die CDN-Versionen der Bibliothek.

HTML-Vorlage

Eine grundlegende HTML-Vorlage mit Foundation ist wie folgt:

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

In den folgenden Abschnitten wird der obige Code ausführlich beschrieben.

HTML5-Doctype

Foundation besteht aus bestimmten HTML-Elementen und CSS-Eigenschaften, für die der HTML5-Doctype erforderlich ist. Daher sollte der folgende Code für den HTML5-Doctype zu Beginn aller Ihrer Projekte mit Foundation enthalten sein.

<!DOCTYPE html>
<html>
   ....
</html>

Zuerst mobil

Es hilft, auf mobile Geräte zu reagieren. Sie müssen das einschließenviewport meta tag auf das <head> -Element, um ein korrektes Rendern und Zoomen auf Mobilgeräten sicherzustellen.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

• Die Eigenschaft width steuert die Breite des Geräts. Wenn Sie die Gerätebreite einstellen, wird sichergestellt, dass sie auf verschiedenen Geräten (Handys, Desktops, Tablets ...) ordnungsgemäß gerendert wird.

• initial-scale = 1.0 stellt sicher, dass Ihre Webseite beim Laden im Maßstab 1: 1 gerendert wird und kein sofortiges Zoomen angewendet wird.

Initialisierung von Komponenten

Das jQuery-Skript wird in Foundation für Komponenten wie Modal und Dropdown benötigt.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

• Speichern Sie den oben angegebenen HTML-Code firstexample.html Datei.

• Öffnen Sie diese HTML-Datei in einem Browser. Eine Ausgabe wird wie unten gezeigt angezeigt.

Sie können mit Ihrer Projektentwicklung mit einigen verfügbaren Vorlagen beginnen, die über Yeti Launch oder installiert werden könnenFoundation CLI. Sie können mit dem neuen Projekt beginnen, indem Sie diese Vorlagen verwenden, indem Sie das Gulp- Build-System für die Verarbeitung von Sass, JavaScript, das Kopieren von Dateien usw. verwenden.

Grundvorlage

Die Basisvorlage ist so etwas wie eine SASS-Vorlage, die die flache Verzeichnisstruktur enthält und nur SASS-Dateien kompiliert. Es ist gut, diese einfache Vorlage zu haben, wenn Sie nur SASS verwenden. Sie können die Basisvorlage mithilfe von Yeti Launch oder Foundation CLI mit dem folgenden Befehl verwenden:

$ foundation new --framework sites --template basic

Um dies einzurichten, führen Sie zuerst die npm-Installation und die Bower-Installation aus und verwenden Sie den Befehl npm start , um sie auszuführen. Sie können die Vorlagendateien auch vom Github herunterladen .

ZURB-Vorlage

Es ist eine Kombination aus CSS / SCSS, JavaScript, Lenkervorlage, Markup-Struktur, Bildkomprimierung und verwendet die SASS-Verarbeitung. Sie können die ZURB-Vorlage mithilfe von Yeti Launch oder Foundation CLI mit dem folgenden Befehl verwenden:

$ foundation new --framework sites --template zurb

Befolgen Sie zum Ausführen dieser Vorlage die gleichen Schritte wie in der Basisvorlage angegeben. Sie können die Vorlagendateien auch vom Github herunterladen .

Kopieren von Assets

Sie können den Inhalt mit Gulp in den Ordner src / assets kopieren, in dem Assets Ihr Projektordner sein wird. Wichtig hierbei ist, dass die SASS-Dateien, JavaScript-Dateien und Bilder nicht unter diesen Vorgang zum Kopieren von Assets fallen, da sie über einen eigenen Prozess zum Kopieren des Inhalts verfügen.

Seitenzusammenstellung

Sie können HTML-Seiten unter drei Ordnern erstellen , nämlich Seiten , Layouts und Partials, die sich im Verzeichnis src / befinden . Sie können den Panini -Flatfile-Compiler verwenden, der Layouts für Seiten mithilfe von Vorlagen, Seiten und HTML-Partials erstellt. Dieser Vorgang kann mithilfe der Vorlagen-Sprache für Lenker durchgeführt werden.

SASS-Zusammenstellung

Sie können den SASS mit Libsass zu CSS kompilieren. Die Haupt-SASS-Datei wird unter src / assets / scss / app.scss gespeichert, und auch neu erstellte SASS-Partials werden unter diesem Ordner selbst gespeichert. Die Ausgabe von CSS erfolgt wie normales CSS im verschachtelten Stil. Sie können das CSS mit clean-css komprimieren und das nicht verwendete CSS mit UnCSS aus dem Stylesheet entfernen .

JavaScript-Kompilierung

Die JavaScript-Dateien werden zusammen mit Foundation im Ordner src / assets / js gespeichert, und alle Abhängigkeiten werden in der Datei app.js verknüpft . Die Dateien werden wie in der folgenden Reihenfolge angegeben zusammengebunden -

• Abhängigkeiten der Stiftung.
• Dateien werden im Ordner src / assets / js gespeichert .
• Die Dateien werden in einer Datei namens app.js gebündelt .

Bildkompression

Standardmäßig werden alle Bilder im Ordner Assets / IMG unter dem Ordner dist gespeichert . Sie können die Bilder beim Erstellen für die Produktion mit gulp-imagemin komprimieren, das JPEG-, PNG-, SVG- und GIF-Dateien unterstützt.

BrowserSync

Sie können einen BrowserSync- Server erstellen, auf dem synchronisierte Browsertests verfügbar sindhttp://localhost:8000und in der Lage, die kompilierten Vorlagen unter Verwendung dieser URL zu sehen. Während Ihr Server ausgeführt wird, wird die Seite automatisch aktualisiert, wenn Sie die Datei speichern, und Sie können die an der Seite vorgenommenen Änderungen in Echtzeit sehen, während Sie arbeiten.

Beschreibung

Es enthält die Foundation-Elemente, um reibungslos mit den Webanwendungen arbeiten zu können. In der folgenden Tabelle sind einige der Foundation-Komponenten aufgeführt:

In diesem Kapitel werden wir uns mit globalen Stilen befassen . Das globale CSS of Foundation-Framework enthält nützliche Resets, die sicherstellen, dass das Styling in allen Browsern konsistent ist.

Schriftgröße

Die Schriftgröße des Browser-Stylesheets ist standardmäßig auf 100% eingestellt. Die Standardschriftgröße ist auf 16 Pixel eingestellt. Abhängig von der Schriftgröße wird die Rastergröße berechnet. Setzen Sie $ rem-base auf den Wert $ global-font-size , der in Pixel angegeben werden muss, um eine eindeutige Basisschriftgröße und nicht betroffene Raster-Haltepunkte zu erhalten.

Farben

Interaktive Elemente wie Links und Schaltflächen verwenden den Standard-Blauton, der von der SASS-Variablen $ Primärfarbe stammt . Komponenten können auch Farben haben wie: sekundär, Alarm, Erfolg und Warnung . Weitere Informationen finden Sie hier .

SASS-Referenz

Variablen

In der folgenden Tabelle sind die SASS-Variablen aufgeführt, mit denen die Standardstile von Komponenten in Ihrem Projekt _settings.scss angepasst werden .

SASS hilft dabei, den Code in Foundation flexibler und anpassbarer zu machen.

Kompatibilität

Um die SASS-basierte Version für Foundation zu installieren, sollte Ruby unter Windows installiert werden. Foundation kann mit Ruby SASS und libsass kompiliert werden. Wir empfehlennode-sass 3.4.2+ Version zum Kompilieren von SASS.

Autoprefixer erforderlich

Autoprefixer verarbeitet SASS-Dateien. gulp-autoprefixer wird verwendet, um den Prozess zu erstellen. Die folgende Autoprefixer-Einstellung wird verwendet, um eine ordnungsgemäße Browserunterstützung zu erhalten.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

Laden des Frameworks

Wir können die Framework-Dateien mit NPM installieren. Über die Befehlszeilenschnittstelle (CLI) können wir die Sass-Dateien kompilieren. Es folgt der Befehl zum Laden des Frameworks:

npm install foundation-sites --save

Nachdem Sie den obigen Befehlszeilencode ausgeführt haben, erhalten Sie die folgenden Zeilen:

Manuelles Kompilieren

Framework-Dateien können abhängig von Ihrem Erstellungsprozess als Importpfad hinzugefügt werden . Der Pfad ist jedoch derselbe Paketordner / Foundation-Sites / scss . Die @ import- Anweisung befindet sich oben in der Datei foundation-sites.scss . Die nächste Zeile im angegebenen Code wird in derAdjusting CSS Output Sektion.

@import 'foundation';
@include foundation-everything;

Kompiliertes CSS verwenden

Sie können die vorkompilierten CSS-Dateien einschließen. Es gibt zwei Arten von CSS-Dateien, nämlich minimiert und nicht minimiert. Die minimierte Version wird für die Produktion verwendet und die nicht minimierte Version wird verwendet, um das Framework-CSS direkt zu bearbeiten.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

Anpassen der CSS-Ausgabe

Für verschiedene Komponenten besteht die Foundation-Ausgabe aus vielen Klassen. Es wird verwendet, um die CSS-Ausgabe des Frameworks zu steuern. Fügen Sie die folgende einzelne Codezeile hinzu, um alle Komponenten gleichzeitig einzuschließen.

@include foundation-everything;

Das Folgende ist die Liste der Komponenten, die importiert wurden, wenn Sie den obigen Code in Ihre scss-Datei schreiben. Die nicht benötigten Komponenten können kommentiert werden. Sie können die unten angegebenen Codezeilen in der Datei Ihr_Ordnername / Knotenmodule / Foundation-Sites / scss / Foundation.scss anzeigen .

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

Die Einstellungsdatei

Eine Einstellungsdatei ist im gesamten Foundation-Projekt enthalten, dh _settings.scss . Wenn Sie Yeti Launch oder die CLI zum Erstellen eines Foundation for Sites-Projekts verwenden, finden Sie die Einstellungsdatei unter src / assets / scss /.

Wir haben Foundation mit npm installiert. Daher finden Sie die Einstellungsdatei unter Ihrem Ordnernamen / Knotenmodulen / Foundation-Sites / scss / settings / _settings.scss . Sie können dies in Ihre eigenen Sass-Dateien verschieben, um damit zu arbeiten.

Sie können Ihr eigenes CSS schreiben, wenn Sie nicht in der Lage sind, Variablen anzupassen. Im Folgenden finden Sie eine Reihe von Variablen, die das Standard-Styling von Schaltflächen ändern.

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

In diesem Kapitel werden wir uns mit JavaScript befassen . Es ist einfach, JavaScript in Foundation einzurichten. Sie benötigen lediglich jQuery.

JavaScript-Installation

Sie können ZIP-Download, Paketmanager oder CDN verwenden, um die Foundation-JavaScript-Datei abzurufen. In Ihrem Code können Sie Links zu jQuery und Foundation als <script> -Tags vor dem schließenden <body> bereitstellen und überprüfen, ob Foundation nach jQuery geladen wurde. Für weitere Informationen klicken Sie hier .

Dateistruktur

Wenn Sie Foundation über die Befehlszeile installieren, werden Foundation-Plugins als einzelne Dateien wie Foundation.tabs.js , Foundation.dropdownMenu.js , Foundation.slider.js usw. heruntergeladen . Alle diese Dateien werden zu Foundation.js kombiniert , die alle Plugins gleichzeitig bereitstellt. Wenn Sie ein Plugin verwenden möchten, sollte zuerst fundamental.core.js geladen werden.

Zum Beispiel -

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

Für bestimmte Plugins sind möglicherweise bestimmte Dienstprogrammbibliotheken erforderlich, die mit der Foundation-Installation geliefert werden. Weitere Informationen zu bestimmten Plugin-Anforderungen finden Sie im nächsten Kapitel der JavaScript-Dienstprogramme .

Durch das Laden einzelner Dateien entsteht ein Netzwerk-Overhead, insbesondere für mobile Benutzer. Für ein schnelleres Laden der Seite wird die Verwendung von Grunzen oder Schlucken empfohlen.

Initialisieren

Mit der Funktion foundation () werden alle Foundation-Plugins gleichzeitig initialisiert.

Zum Beispiel -

(document).foundation();

Plugins verwenden

Mithilfe von Datenattributen werden Plugins mit HTML-Elementen verbunden, da sie mit dem Namen der Plugins übereinstimmen. Ein einzelnes HTML-Element kann jeweils nur ein Plugin enthalten, obwohl die meisten Plugins in anderen Plugins verschachtelt sein können. Beispielsweise wird ein Tooltip-Link durch Hinzufügen eines Daten-Tooltips erstellt . Für weitere Informationen klicken Sie hier .

Plugins konfigurieren

Plugins können mithilfe der Konfigurationseinstellungen angepasst werden. Sie können beispielsweise die Geschwindigkeit der Akkordeonrutschen nach oben und unten einstellen . Die Plugin-Einstellungen können mithilfe der Plugins global geändert werdenDEFAULTSEigentum. Für weitere Informationen klicken Sie hier .

Hinzufügen von Plugins nach dem Laden der Seite

Wenn dem DOM neues HTML hinzugefügt wird, werden die Plugins für diese Elemente standardmäßig nicht initialisiert. Sie können nach neuen Plugins suchen, indem Sie die Funktion .foundation () erneut aufrufen .

Zum Beispiel -

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

Programmatische Verwendung

In JavaScript können Plugins programmgesteuert erstellt werden. Jedes Plugin ist eine globale Foundation- Objektklasse mit einem Konstruktor, der zwei Parameter wie ein Element und ein Objekt verwendet.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

Die meisten Plugins sind mit einer öffentlichen API ausgestattet, mit der Sie sie über JavaScript bearbeiten können. Sie können die Dokumentationen des Plugins durchsehen, um die verfügbaren Funktionen zu studieren, und Methoden können einfach aufgerufen werden.

Zum Beispiel -

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.

• Sie können einen beliebigen jQuery-Selektor auswählen. Wenn der Selektor mehrere Plugins enthält, wird für alle die gleiche Methode ausgewählt.

• Argumente können genauso übergeben werden wie Argumente an JavaScript.

• Methoden, denen ein Unterstrich (_) vorangestellt ist, werden als Teil der internen API betrachtet, dh sie können ohne Vorwarnung brechen, sich ändern oder sogar verschwinden.

Veranstaltungen

Immer wenn eine bestimmte Funktion beendet ist, löst DOM ein Ereignis aus. Wenn beispielsweise Registerkarten geändert werden, können sie abgehört und eine Rückantwort darauf erstellt werden. Jedes Plugin kann eine Liste von Ereignissen auslösen, die in der Dokumentation des Plugins dokumentiert werden. In Foundation 6 werden Callback-Plugins entfernt und müssen als Ereignis-Listener verwendet werden.

Zum Beispiel -

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation enthält JavaScript-Dienstprogramme, mit denen allgemeine Funktionen hinzugefügt werden. Es ist sehr hilfreich und einfach zu bedienen. Diese JavaScript-Dienstprogrammbibliothek befindet sich im Ordner Ihr_Ordnername / Knotenmodule / Foundation-Sites / js

Box

• Die Foundation.Box- Bibliothek besteht aus mehreren Methoden.

• Das js/foundation.util.box.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.

• An beide Methoden können entweder jQuery-Objekte oder einfache JavaScript-Elemente übergeben werden.

var dims = Foundation.Box.GetDimensions(element);

Das zurückgegebene Objekt gibt die Dimension des Elements als - an

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}

• Funktion ImNotTouchingYou ist enthalten.

• Basierend auf dem übergebenen Element wird ein boolescher Wert zurückgegeben, der entweder einen Konflikt mit dem Rand des Fensters oder ein optionales oder ein übergeordnetes Element darstellt.

• Die beiden in der unten angegebenen Zeile angegebenen Optionen, dh leftAndRightOnly, topAndBottomOnly, werden verwendet, um die Kollision nur auf einer Achse zu identifizieren.

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

Tastatur

• In Foundation.Keyboard gibt es viele Methoden , die die Interaktion mit Tastaturereignissen vereinfachen.

• Das js/foundation.util.keyboard.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.

• Das Objekt Foundation.Keyboard.keys besteht aus Schlüssel / Wert-Paaren, die im Framework häufiger verwendet werden.

• Immer wenn die Taste gedrückt wird, wird Foundation.Keyboard.parseKey aufgerufen, um eine Zeichenfolge abzurufen. Dies hilft bei der Verwaltung Ihrer eigenen Tastatureingaben.

Der folgende Code wird verwendet, um alle fokussierbaren Elemente innerhalb des angegebenen $ -Elements zu finden . Daher müssen Sie keine Funktion und keinen Selektor von Ihnen schreiben.

var focusable = Foundation.Keyboard.findFocusable($('#content'));

• Die handleKey- Funktion ist eine Hauptfunktion dieser Bibliothek.

• Diese Methode wird verwendet, um das Tastaturereignis zu behandeln. Es kann immer dann aufgerufen werden, wenn ein Plugin beim Dienstprogramm registriert ist.

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Die Foundation.Keyboard.register- Funktion kann aufgerufen werden, wenn Sie Ihre eigenen Tastenkombinationen verwenden möchten.

MediaQuery

• Die MediaQuery- Bibliothek ist das Rückgrat aller responsiven CSS-Techniken.

• Das js/foundation.util.mediaQuery.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.

• Mit Foundation.MediaQuery.atLeast ('groß') wird überprüft, ob der Bildschirm mindestens so breit wie ein Haltepunkt ist.

• Das Foundation.MediaQuery.get ('Medium') ruft die Medienabfrage eines Haltepunkts ab.

• Die Foundation.MediaQuery.queries sind eine Reihe von Medienabfragen, die Foundation für Haltepunkte verwendet.

• Die Foundation.MediaQuery.current ist eine Zeichenfolge mit der aktuellen Haltepunktgröße.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

Der folgende Code überträgt die Änderung der Medienabfrage im Fenster.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

Motion & Move

• Foundation.Motion- Javascript ähnelt der Motion UI-Bibliothek, die in Foundation 6 enthalten ist. Es wird zum Erstellen benutzerdefinierter CSS-Übergänge und -Animationen verwendet.

• Das js/foundation.util.motion.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.

• Foundation.Move wird verwendet, um CSS3-gestützte Animationen einfach und elegant zu gestalten.

• requestAnimationFrame();Methode weist den Browser an, eine Animation durchzuführen; Es fordert Sie auf, Ihre Animationsfunktion aufzurufen, bevor der Browser das nächste Repaint ausführt.

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

Wenn die Animation abgeschlossen ist, finished.zf.animate gebrannt.

Timer & Bilder geladen

Orbit verwendet sowohl den Funktionstimer als auch das geladene Bild. Dasjs/foundation.util.timerAndImageLoader.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

Die bildgeladene Methode führt eine Rückruffunktion in Ihrer jQuery-Sammlung aus, wenn Bilder vollständig geladen sind.

Foundation.onImagesLoaded($images, callback);

Berühren

• Die Methoden werden zum Hinzufügen von Pseudo-Drag-Ereignissen und zum Wischen zu Elementen verwendet.

• Das js/foundation.util.touch.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.

• Die addTouch- Methode wird verwendet, um Elemente an Berührungsereignisse im Slider-Plugin für mobile Geräte zu binden.

• Die spotSwipe- Methode bindet die Elemente an Swipe-Ereignisse im Orbit-Plugin für mobile Geräte.

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

Löst aus

• Es löst das angegebene Ereignis für die ausgewählten Elemente aus.

• Das js/foundation.util.triggers.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.

• Die Trigger werden in vielen Foundation-Plugins verwendet.

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

Die folgenden zwei Methoden werden in dieser Bibliothek verwendet, z. B. Größe ändern und scrollen.

• Die Methode resize () löst das Größenänderungsereignis aus, wenn ein Größenänderungsereignis auftritt.

• Die scroll () -Methode löst das Bildlaufereignis aus, wenn ein Bildlaufereignis auftritt.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

Verschiedenes

• Foundation enthält nur wenige Funktionen in der Kernbibliothek, die an vielen Stellen verwendet werden.

• Das js/foundation.core.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.

• Foundation.GetYoDigits ([Nummer, Namespace]) gibt eine zufällige Base-36-UID mit Namespace zurück. Standardmäßig wird die Zeichenfolgenlänge von 6 Zeichen zurückgegeben.

• Foundation.getFnName (fn) gibt einen JavaScript-Funktionsnamen zurück.

• Foundation.transitionend tritt auf, wenn der CSS-Übergang abgeschlossen ist.

Medienabfragen sind CSS3-Module, die Medienfunktionen wie Breite, Höhe, Farbe enthalten und den Inhalt gemäß der angegebenen Bildschirmauflösung anzeigen.

Foundation verwendet die folgenden Medienabfragen, um Aufschlüsselungsbereiche zu erstellen:

• Small - Wird für jeden Bildschirm verwendet.

• Medium - Es wird für Bildschirme mit 640 Pixel und mehr verwendet.

• Large - Es wird für Bildschirme mit 1024 Pixel und mehr verwendet.

Sie können die Bildschirmgröße mithilfe der Haltepunktklassen ändern . Beispielsweise können Sie die Klasse .small-6 für kleine Bildschirme und die Klasse .medium-4 für mittelgroße Bildschirme verwenden, wie im folgenden Codeausschnitt gezeigt:

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Ändern der Haltepunkte

Sie können die Haltepunkte ändern, wenn Ihre Anwendung die SASS-Version von Foundation verwendet. Sie können den Namen des Haltepunkts unter der Variablen $ breakpoints in der Einstellungsdatei platzieren, wie unten gezeigt -

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

Sie können die Haltepunktklassen in der Einstellungsdatei ändern, indem Sie die Variable $ breakpoint-classes ändern . Wenn Sie die .large- Klasse im CSS verwenden möchten , fügen Sie sie wie unten gezeigt am Ende der Liste hinzu.

$breakpoints-classes: (small medium large);

Angenommen, Sie möchten die .xlarge- Klasse im CSS verwenden und diese Klasse dann wie unten gezeigt am Ende der Liste hinzufügen.

$breakpoints-classes: (small medium large xlarge);

SASS

Das Breakpoint Mixin

• Sie können die Medienabfragen schreiben, indem Sie breakpoint () mixin zusammen mit @include verwenden .

• Verwenden Sie die Schlüsselwörter down oder only zusammen mit dem Haltepunktwert, um das Verhalten der Medienabfrage zu ändern, wie im folgenden Codeformat gezeigt:

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

Sie können drei Medienabfragen verwenden Portrait , Landschaft und Netzhaut für die Orientierung der Vorrichtung oder Pixeldichte und sie sind nicht Breite Medienanfragen basiert.

Haltepunktfunktion

• Sie können die Funktionalität von breakpoint () mixin mithilfe der internen Funktion verwenden.

• Die Funktion breakpoint () kann direkt zum Schreiben eigener Medienabfragen verwendet werden.

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Arbeiten mit Medienabfragen

• Das Foundation-JavaScript bietet die Funktion MediaQuery.current , um auf den aktuellen Haltepunktnamen im Foundation.MediaQuery- Objekt zuzugreifen, wie unten angegeben.

Foundation.MediaQuery.current

• Die Funktion MediaQuery.current zeigt kleine , mittlere und große als aktuelle Haltepunktnamen an.

• Sie können die Medienabfrage des Haltepunkts mithilfe der Funktion MediaQuery.get wie unten gezeigt abrufen.

Foundation.MediaQuery.get('small')

Sass Referenz

Variablen

In der folgenden Tabelle sind die SASS-Variablen aufgeführt, mit denen die Standardstile der Komponente angepasst werden können.

Mixins

Mixins erstellt eine Gruppe von Stilen, um Ihre CSS-Klassenstruktur für die Foundation-Komponenten zu erstellen.

BREAKPOINT

Es verwendet breakpoint () mixin, um Medienabfragen zu erstellen, und umfasst die folgenden Aktivitäten:

• Wenn eine Zeichenfolge übergeben wird, durchsucht mixin die Zeichenfolge in der $ breakpoints- Zuordnung und erstellt die Medienabfrage.

• Wenn Sie einen Pixelwert verwenden, konvertieren Sie ihn mit $ rem-base in einen em-Wert .

• Wenn der Rem-Wert übergeben wird, ändert er seine Einheit in em.

• Wenn Sie den Wert em verwenden, kann er unverändert verwendet werden.

Die folgende Tabelle gibt den vom Haltepunkt verwendeten Parameter an -

Funktionen

BREAKPOINT

Es verwendet breakpoint () mixin, um Medienabfragen mit übereinstimmendem Eingabewert zu erstellen.

Die folgende Tabelle gibt den möglichen Eingabewert an, der vom Haltepunkt verwendet wird -

JavaScript-Referenz

Funktionen

Es gibt zwei Arten von Funktionen -

• .atLeast- Es überprüft den Bildschirm. Es muss mindestens als Haltepunkt breit sein.

• .get - Es wird verwendet, um die Medienabfrage des Haltepunkts abzurufen.

Die folgende Tabelle gibt den Parameter an, der von den obigen Funktionen verwendet wird -

Beschreibung

Das Foundation Grid-System skaliert bis zu 12 Spalten auf der Seite. Rastersysteme werden verwendet, um Seitenlayouts durch eine Reihe von Zeilen und Spalten zu erstellen, in denen Ihre Inhalte gespeichert sind.

Rasteroptionen

In der folgenden Tabelle wird kurz erläutert, wie das Foundation-Grid-System auf mehreren Geräten funktioniert.

Grundstruktur eines Fundamentgitters

Das Folgende ist die Grundstruktur eines Foundation-Rasters -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

• Erstellen Sie zunächst eine Zeilenklasse , um horizontale Spaltengruppen zu erstellen.

• Der Inhalt sollte innerhalb der Spalten platziert werden, und nur Spalten dürfen die unmittelbaren untergeordneten Elemente von Zeilen sein.

• Rasterspalten werden erstellt, indem die Anzahl der zwölf verfügbaren Spalten angegeben wird, die Sie überspannen möchten. Zum Beispiel würden wir für vier gleiche Spalten .large-3 verwenden

Im Folgenden sind die drei Klassen aufgeführt, die im Foundation-Rastersystem verwendet werden:

Erweitertes Raster

Im Folgenden sind die in Foundation verwendeten erweiterten Rasterformate aufgeführt.

Semantisch bauen

Mit den SASS-Mixins wird ein Grid-CSS generiert, mit dem Sie Ihr eigenes semantisches Grid erstellen können. Für weitere Informationen klicken Sie hier

SASS-Referenz

Im Folgenden finden Sie die SASS-Referenz für das in Foundation verwendete Raster.

Das Raster hängt von der Flex- Anzeigeeigenschaft ab. Es besteht aus einer Reihe von Funktionen, die mit der Flexbox verfügbar sind, wie z. B. automatisches Stapeln, Quellenreihenfolge, vertikale Ausrichtung und horizontale Ausrichtung.

Browser-Unterstützung

Das Flex-Grid wird in Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+ und iOS 7+ unterstützt.

In der folgenden Tabelle werden die Funktionen von Flex Grid zusammen mit der Beschreibung beschrieben.

In diesem Kapitel werden wir darüber lernen Forms. Foundation bietet ein leistungsstarkes, einfaches und vielseitiges Layoutsystem für Formulare , das Formularstile und Rasterunterstützung kombiniert.

In der folgenden Tabelle sind die in Foundation verwendeten Formularelemente aufgeführt.

Beschreibung

• Foundation verwendet Sichtbarkeitsklassen, um Elemente basierend auf der Geräteorientierung (Hoch- und Querformat) oder der Bildschirmgröße (kleiner, mittlerer, großer oder großer Bildschirm) anzuzeigen oder auszublenden.

• Es ermöglicht einem Benutzer, Elemente basierend auf der Browserumgebung zu verwenden.

In der folgenden Tabelle sind die Sichtbarkeitsklassen von Foundation aufgeführt, die die Elemente basierend auf ihrer Browserumgebung steuern.

Foundation unterstützt einige Klassen, in denen Sie den Inhalt mithilfe der Klassen .hide und .invisible ausblenden können , und zeigt nichts auf der Seite an.

Orientierungserkennung

Die Geräte können mithilfe der Quer- und Hochformatfunktionen unterschiedliche Ausrichtungen bestimmen . Die Handgeräte wie Mobiltelefone geben die unterschiedlichen Ausrichtungen an, wenn Sie sie drehen. Für den Desktop ist die Ausrichtung immer Querformat.

Barrierefreiheit

In der folgenden Tabelle sind die Eingabehilfen für Bildschirmleser aufgeführt, mit denen der Inhalt ausgeblendet und für Bildschirmleser lesbar gemacht wird.

Sass Referenz

Foundation verwendet die folgenden Mixins, um die CSS-Ausgabe anzuzeigen, mit der Sie eine eigene Klassenstruktur für Ihre Komponenten erstellen können:

Der Standardwert aller dieser Mixins wird auf none gesetzt .

Beschreibung

Typografie in Foundation definiert Überschriften, Absätze, Listen und andere Inline-Elemente, die attraktive und einfache Standardstile für Elemente erstellen.

In der folgenden Tabelle sind die verschiedenen Arten von Typografie aufgeführt, die in Foundation verwendet werden.

Sass Referenz

Sie können die Stile der Komponenten mithilfe der folgenden in der Tabelle aufgeführten SASS-Variablen ändern.

small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)

In diesem Kapitel werden wir darüber lernen Typography Helpers. Typografie-Helfer werden verwendet, um Ihren Text auf semantisch relevante Weise zu formatieren. Mithilfe von Hilfsklassen in Foundation können Sie einige typografische Stile schneller erstellen.

In der folgenden Tabelle sind die Typografie-Helfer aufgeführt , die in Foundation verwendet werden.

Sass Referenz

Variablen

In der folgenden Tabelle sind die SASS-Variablen in der Einstellungsdatei des Projekts aufgeführt, mit denen die Standardstile der Komponente angepasst werden können.

In diesem Kapitel werden wir darüber lernen basic controls. Foundation bietet grundlegende Steuerelemente wie Schaltflächen , Schieberegler und Schalter .

In der folgenden Tabelle sind die in Foundation verwendeten grundlegenden Steuerelemente aufgeführt.

Beschreibung

Foundation bietet verschiedene Optionen zum Gestalten von Navigationselementen. Viele einfache Navigationsmuster sind gebündelt. Es kann in das Formular für eine robuste reaktionsschnelle Navigationslösung integriert werden.

In der folgenden Tabelle werden die verschiedenen Navigationstypen zusammen mit der Beschreibung beschrieben.

Foundation-Container werden verwendet, um jederzeit die volle Breite der Browser für die Site zu erstellen und den Inhalt der Site zu verpacken.

In der folgenden Tabelle sind einige der in Foundation verwendeten Container aufgeführt.

In diesem Kapitel werden wir uns mit Medien in Foundation befassen. Die Foundation besteht aus verschiedenen Medientypen wie Flex Video , Label , Orbit , Fortschrittsbalken und Tooltip . In der folgenden Tabelle sind alle Medientypen aufgeführt.

Beschreibung

Das Plugin ist eine Software, die zusätzliche Funktionen bietet, die ursprünglich nicht durch die Foundation-Kernfunktionalität vervollständigt wurden. Foundation Plugins können hochgeladen werden, um die Funktionalität der Site zu erweitern. Plugins erleichtern Ihnen die Arbeit.

In der folgenden Tabelle werden die verschiedenen Plugin-Typen zusammen mit der Beschreibung beschrieben.

Foundation bietet eine Reihe von SASS-Dienstprogrammfunktionen, die mit util , color , selector , unit , value und vielen mehr verwendet werden können.

Sie können alle Dienstprogrammdateien gleichzeitig importieren, indem Sie die folgende Codezeile verwenden:

@import 'util/util';

Sie können auch einzelne Dienstprogrammdateien wie unten gezeigt importieren -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Sass Referenz

Sie können die Stile der Komponenten mithilfe der folgenden SASS-Funktionen ändern.

Vordergrund

Es liefert den Elementen die Vordergrundfarbe basierend auf der Hintergrundfarbe. Es verwendet das folgende Format zum Zuweisen verschiedener Arten von Parametern:

foreground($color, $yes, $no, $threshold)

Die obigen Parameter sind in der folgenden Tabelle angegeben -

Smart-Scale

Es bietet den Elementen entsprechend ihrer Helligkeit eine geeignete Farbe. Es verwendet das folgende Format zur Angabe der entsprechenden Farbe:

smart-scale($color, $scale, $threshold)

Die oben angegebenen Parameter sind in der folgenden Tabelle angegeben -

Texteingaben

Bei Verwendung des Texteingabetyps wird ein Selektor erstellt. Es verwendet das folgende Format zur Angabe der Eingabetypen:

text-inputs($types)

Es verwendet den in der folgenden Tabelle angegebenen Parameter -

Streifeneinheit

Es entfernt die Einheit aus dem Wert und gibt nur die Zahl zurück. Es verwendet das folgende Format, um die Einheit aus dem Wert zu entfernen:

strip-unit($num)

Es verwendet den in der folgenden Tabelle angegebenen Parameter -

rem-calc

Es ändert den Pixelwert, um ihn an die Rem-Werte anzupassen. Es verwendet das folgende Format zum Konvertieren von Pixelwerten in Rem-Werte:

rem-calc($values, $base)

Es verwendet die folgenden Parameter wie in der Tabelle angegeben -

hat-Wert

Es gibt den Wert an, wenn er nicht falsch ist. Die falschen Werte umfassen null, none, 0 oder eine leere Liste. Es verwendet das folgende Format zur Angabe des Werts:

has-value($val)

Es verwendet den in der folgenden Tabelle angegebenen Parameter -

Get-Side

Es gibt die Seite eines Werts an und definiert die oberen / rechten / unteren / linken Werte für Auffüllen, Rand usw. Es verwendet das folgende Format zum Festlegen der Seite eines Werts -

has-value($val)

Es verwendet die folgenden Parameter wie in der Tabelle angegeben -

get-border-value

Es bestimmt den Randwert eines Elements. Es verwendet das folgende Format zur Angabe des Randwerts:

get-border-value($val, $elem)

Es verwendet die folgenden Parameter wie in der Tabelle angegeben -

Importieren

Es importiert den Inhalt der SASS-Mixins, die sich in der Datei scss / util / _mixins.scss befinden . Sie können die SASS-Mixins mithilfe der folgenden Codezeile importieren:

@import 'util/mixins';

Sass Referenz

Sie können die Stile der Komponenten mithilfe der SASS-Funktionen ändern.

Mixins

Mit den folgenden Mixins können Sie die CSS-Klassenstruktur für Ihre Komponenten erstellen.

CSS-TRIANGLE

Es wird zum Erstellen von Dropdown-Pfeilen, Dropdown-Pips und vielem mehr verwendet. Es verwendet den Selektor <i> & :: vor </ i> oder <i> & :: nach </ i> zum Anhängen eines Dreiecks an ein vorhandenes Element. Es verwendet das folgende Format -

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

Es werden die folgenden in der Tabelle angegebenen Parameter verwendet:

HAMBURGER

Es wird zum Erstellen eines Menüsymbols mit Breite, Höhe, Anzahl der Balken und Farben verwendet. Es verwendet das folgende Format -

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

Es werden die folgenden in der Tabelle angegebenen Parameter verwendet:

BACKGROUND-TRIANGLE

Es wird zum Festlegen des Hintergrundbilds für ein Element verwendet. Es verwendet das folgende Format -

@include background-triangle($color);

Es verwendet den in der Tabelle angegebenen Parameter -

CLEARFIX

Dieses Mixin löscht automatisch die untergeordneten Elemente, sodass kein zusätzliches Markup erforderlich ist. Es verwendet das folgende Format -

@include clearfix;

AUTO-WIDTH

Die Größe der Elemente wird automatisch anhand der Anzahl der im Container vorhandenen Elemente angepasst. Es verwendet das folgende Format -

@include auto-width($max, $elem);

Es verwendet die folgenden Parameter wie in der Tabelle angegeben -

DISABLE-MOUSE-OUTLINE

Es wird verwendet, um den Umriss um das Element zu deaktivieren, wenn die Mauseingabeaktion identifiziert wird. Es verwendet das folgende Format -

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Es wird zum Ausblenden der Elemente verwendet und kann für Tastaturen und andere Geräte verfügbar sein. Es verwendet das folgende Format -

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Es wird verwendet, um die unsichtbaren Elemente zu entfernen und die CSS-Ausgabe mithilfe des Mixins element-unsichtbar () umzukehren. Es verwendet das folgende Format -

@include element-invisible-off;

VERTICAL-CENTER

Es wird verwendet, um die Elemente vertikal zentriert innerhalb des nicht statischen übergeordneten Elements zu platzieren, indem das folgende Format verwendet wird:

@include vertical-center;

HORIZONTAL-CENTER

Es wird verwendet, um die Elemente horizontal zentriert innerhalb des nicht statischen übergeordneten Elements zu platzieren, indem das folgende Format verwendet wird:

@include horizontal-center;

ABSOLUTE-CENTER

Es wird verwendet, um die Elemente absolut zentriert innerhalb des nicht statischen übergeordneten Elements zu platzieren, indem das folgende Format verwendet wird:

@include absolute-center;

Foundation bietet eine Motion UI-Bibliothek zum Erstellen von UI-Übergängen und -Animationen und wird von Foundation-Komponenten wie Toggler , Reveal und Orbit verwendet .

Motion UI installieren

Sie können die Motion UI-Bibliothek in Ihrem Projekt installieren, indem Sie npm oder bower verwenden, wie in der folgenden Codezeile gezeigt:

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

Sie können einen Pfad für die Motion UI-Bibliothek im Kompass hinzufügen, indem Sie config.rb verwenden, wie in der folgenden Codezeile gezeigt -

add_import_path 'node_modules/motion-ui/src'

Sie können den Pfad mit den folgenden Codezeilen in den Schluck-Sass aufnehmen :

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

Importieren Sie die Motion UI-Bibliothek in die SASS-Datei mit dem folgenden Code:

@import 'motion-ui'

Eingebaute Übergänge

Foundation bietet Übergangseffekte mithilfe von Übergangsklassen, die von der Motion UI-Bibliothek erstellt werden. Lassen Sie uns ein einfaches Beispiel mit Übergangseffekten erstellen .

Benutzerdefinierte Übergänge

Sie können die benutzerdefinierten Übergangsklassen mithilfe der Motion UI-Bibliothek festlegen. Zum Beispiel werden wir benutzerdefinierte Klassen für den Übergang mui-hing () festlegen , der das Element dreht -

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

Animation

Sie können Motion UI-Übergangseffekte zum Erstellen von CSS-Animationen verwenden. Klicken Sie auf diesen Link , um zu überprüfen , wie Animation auf der Modal arbeitet mit Daten-Animation - Klasse.