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:

Sr.Nr. Komponentenbeschreibung
1 Akkordeon

Akkordeons enthalten vertikale Registerkarten, die auf Websites verwendet werden, um große Datenmengen zu erweitern und zu reduzieren.

2 Akkordeon Menü

Es zeigt das zusammenklappbare Menü mit Akkordeoneffekten an.

3 Abzeichen

Abzeichen ähneln Beschriftungen, mit denen Informationen wie wichtige Notizen und Nachrichten hervorgehoben werden.

4 Semmelbrösel

Es gibt den aktuellen Standort für eine Site innerhalb der Navigationshierarchie an.

5 Tasten

Foundation unterstützt Standardschaltflächen mit unterschiedlichen Stilen.

6 Aufbieten, ausrufen, zurufen

Callout ist ein Element, mit dem der Inhalt darin platziert werden kann.

7 Schließen Sie die Schaltfläche

Es wird verwendet, um die Warnbox zu schließen.

8 Drilldown-Menü

Das Drilldown-Menü ändert die verschachtelten Listen in ein vertikales Drilldown-Menü.

9 Dropdown-Menü

Das Dropdown-Menü wird zum Anzeigen von Links in einem Listenformat verwendet.

10 Dropdown-Bereich

Im Dropdown-Bereich wird der Inhalt angezeigt, wenn Sie auf die Schaltfläche klicken.

11 Flex Video

Es wird verwendet, um Videoobjekte auf den Webseiten zu erstellen.

12 Float-Klassen

Es wird verwendet, um HTML-Elementen Dienstprogrammklassen hinzuzufügen.

13 Formen

Es wird zum Erstellen eines Formularlayouts zum Sammeln von Benutzereingaben verwendet.

14 Etikette

Beschriftungen sind Inline-Stile, die eine Beschriftung für ein Eingabeelement definieren.

15 Medienobjekt

Es wird verwendet, um Medienobjekte wie Bilder, Videos, Blog-Kommentare usw. hinzuzufügen, die links oder rechts vom Inhaltsblock platziert werden können.

16 Speisekarte

Es bietet Zugriff auf verschiedene Modi auf der Website.

17 Seitennummerierung

Es ist eine Art der Navigation, die den Inhalt in eine Reihe verwandter Seiten unterteilt.

18 Schieberegler

Es gibt den Wertebereich durch Ziehen eines Handles an.

19 Schalter

Es wird verwendet, um zwischen Ein- und Ausschaltzustand umzuschalten.

20 Tabelle

Es repräsentiert die Daten im Zeilen- und Spaltenformat.

21 Tabs

Es handelt sich um eine navigationsbasierte Registerkarte, auf der der Inhalt in verschiedenen Bereichen angezeigt wird, ohne die Seite zu verlassen.

22 Miniaturansicht

Die Bilder werden in Miniaturform formatiert.

23 Titelleiste

Es wird verwendet, um den aktuellen Bildschirm anzuzeigen, den der Benutzer mit anderen Menüelementen verwendet.

24 Tooltip

Es ist ein kleines Popup-Feld, das die Informationen beschreibt, wenn Sie mit der Maus über den Link fahren.

25 Obere Leiste

Es wird verwendet, um einen Navigationsheader auf der Website zu erstellen.

26 Orbit

Es ist ein einfacher und leistungsstarker Schieberegler, der die Elemente mithilfe der Orbit- Klasse wischt .

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 .

Sr.Nr. Name & Beschreibung Art Standardwert
1

$global-width

Es repräsentiert die globale Breite der Site. Wird verwendet, um die Zeilenbreite des Rasters zu bestimmen.

Nummer rem-calc (1200)
2

$global-font-size

Es stellt die Schriftgröße dar, die auf <html> und <body> angewendet wird . Es ist standardmäßig auf 100% eingestellt und der Browser-Einstellungswert des Benutzers wird vererbt.

Nummer 100%
3

