Ein Blick in: Die Kit-Sprache

Angenommen, Sie haben Prototypen für eine Website mit HTML- Dateien erstellt. Sie haben etwa 10 HTML-Seiten oder so, und diese Seiten teilen einige gemeinsame Komponenten wie Header, Sidebar und Footer.

Jetzt kommt das Problem: Wenn Sie diese freigegebenen Komponenten ändern, müssen Sie sie möglicherweise auch in den anderen Dateien ändern . Es ist kontraproduktiv und eine große Zeitverschwendung.

Um dies zu vermeiden, können Sie Templating-Engines ausprobieren. Es gibt eine Reihe von Templating-Engines, die sich durch ihre besonderen Merkmale auszeichnen. In diesem Beitrag werden wir Sie durch einen führen, den wir als den einfachsten, aber immer noch leistungsfähigsten gefunden haben: Kit .

Was ist Kit?

Kit ist eine proprietäre Programmiersprache von Codekit, die den Import von Variablen und Dateien in HTML ermöglicht. Es wird mit einer .kit Dateierweiterung geschrieben. Mit Hilfe von Codekit kann es beim Speichern einer Datei in eine HTML-Datei kompiliert werden.

Variablen

Kit-Variablen sind nicht in Stein gemeißelt; Sie können mit der Notation $ oder @ werden. Wenn Sie also Kit zusammen mit LESS verwenden, können Sie Ihre Variablen mit der @ -Notation benennen, um der LESS-Konvention zu folgen. Ähnlich können Sie das $ für Sass verwenden. Die Werte können mit Doppelpunkt, Gleichheitszeichen oder Leerzeichen zugewiesen werden. Im Folgenden finden Sie einige Beispiele:

Beachten Sie jedoch, dass Sie nur eine Variable pro Kommentar festlegen können. Daher funktioniert das folgende Beispiel nicht als Variable.

Einführen

Mit der Kit-Sprache können Sie jede Art von Datei einschließlich .html, .txt, .kit und sogar .php . Um Dateien zu importieren, können Sie @import oder @include .

Außerdem können Sie im Gegensatz zur Definition von Variablen mehrere Dateien in einer Zeile importieren:

Nach dem Speichern greift Codekit den Inhalt dieser Dateien und hängt sie an die Datei an.

Verwenden von Kit

Wir haben also gesehen, was Kit zu bieten hat. Sie sind vielleicht nicht viel, aber sie sind sicherlich stark genug, um das Leben einfacher zu machen, wenn Sie eine Menge HTML-Dateien bearbeiten.

In einem praktischen Szenario können wir unser Dokument in mehrere Dateien header.kit, zum Beispiel: header.kit, sidebar.kit, footer.kit, head.kit, opening.kit und closing.kit . Wir werden diese Dateien auf unsere Seiten importieren, so dass sie bei einer Änderung auf allen Seiten angewendet werden.

Dokument öffnen und schließen

Ich bin mir sicher, dass die Dateinamen ziemlich selbsterklärend sind, was die Dateien beinhalten, außer (vielleicht) dem opening.kit und dem closing.kit .

In unserem Beispiel unten enthält die Datei opening.kit den Doctype, das HTML-Eröffnungs-Tag und das Eröffnungs-Body-Tag. In dieser Datei importieren wir auch das head.kit das alles enthält, was innerhalb des Element, und kann auch mehrere globale Variablen definieren, die durch alle Dateien vererbt werden können:

Beachten Sie, dass ich auch zwei Variablen hinzugefügt habe: @body_class im body-Tag und @page_name im title-Tag. Diese Variablen ermöglichen es uns, verschiedene Klassen und Seitennamen auf den Seiten festzulegen. Wenn wir zwei Seiten mit dem Namen index.kit und about.kit, können wir in jeder dieser Dateien die Werte dieser beiden Variablen wie about.kit setzen:

index.kit

about.kit

Wenn wir die Dateien gespeichert haben, ersetzt Codekit die Variablen, die wir in das body Tag und den title mit diesen Werten eingefügt haben. Zu beachten ist jedoch, dass die Variablen vor der Aufnahme von opening.kit, sonst werden sie nicht abgeholt.

Fazit

Wie bereits erwähnt, könnte Kit die einfachste verfügbare Templatierungssprache sein. Es verwendet nur das HTML-Kommentar-Tag und bietet große Flexibilität beim Definieren von Variablen und Importieren von Dateien.

Die Möglichkeit, Variablen zu verwenden und Dateien in HTML zu importieren, bedeutet, dass wir unsere Produktivität erhöhen können, da wir unsere Codes nicht mehr mehrfach in mehreren Dateien ändern müssen, was sehr zeitaufwendig ist. Darüber hinaus ermöglicht es uns, unser Projekt modular und damit überschaubarer zu machen.

So erstellen Sie einen Bild-Slider mit Photoshop & jQuery

Zweifellos ist Bild-Slider eines der am häufigsten verwendeten Elemente im Business-Web-Design, aufgrund seiner relativ großen Größe, die in der Lage ist, die Aufmerksamkeit des Besuchers zu lenken, sobald sie die Website erreichen. Obwohl das Web damit begonnen hat, die Verwendbarkeit des Bildschiebers zu überdenken, gilt es immer noch als Muss für den Newcomer der Webdesignbranche.In di

(Tech- und Design-Tipps)

Android Fragmentierung: Die Geschichte bis jetzt

Android-Fragmentierung wird oft als die Achillesferse des Betriebssystems angesprochen . Kritiker weisen oft darauf hin, dass die Fragmentierung der Schlüsselfaktor dafür ist, dass Apples iOS das bessere mobile Betriebssystem ist, obwohl 81 Prozent der Smartphones der Welt auf einer Android-Version laufen.

(Tech- und Design-Tipps)