$global-lineheight

Es repräsentiert alle Arten der Standardzeilenhöhe. $ global-lineheight ist 24px, während $ global-font-size auf 16px eingestellt ist.

Nummer 1.5
4

$primary-color

Es gibt den interaktiven Komponenten wie Links und Schaltflächen Farbe.

Farbe # 2199e8
5

$secondary-color

Es wird mit Komponenten verwendet, die die Sekundärklasse unterstützen .

Farbe # 777
6

$success-color

Es stellt den positiven Status oder die positive Aktion dar, wenn es mit der .success- Klasse verwendet wird.

Farbe # 3adb76
7

$warning-color

Es stellt einen Warnstatus oder eine Aktion dar, wenn es mit der .warning- Klasse verwendet wird.

Farbe # ffae00
8

$alert-color

Es stellt einen negativen Status oder eine negative Aktion dar, wenn es mit der Klasse .alert verwendet wird .

Farbe # ec5840
9

$light-gray

Es wird für hellgraue UI-Elemente verwendet.

Farbe # e6e6e6
10

$medium-gray

Es wird für mittelgraue UI-Elemente verwendet.

Farbe #cacaca
11

$dark-gray

Es wird für dunkelgraue UI-Elemente verwendet.

Farbe # 8a8a8a
12

$black

Es wird für schwarze UI-Elemente verwendet.

Farbe # 0a0a0a
13

$white

Es wird für weiße UI-Elemente verwendet.

Farbe #fefefe
14

$body-background

Es repräsentiert die Hintergrundfarbe des Körpers.

Farbe $ weiß
15

$body-font-color

Es repräsentiert die Textfarbe des Körpers.

Farbe $ schwarz
16

$body-font-family

Es repräsentiert die Liste der Schriftarten des Körpers.

Liste 'Helvetica Neue', Helvetica, Roboto, Arial, serifenlos
17

$body-antialiased

Antialiased Typ wird durch das Setzen dieses Attributs aktiviert wahr die CSS - Eigenschaften mit -webkit-font-Glättung und -moz-osx-font-Glättung .

Boolescher Wert wahr
18

$global-margin

Es repräsentiert den globalen Margin-Wert für Komponenten.

Nummer 1rem
19

$global-padding

Es repräsentiert den globalen Füllwert für Komponenten.

Nummer 1rem
20

$global-margin

Es stellt den globalen Randwert dar, der zwischen Komponenten verwendet wird.

Nummer 1rem
21

$global-weight-normal

Es repräsentiert die globale Schriftgröße für den normalen Typ.

Schlüsselwort oder Nummer normal
22

$global-weight-bold

Es repräsentiert die globale Schriftgröße für Fettdruck.

Schlüsselwort oder Nummer Fett gedruckt
23

$global-radius

Es repräsentiert den globalen Wert aller Elemente mit einem Randradius.

Nummer 0
24

$global-text-direction

Es setzt die Textrichtung des CSS auf ltr oder rtl

ltr

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.

Sr.Nr. Name & Beschreibung Art Standardwert
1

$breakpoints

Dies ist ein Haltepunktname, mit dem die Medienabfragen mithilfe des breakpoint () -Mixins geschrieben werden können.

Karte

klein: 0px

mittel: 640px

groß: 1024px

xlarge: 1200px

xxlarge: 1440px

2

$breakpoint-classes

Sie können die Ausgabe der CSS-Klasse ändern, indem Sie die Variable $ breakpoint-classes ändern .

Liste klein Mittel Groß

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 -

Sr.Nr. Name & Beschreibung Art Standardwert
1

$value

Es verarbeitet die Werte unter Verwendung von Haltepunktnamen, px-, rem- oder em-Werten.

Schlüsselwort oder Nummer Keiner

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 -

Sr.Nr. Name & Beschreibung Art Standardwert
1

$val

Es verarbeitet die Werte unter Verwendung von Haltepunktnamen, px-, rem- oder em-Werten.

Schlüsselwort oder Nummer klein

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 -

Sr.Nr. Name & Beschreibung Art
1

size

Es prüft und erhält den Namen des Haltepunkts für die angegebenen Funktionen.

String

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.

Kleine Geräte Telefone (<640px) Mittlere Geräte Tablets (> = 640px) Große Geräte Laptops & Desktops (> = 1200px)
Gitterverhalten Immer horizontal Zum Start zusammengeklappt, horizontal über den Haltepunkten Zum Start zusammengeklappt, horizontal über den Haltepunkten
Klassenpräfix .klein-* .Mittel-* .large- *
Anzahl der Spalten 12 12 12
Nestable Ja Ja Ja
Offsets Ja Ja Ja
Spaltenbestellung Ja Ja Ja

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:

Sr.Nr. Grundlegende Rasterklassen & Beschreibung
1 Groß

Die large- * Klassen werden für die großen Geräte verwendet.

2 Mittel

Die Medium-Klasse * wird für die Medium-Geräte verwendet.

3 Klein

small- * class wird für kleine Geräte verwendet.

Erweitertes Raster

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

Sr.Nr. Erweiterte Raster & Beschreibung
1 Kombinierte Spalte / Zeile

Die Spalten- und Zeilenklassen werden für dasselbe Element verwendet, um die Spalte mit voller Breite als Container zu verwenden.

2 Nisten

Wir können die Rasterspalten in anderen Spalten verschachteln.

3 Offsets

Mit der Klasse mit großem Versatz * oder kleinem Versatz * können Sie die Spalten nach rechts verschieben.

4 Unvollständige Zeilen

Foundation verschiebt das letzte Element automatisch nach rechts, wenn die Zeilen keine Spalten bis 12 enthalten.

5 Zeilen reduzieren / nicht reduzieren

Bei Verwendung der Größe der Medienabfrage werden die Klassen zum Reduzieren und Auflösen in das Zeilenelement aufgenommen, um die Auffüllungen anzuzeigen.

6 Zentrierte Spalten

Indem Sie die Klasse klein zentriert in die Spalte aufnehmen, können Sie die Spalte in der Mitte erstellen.

7 Quellenbestellung

Die Quellordnungsklasse wird verwendet, um die Spalten zwischen dem Haltepunkt zu verschieben.

8 Blockgitter

Block-Grid wird verwendet, um den Inhalt zu teilen.

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.

Sr.Nr. Grundraster & Beschreibung
1 Variablen

Mit den sass-Variablen können wir die Standardstile dieser Komponente ändern.

2 Mixins

Die endgültige CSS-Ausgabe wird mithilfe des Mixins erstellt.

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.

Sr.Nr. Funktionen & Beschreibung
1 Importieren

Es enthält das Export-Mixin für das Flex-Grid, um das Standard-CSS zu verwenden.

2 Grundlagen

Die Flex-Gitterstruktur ähnelt der des Float-Gitters.

3 Erweiterte Dimensionierung

Wenn die Größenklasse nicht in der Spalte enthalten ist, erweitert sie sich selbst und füllt den verbleibenden Platz in der Spalte aus.

4 Reaktionsschnelle Anpassungen

Wenn die explizite Größe der Spalte im Flex-Raster nicht angegeben ist, werden die Spalten automatisch in der Größe angepasst

5 Spaltenausrichtung

Die Flex-Grid-Spalten können in der übergeordneten Zeile horizontal oder vertikal ausgerichtet werden.

6 Quellenbestellung

Die Quellreihenfolge hilft dabei, die Spalte in verschiedenen Bildschirmgrößen neu anzuordnen.

7 Sass Referenz

SASS (Syntactically Awesome Stylesheet) ist ein CSS-Vorprozessor, der dazu beiträgt, Wiederholungen mit CSS zu reduzieren und Zeit zu sparen.

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.

Sr.Nr. Formularelement & Beschreibung
1 Formulargrundlagen

Das Erstellen von Formularen ist einfach und sehr flexibel. Sie bestehen aus einer Kombination standardisierter Formularelemente und einem leistungsstarken Rastersystem.

2 Hilfstext

Es wird verwendet, um den Benutzer über den Zweck des Elements zu informieren, und wird normalerweise unter einem Feld platziert.

3 Etikettenpositionierung

Sie können Ihre Beschriftungen links oder rechts von Ihren Eingaben positionieren .

4 Inline-Beschriftungen und Schaltflächen

Zusätzlicher Text oder Steuerelemente können links / rechts von einem Eingabefeld angehängt werden.

5 Benutzerdefinierte Steuerelemente

Benutzerdefinierte Steuerelemente wie Datumsauswahl, Schalter oder Schieberegler erfordern einige Aufmerksamkeit, um darauf zugreifen zu können.

6 SASS-Referenz

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

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.

Sr.Nr. Sichtbarkeitsklasse & Beschreibung
1 Nach Bildschirmgröße anzeigen

Es zeigt die Elemente basierend auf dem Gerät mithilfe der .show- Klasse.

2 Nach Bildschirmgröße ausblenden

Es versteckt die Elemente basierend auf dem Gerät mithilfe der .hide- Klasse.

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.

Sr.Nr. Zugänglichkeitsklasse & Beschreibung
1 Für Bildschirmleser anzeigen

Es verwendet die show-for-sr- Klasse, um den Inhalt auszublenden und gleichzeitig zu verhindern, dass Bildschirmleser ihn lesen.

2 Für Bildschirmleser ausblenden

Es verwendet ein Aria-Hidden- Attribut, das Text sichtbar macht, aber von einem Bildschirmleser nicht gelesen werden konnte.

3 Überspringen von Links

Der Screenreader erstellt einen Sprunglink, um zur Navigation zum Inhalt Ihrer Website zu gelangen.

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:

Sr.Nr. Mixin & Beschreibung Parameter Art
1

show-for

Standardmäßig wird ein Element ausgeblendet und oberhalb einer bestimmten Bildschirmgröße angezeigt.

$ Größe Stichwort
2

show-for-only

Standardmäßig wird ein Element ausgeblendet und innerhalb des Haltepunkts angezeigt.

$ Größe Stichwort
3

hide-for

Standardmäßig wird ein Element angezeigt und über einer bestimmten Bildschirmgröße ausgeblendet.

$ Größe Stichwort
4

hide-for-only

Standardmäßig wird ein Element angezeigt und über einer bestimmten Bildschirmgröße ausgeblendet.

$ Größe Stichwort

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.

Sr.Nr. Typografie & Beschreibung
1 Absätze

Absatz ist eine Gruppe von Sätzen, die mit unterschiedlicher Schriftgröße, hervorgehobenen Wörtern, Zeilenhöhe usw. definiert sind.

2 Header

Es definiert HTML-Überschriften von h1 bis h6.

3 Links

Es wird ein Hyperlink erstellt, der ein anderes Dokument öffnet, wenn Sie auf den Text oder ein Bild klicken.

4 Teiler

Es wird verwendet, um mithilfe des <hr> -Tags eine Pause zwischen den Abschnitten einzulegen.

5 Geordnete und ungeordnete Listen

Foundation unterstützt geordnete Listen und ungeordnete Listen, um die Dinge aufzulisten.

6 Definitionslisten

Definitionslisten werden verwendet, um Name-Wert-Paare anzuzeigen.

7 Block Zitate

Es stellt einen Textblock dar, der viel größer als normal definiert.

8 Abkürzungen und Code

Die Abkürzung definiert einen verkürzten Begriff aus Wort oder Phrase und der Code repräsentiert einen Teil des Codes.

9 Tastenanschläge

Es wird verwendet, um eine bestimmte Funktion auszuführen.

10 Barrierefreiheit

Foundation bietet einige Richtlinien für den Zugriff auf den Inhalt der Seite.

Sass Referenz

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

Sr.Nr. Name & Beschreibung Art Standardwert
1

$header-font-family

Gibt die Schriftfamilie für Header-Elemente an.

String oder Liste $ body-font-family
2

$header-font-weight

Gibt die Schriftgröße der Überschriften an.

String $ global-weight-normal
3

$header-font-style

Bietet den Schriftstil von Headern.

String normal
4

$font-family-monospace

Schriftstapel, der für Elemente verwendet wird, die einen monospaced Typ verwenden, z. B. Codebeispiele.

String oder Liste Consolas, "Liberation Mono", Kurier, Monospace
5

$header-sizes

Definiert die Bildschirmgrößen von Überschriften und jeder Schlüssel ist ein Haltepunkt, und jeder Wert ist eine Karte der Überschriftengrößen.

Karte
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
)
6

$header-color

Liefert die Farbe der Überschriften.

Farbe erben
7

$header-lineheight

Definiert die Zeilenhöhe der Überschriften.

Nummer 1.4
8

$header-margin-bottom

Bietet den unteren Rand der Überschriften.

Nummer 0,5rem
9

$header-text-rendering

Definiert die Methode zum Rendern von Text.

String optimizeLegibility
10

$small-font-size

Gibt die Schriftgröße für <kleine> Elemente an.

Nummer 80%
11

$paragraph-margin-bottom

Gibt den unteren Rand von Absätzen an.

Nummer 1rem
12

$paragraph-text-rendering

Methoden zum Rendern von Texten.

String optimizeLegibility
13

$code-color

Bietet Textfarbe für Codebeispiele.

Farbe $ schwarz
14

$code-font-family

Stellt den Codebeispielen eine Schriftfamilie zur Verfügung.

String oder Liste $ font-family-monospace
15

$code-border

Gibt den Rand um den Code an.

Liste 1px fest $ mittelgrau
16

$code-padding

Gibt den Abstand um den Text an.

Nummer oder Liste rem-calc (2 5 1)
17

$anchor-color

Standardfarbe für Links.

Farbe $ Primärfarbe
18

$anchor-color-hover

Gibt die Standardfarbe für Links beim Hover an.

Farbe Skalenfarbe ($ Ankerfarbe, $ Helligkeit: -14%)
19

$anchor-text-decoration

Standardtextdekoration für Links.

String keiner
20

$anchor-text-decoration-hover

Standardtextdekoration für Links beim Hover.

String keiner
21

$hr-width

Definiert die maximale Breite eines Teilers.

Nummer $ global-width
22

$hr-border

Gibt den Standardrahmen für einen Teiler an.

Liste 1px fest $ mittelgrau
23

$hr-margin

Standardspielraum für einen Teiler.

Nummer oder Liste rem-calc (20) auto
24

$list-lineheight

Es definiert die Zeilenhöhe für Elemente in einer Liste.

Nummer $ Absatzzeile
25

$list-style-type

Bietet Aufzählungszeichen für ungeordnete Listen.

String Rabatt
26

$list-style-position

Es definiert die Positionierung von Aufzählungszeichen auf ungeordneten Listen.

String draußen
27

$list-side-margin

Definiert den linken (oder rechten) Rand.

Nummer 1,25rem
28

$defnlist-term-weight

Bietet Schriftgröße für <dt> -Elemente.

String $ global-weight-fett
29

$defnlist-term-margin-bottom

Bietet Abstand zwischen <dt> - und <dd> -Elementen.

Nummer 0,3rem
30

$blockquote-color

Es wendet die Textfarbe von <blockquote> -Elementen an.

Farbe $ dunkelgrau
31

$blockquote-padding

Bietet Auffüllen innerhalb eines <blockquote> -Elements.

Nummer oder Liste rem-calc (9 20 0 19)
32

$blockquote-border

Es gibt einen Seitenrand für die <blockquote> -Elemente.

Liste 1px fest $ mittelgrau
33

$cite-font-size

Definiert die Schriftgröße für die <cite> -Elemente.

Nummer rem-calc (13)
34

$cite-color

Bietet Textfarbe für <cite>Elemente.

Farbe $ dunkelgrau
35

$keystroke-font

Definiert die Schriftfamilie für die <kbd> -Elemente.

String oder Liste $ font-family-monospace
36

$keystroke-color

Definiert die Textfarbe für die <kbd> -Elemente.

Farbe $ schwarz
37

$keystroke-background

Bietet Hintergrundfarbe für die <kbd> -Elemente.

Farbe $ hellgrau
38

$keystroke-padding

Gibt die Auffüllung für die <kbd> -Elemente an.

Nummer oder Liste rem-calc (2 4 0)
39

$keystroke-radius

Zeigt den Rahmenradius für die <kbd> -Elemente an.

Nummer oder Liste $ global-radius
40

$abbr-underline

Stellt den unteren Randstil für die <abbr> -Elemente bereit.

Liste 1px gepunktet $ schwarz

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.

Sr.Nr. Typografie-Helfer & Beschreibung
1 Textausrichtung

Es hilft beim Ändern der Textausrichtung des Elements wie links , rechts , zentrieren und ausrichten .

2 Subheader

Unterüberschriften können mithilfe der .subheader- Klasse zu jedem Header-Element hinzugefügt werden .

3 Leitabsatz

Es ist ein erheblich größerer Textblock als der normale Text, der für Werbung oder anderen beschreibenden Text verwendet werden kann.

4 Liste ohne Aufzählungszeichen

Standardmäßig ist das <ul> eine Aufzählungsliste in Foundation. Um die Aufzählungszeichen zu entfernen, können Sie die .no-bullet- Klasse verwenden.

5 Statistiken

Wann immer Sie mit Dashboard arbeiten, müssen Sie einige wichtige Zahlen hervorheben. Sie können dies mit der Klasse .stat erreichen.

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.

Sr.Nr. Name & Beschreibung Art Standardwert
1

$lead-font-size

Standardmäßig Schriftgröße für Hauptabsätze.

Nummer $ global-font-size * 1.25
2

$lead-lineheight

Zeilenhöhe für Lead-Absatz standardmäßig.

String 1.6
3

$subheader-lineheight

Standardzeilenhöhe des Subheader.

Nummer 1.4
4

$subheader-color

Standardschriftfarbe des Subheader.

Farbe $ dunkelgrau
5

$subheader-font-weight

Standardschriftgröße des Subheader.

String $ global-weight-normal
6

$subheader-margin-top

Standardmäßiger oberer Rand des Subheader.

Nummer 0,2rem
7

$subheader-margin-bottom

Standardunterrand des Subheader.

Nummer 0,5rem
8

$stat-font-size

Standardschriftgröße der statischen Nummer

Nummer 2.5rem

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.

Sr.Nr. Grundlegende Steuerung und Beschreibung
1 Taste

Foundation unterstützt viele Schaltflächenstile, die an Ihre Bedürfnisse angepasst werden können.

2 Schaltflächengruppe

Sie sind Container für entsprechende Aktionselemente. Es funktioniert einwandfrei, wenn eine Gruppe von Aktionen in einer Leiste angezeigt wird.

3 Schließen Sie die Schaltfläche

Die Schaltfläche Schließen wird verwendet, wenn etwas durch Klicken entfernt werden soll.

4 Schieberegler

Schieberegler sind sehr nützlich, um bestimmte Werte innerhalb eines Bereichs festzulegen.

5 Schalter

Sie können den Schalter durch Klicken ausschalten oder einschalten.

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.

Sr.Nr. Typ & Beschreibung
1 Navigationsübersicht

Die Navigation enthält Links zum anderen Abschnitt und besteht aus vielen Navigationsmustern.

2 Speisekarte

Das Menü wird verwendet, um viele Navigationskomponenten zu erstellen.

3 Dropdown-Menü

Das Dropdown-Menü-Plugin wird verwendet, um Untermenüs unterhalb des Hauptmenüs zu erstellen.

4 Drilldown-Menü

Das Drilldown-Menü-Plugin wird verwendet, um Untermenüs im Hauptmenü im Slider-Format zu erstellen.

5 Akkordeon Menü

Es zeigt das zusammenklappbare Menü mit Akkordeoneffekten an und unterstützt das automatische Zusammenklappen mithilfe des Akkordeon-Menü-Plugins.

6 Obere Leiste

Die obere Leiste hilft dabei, die komplexe Navigationsleiste einfach auf verschiedenen Bildschirmgrößen anzuzeigen.

7 Responsive Navigation

Das Responsive-Menü-Plugin ordnet das Menü in verschiedenen Bildschirmgrößen zu.

8 Magellan

Magellan erstellt eine Navigation, die sich in einer festen Position befindet. Es verfolgt automatisch die Navigationsliste auf einer Seite basierend auf der Bildlaufposition.

9 Seitennummerierung

Paginierung, eine ungeordnete Liste wird von Bootstrap wie viele andere Schnittstellenelemente behandelt.

10 Semmelbrösel

Ein Breadcrumb gibt den aktuellen Standort für eine Site innerhalb der Navigationshierarchie an.

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.

Sr.Nr. Behälter & Beschreibung
1 Akkordeon

Akkordeons enthalten vertikale Registerkarten, die auf Websites verwendet werden, um große Datenmengen zu erweitern und zu reduzieren.

2 Aufbieten, ausrufen, zurufen

Es platziert den Inhalt innerhalb der Komponente.

3 Dropdown-Fenster

Der Inhalt wird angezeigt, wenn Sie auf die Schaltfläche klicken.

4 Medienobjekt

Es werden Medienobjekte wie Bilder, Videos, Blogkommentare usw. sowie einige Inhalte hinzugefügt.

5 Off-Canvas

Es hebt das Navigationsmenü vom sichtbaren Bereich ab und zeigt den Hauptinhalt an.

6 Reveal-Modal

Mit Foundation können Sie mithilfe der Enthüllungsklasse modale Dialoge oder Popup-Fenster erstellen .

7 Tabellen

Foundation bietet Layouts für die Anzeige von Daten in Tabellenform.

8 Tabs

Es handelt sich um eine navigationsbasierte Registerkarte, auf der der Inhalt in verschiedenen Bereichen angezeigt wird, ohne die Seite zu verlassen.

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.

Sr.Nr. Medientyp & Beschreibung
1 Flex Video

Es wird verwendet, um Videos in einen flexiblen Videocontainer einzubetten, um trotz der Bildschirmgröße das richtige Seitenverhältnis beizubehalten.

2 Etikette

Es kann für das Inline-Styling verwendet werden, das in den Body eingefügt werden kann, um einen bestimmten Abschnitt aufzurufen oder Metadaten anzuhängen.

3 Orbit

Es ist ein leistungsstarker und reaktionsschneller Schieberegler, mit dem ein Benutzer auf Touchscreen-Geräten wischen kann.

4 Fortschrittsanzeige

Es wird verwendet, um Ihren Fortschritt anzuzeigen und kann zu Ihren Layouts hinzugefügt werden.

5 Tooltips

Es wird verwendet, um zusätzliche Informationen für einen Begriff oder eine Aktion auf einer Seite anzuzeigen.

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.

Sr.Nr. Typ & Beschreibung
1 Bleib

Abide wird in der HTML5-Formularvalidierungsbibliothek mit nativer API unter Verwendung der erforderlichen Attribute und Muster verwendet.

2 Equalizer

Equalizer ist eine Möglichkeit, mehrere Inhalte mit gleichen Höhen auf Ihrer Seite zu erstellen.

3 Austausch

Es wird verwendet, um den ansprechenden Inhalt entsprechend dem Gerät des Benutzers zu laden.

4 Toggler

Mit Toggle können Sie von einer Einstellung zur anderen wechseln.

5 Klebrig

Das Sticky Plugin wird verwendet, um einen konstanten Inhalt oder ein konstantes Bild auf der Website zu erstellen.

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 -

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$color

Es überprüft die Helligkeit der Farbe.

Farbe Keiner
2

$yes

Wenn die Farbe hell ist, gibt sie $ yes zurück .

Farbe $ schwarz
3

$no

Wenn die Farbe dunkel ist, wird $ no color zurückgegeben.

Farbe $ weiß
4

$threshold

Es repräsentiert die Schwelle der Helligkeit.

Prozentsatz 60%

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 -

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$color

Es wird verwendet, um die Farbe zu skalieren.

Farbe Keiner
2

$scale

Es gibt den Prozentsatz an, der vergrößert oder verkleinert werden soll.

Prozentsatz 5%
3

$threshold

Es repräsentiert die Schwelle der Helligkeit.

Prozentsatz 40%

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 -

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$types

Es bietet eine Reihe von Texteingabetypen zum Generieren eines Selektors.

Farbe - -

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 -

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$num

Es gibt die Nummer an, wenn Sie die Einheit aus dem Wert entfernen.

Farbe Keiner

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 -

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$values

Es konvertiert die Pixelwerte in Rem-Werte und trennt sie durch Leerzeichen. Wenn Sie eine durch Kommas getrennte Liste konvertieren, schließen Sie die Liste in Klammern ein.

Nummer oder Liste Keiner
2

$base

Es liefert den Basiswert, während Pixel in Rem-Wert konvertiert werden. Wenn für die Basis ein Nullwert vorhanden ist, verwendet die Funktion die Variable $ base-font-size als Basis.

Nummer Null

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 -

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$val

Es überprüft den angegebenen Wert.

Gemischt Keiner

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 -

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$val

Es gibt die Seite eines Werts an.

Liste oder Nummer Keiner
2

$side

Es bestimmt, auf welcher Seite der Wert (oben / rechts / unten / links) zurückgegeben werden soll.

Stichwort Keiner

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 -

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$val

Es findet einen bestimmten Wert der Grenze.

Liste Keiner
2

$elem

Es wird verwendet, um die Rahmenkomponente zu extrahieren.

Stichwort Keiner

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:

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$triangle-size

Es definiert die Breite des Dreiecks.

Nummer Keiner
2

$triangle-color

Es definiert die Farbe des Dreiecks.

Farbe Keiner
3

$triangle-direction

Es definiert die Richtung des Dreiecks wie nach oben, rechts, unten oder links.

Stichwort Keiner

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:

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$color

Es definiert die Farbe für das Symbol.

Farbe Keiner
2

$color-hover

Es definiert die Farbe, wenn Sie mit der Maus über das Symbol fahren.

Farbe Keiner
3

$width

Es definiert die Breite des Symbols.

Nummer Keiner
4

$height

Es definiert die Höhe des Symbols.

Nummer Keiner
5

$weight

Es definiert das Gewicht der einzelnen Balken im Symbol.

Nummer Keiner
6

$bars

Es definiert die Anzahl der Balken im Symbol.

Nummer Keiner

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 -

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$color

Es definiert die Farbe für das Dreieck.

Farbe $ schwarz

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 -

Sr.Nr. Parameter & Beschreibung Art Standardwert
1

$max

Es gibt die maximale Anzahl von Elementen im Container an.

Nummer Keiner
2

$elem

Es wird ein Tag für Geschwister-Selektoren verwendet.

Stichwort li

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.