Erstellen eines benutzerdefinierten Uikit -Themas mit Schluck und weniger

Key Takeaways

Der Customizer von
• UIKIT kann verwendet werden, um einzigartige Themen und Themenvariationen (Stile) für Websites zu erstellen, sodass sie sich von der Menge abheben können. Der Prozess ist unkompliziert, erfordert jedoch einen ordnungsgemäßen Workflow, um Komplikationen zu minimieren.
• Um die Anpassung einzurichten, muss man das UIKIT -Repository herunterladen oder klonen, Knoten und Schluck installieren und die Entwicklungsabhängigkeiten von UIKIT installieren. Im Root -Verzeichnis kann dann ein Ordner für das Thema erstellt und die erforderlichen Dateien hinzugefügt und geändert werden.
• uikit bietet Hooks für komplexere Anpassungen, sodass Entwickler neue Regeln hinzufügen oder vorhandene ändern können, ohne den Kern zu brechen. Jede Komponente hat einen Haken, mit dem neue Selektoren erstellt oder vorhandene geändert werden können.
• Der GUI Customizer kann direkt für einfachere Änderungen verwendet werden. Es ermöglicht Entwicklern, Variablen zu ändern, die endgültige CSS -Datei für das Thema zu erhalten und beim Erstellen von Themenvariationen automatisch Stile zu erstellen. Außerdem ermöglicht es die Kontrolle über die Sichtbarkeit und Verfügbarkeit von Variablen im linken Bedienfeld des Anpassungspflichts.

Jeder möchte einzigartig sein. Ich denke, Sie werden nicht super glücklich sein, wenn in Ihrer Umgebung viele Leute genauso aussehen wie Sie, oder? Dies gilt auch für die anderen Menschen. Ihre Freunde werden auch nicht glücklich sein, überall Klone von Ihnen zu sehen. Gleiches gilt für unsere Websites.

Heutzutage ist es üblich, eine Website mit einem Front-End-Framework zu erstellen. Das Problem ist jedoch, dass viele Menschen solche Frameworks dafür verantwortlich machen, dass alle Websites „gleich aussehen“. Das Tool ist jedoch nicht schuld, wenn Entwickler nicht bereit sind, die erforderlichen Anpassungen vorzunehmen.

Für diejenigen unter Ihnen, die möchten, dass die von Ihnen erstellten Websites von der Masse abheben, werde ich demonstrieren, wie Sie den Customizer von Uikit verwenden können, um verschiedene Themen und Themenvariationen (Stile) zu erstellen. Der Vorgang ist unkompliziert, aber Sie benötigen einen ordnungsgemäßen Workflow, um dies mit einer minimalen Menge an Kopfschmerzen zu tun.

Einrichten der Anpassung

Nehmen wir an, Sie möchten ein dunkles Thema für Ihre Website mit Orange als Akzentfarbe erstellen. Außerdem möchten Sie zwei weitere Variationen dieses Themas mit blauen und grünen Akzentfarben. Mal sehen, wie wir es schaffen. (Hinweis: Aus Gründen der Kürze verwende ich nur Schaltflächen, um den Vorgang zu demonstrieren.)

Wir müssen damit beginnen, sicherzustellen, dass die folgenden Schritte abgeschlossen sind:

• Download oder klonen Sie das UIKIT -Repository.
• Knoten und Gulp installieren, wenn Sie sie noch nicht bereits haben.
• Installieren Sie die Entwicklungsabhängigkeiten von UIKIT. Sie können dies tun, indem Sie zum UIKIT -Root -Verzeichnis navigieren und die NPM -Installation vom Terminal ausführen.

Wenn all dies richtig eingerichtet ist, können wir unser Thema erstellen.

Erstellen Sie unser Thema

Erstellen Sie im Root -Verzeichnis einen Ordner mit dem Namen "benutzerdefiniert". Erstellen Sie in diesem Ordner eine andere namens "dunkel" und erstellen Sie eine Datei namens uikit.less. Öffnen Sie die Datei und fügen Sie Folgendes hinzu:

<span><span>@import "../../src/less/uikit.less";</span>
</span><span><span>@import "button.less";</span></span>

In der ersten Zeile werden alle weniger Dateien aus dem Kernrahmen abgerufen. Die zweite Zeile importiert die Datei, mit der Sie die Standard -UIKIT -Schaltflächen ändern werden. Speichern und schließen Sie die Datei und erstellen Sie die oben genannte Schaltfläche. Less -Datei im selben Verzeichnis.

Bevor Sie weitere Anpassungen vornehmen, müssen Sie Ihr Thema lokal im Customizer zur Verfügung stellen. Führen Sie dazu im UIKIT -Wurzelverzeichnis Folgendes im Terminal aus:

gulp indexthemes

Starten Sie jetzt Ihre lokale Kopie der UIKIT -Website (die Sie installiert) und klicken Sie in der Navigationsleiste auf "Customizer". Wenn Sie die Dropdown-Liste "Ein Thema auswählen" öffnen, sollten Sie am Ende "dunkel" sehen. Wenn Sie es auswählen, werden Sie feststellen, dass es kein Styling gibt. Warum nicht? Mal sehen.

Eine Sache, die in der Dokumentation von UIKIT nicht erwähnt wird und die Sie viel Kopfschmerzen kosten kann, ist, dass Ihr Thema eine Datei namens Uikit-Customizer benötigt. Erstellen Sie die Datei und fügen Sie die folgende Zeile hinzu:

<span><span>@import "uikit.less"</span></span>

Sie müssen diese Datei mit der obigen Zeile in das Root -Verzeichnis des Themas (im Ordner "dunkle", in unserem Fall) einfügen. Wenn diese Datei nicht vorhanden ist, können Sie den Customizer nicht ordnungsgemäß verwenden. Der Name des Themas wird in der Liste angezeigt, aber die Stile fehlen.

Hinweis: In der Faustregel sollte die Datei ohne Uikit-Customizer.less alle Dateien importieren, die Ihr Thema verwendet. In unserem Beispiel erfüllt das Importieren von uikit.less diese Anforderung, da sie sowohl die Standard -Uikit -Stile als auch Ihre benutzerdefinierten Tastenstile enthält.

Nach dem Hinzufügen der Datei uikit-customizer.less. Sie werden feststellen, dass diesmal alle Komponenten richtig gestaltet sind. Wir sind also bereit, weiterzumachen.

In der Dropdown-Liste der Komponente, die in der oberen linken Ecke des Panels auf der rechten Seite des Anpassungsanpassungsstoffe platziert ist, wechseln Sie zu „Taste“. Auf diese Weise können Sie alle verfügbaren Tastenstile sehen. Jetzt können wir die Schaltfläche ohne Schaltfläche öffnen.

<span><span>@button-color: #f90;</span>
</span><span><span>@button-hover-color: fade(@button-color, 75%);</span>
</span><span><span>@button-active-color: @button-color;</span>
</span>
<span><span>@button-background: #000;</span>
</span><span><span>@button-hover-background: lighten(@button-background, 20%);</span>
</span><span><span>@button-active-background: @button-hover-background;</span></span>

Im obigen Code haben wir die Variablen für den Text- und Hintergrundfarben der Standardschaltfläche in ihren normalen, schwebenden und aktiven Zuständen geändert. Für andere spezifische Schaltflächen müssen wir auch diese Variablen ändern:

<span><span>@button-primary-color: darken(@button-primary-background, 20%);</span>
</span><span><span>@button-success-color: darken(@button-success-background, 20%);</span>
</span><span><span>@button-danger-color: darken(@button-danger-background, 20%);</span>
</span>
<span><span>@button-primary-hover-color: fade(@button-primary-color, 75%);</span>
</span><span><span>@button-success-hover-color: fade(@button-success-color, 75%);</span>
</span><span><span>@button-danger-hover-color: fade(@button-danger-color, 75%);</span>
</span>
<span><span>@button-primary-active-color: lighten(@button-primary-color, 35%);</span>
</span><span><span>@button-success-active-color: lighten(@button-success-color, 35%);</span>
</span><span><span>@button-danger-active-color: lighten(@button-danger-color, 35%);</span></span>

Verwenden von Haken in uikit

Die Variablen von Uikits ändern, ist der einfachste Weg, um das Erscheinungsbild der Komponenten des Frameworks bei einfachen Modifikationen zu ändern. Für komplexere Anpassungen wie das Hinzufügen neuer Regeln und/oder das Ändern der vorhandenen ohne den Kern bietet UIKIT einen besonderen Mechanismus. Es verwendet

Hooks , um Ihre Änderungen sicher anzuhängen. Lassen Sie uns dies in Aktion sehen. Stellen Sie den folgenden Code unter die Variablen in die Schaltfläche ein.

<span><span>@import "../../src/less/uikit.less";</span>
</span><span><span>@import "button.less";</span></span>

Hier wird der Haken für die Knopfkomponente verwendet, um einen Randradius und einen Drop-Shadow-Effekt hinzuzufügen.

Für noch spezifischere Änderungen bietet UIKIT verschiedene Haken. Jede Komponente hat einen solchen Haken. Dies ist nützlich, um neue Selektoren zu erstellen oder diejenigen zu ändern, die weder eine Variable noch einen Haken für die Anpassung zur Verfügung haben. Zeigen wir dies, indem wir den folgenden Code hinzufügen:

gulp indexthemes

Hier entfernen wir die Drop-Shadow für jede aktive Taste, die nicht deaktiviert ist. Dann entfernen wir die Unterstreichung der Verbindungen in allen Staaten. Schließlich entfernen wir den Umriss des Taste -Links und fügen stattdessen einen schönen Rand hinzu, der angezeigt wird, wenn sich die Verbindung konzentriert. Speichern Sie die Schaltfläche ohne Datei.

Hinweis: Sie können alle verfügbaren Haken für eine bestimmte Komponente sehen, indem Sie genau das Ende seiner entsprechenden .losen -Datei betrachten. Hier ist ein Beispiel für die Schaltflächenkomponente.

<span><span>@import "uikit.less"</span></span>

Jetzt ist das Hauptthema bereit und Sie können es im Customizer überprüfen. Laden Sie einfach die Seite neu und genießen Sie.

Stile für unser Thema erstellen

Jetzt sind wir bereit, die Stile des Themas zu erstellen. Im Verzeichnis unseres dunklen Themas erstellen wir einen neuen Ordner namens "Styles" und im Inneren, in dem wir eine andere namens "Blue" erstellen. Erstellen Sie in diesem Ordner eine leere style.less -Datei. Kopieren Sie die ersten drei Codezeilen von Ihrer Schaltfläche. Less-Datei und fügen Sie sie in die Datei ein. Ändern Sie dann den Wert der @button-color in #09f und speichern Sie die Datei. Der Inhalt der Datei sieht so aus:

<span><span>@button-color: #f90;</span>
</span><span><span>@button-hover-color: fade(@button-color, 75%);</span>
</span><span><span>@button-active-color: @button-color;</span>
</span>
<span><span>@button-background: #000;</span>
</span><span><span>@button-hover-background: lighten(@button-background, 20%);</span>
</span><span><span>@button-active-background: @button-hover-background;</span></span>

Gulp -Indextheme im Terminal erneut ausführen, um den neu erstellten Stil einzuschließen, kehren Sie dann zum Customizer zurück und aktualisieren Sie die Seite. Jetzt am Ende der Themenliste sollten Sie eine "dunkelblaue" Option sehen. Wählen Sie es aus und Sie werden sehen, dass die Tasten jetzt mit einem schönen blauen Akzent erscheinen. Wiederholen Sie für den grünen Stil dieselbe Prozedur, verwenden Sie aber stattdessen einen Farbwert von #9c0.

Wenn Sie mit Ihrem Thema zufrieden sind, können Sie es erstellen, indem Sie diese Aufgabe ausführen:

<span><span>@button-primary-color: darken(@button-primary-background, 20%);</span>
</span><span><span>@button-success-color: darken(@button-success-background, 20%);</span>
</span><span><span>@button-danger-color: darken(@button-danger-background, 20%);</span>
</span>
<span><span>@button-primary-hover-color: fade(@button-primary-color, 75%);</span>
</span><span><span>@button-success-hover-color: fade(@button-success-color, 75%);</span>
</span><span><span>@button-danger-hover-color: fade(@button-danger-color, 75%);</span>
</span>
<span><span>@button-primary-active-color: lighten(@button-primary-color, 35%);</span>
</span><span><span>@button-success-active-color: lighten(@button-success-color, 35%);</span>
</span><span><span>@button-danger-active-color: lighten(@button-danger-color, 35%);</span></span>

Dies baut das dunkle Thema auf und steckt es in einen Ordner „dist“ im Uikit -Root -Verzeichnis. Im Ordner "CSS" finden Sie dann uikit.dark.css und uikit.dark.min.css -Dateien. Leider enthalten diese Dateien nur Stile aus Ihrem Hauptthema. Die blauen und grünen Stile sind nicht enthalten. Sie können jedoch auch die CSS -Dateien für diejenigen erhalten, indem Sie den GUI Customizer verwenden, wie ich als nächstes erklären werde.

Verwenden Sie den GUI Customizer

Ich habe Ihnen gezeigt, wie man ein Thema manuell erstellt, da es immer gut ist, den zugrunde liegenden Mechanismus eines bestimmten Prozesses zu kennen. Wenn Sie jedoch keine komplexen Änderungen benötigen, können Sie den GUI Customizer direkt verwenden. Lassen Sie uns die erforderlichen Schritte untersuchen.

• Gehen Sie zu Customizer und wählen Sie das Thema, das Sie anpassen möchten.
• Verwenden Sie das linke Feld, um die Variablen zu ändern. Normalerweise werden nur die globalen Variablen angezeigt. Damit die Komponentenvariablen sichtbar sind, müssen Sie die Option „Advanced Modus“ aktivieren. Standardmäßig ist eine Variable, deren Werte durch eine andere Variable definiert werden, versteckt. Im erweiterten Modus sehen Sie neben Gruppen eine Schaltfläche „(mehr)“, die solche Variablen enthalten.
• Nehmen Sie die gewünschten Änderungen vor und klicken Sie auf die Taste „CSS erhalten“. Dadurch erhalten Sie die endgültige CSS -Datei für Ihr Thema. Sie können diese Schaltfläche verwenden, um die CSS -Dateien für Ihre blauen und grünen Stile zu erhalten. Wählen Sie einfach "dunkelblau" oder "dunkelgrün" und klicken Sie auf die Schaltfläche.
  
  • Wenn Sie eine minifizierte Version wünschen, überprüfen Sie die Option "CSS minify CSS"
  • Wenn Sie links nach rechts Sprachen verwenden, überprüfen Sie den „RTL-Modus“ und das gesamte Thema konvertiert automatisch.
• Wenn Sie anstelle der Schaltfläche „CSS abrufen“ auf die Schaltfläche „weniger gufen“ klicken, enthält die Ausgabedatei nur die geänderten Variablen. Auf diese Weise können Sie Stile automatisch erstellen, wenn Sie Themenvariationen erstellen.

Jedes Thema verwendet eine Customizer.json -Datei, die definiert, welche Variablen standardmäßig oder nur im erweiterten Modus angezeigt werden. Durch Ändern dieser Datei können Sie die Sichtbarkeit und Verfügbarkeit der Variablen im linken Bereich des Customizer steuern. Weitere Informationen dazu finden Sie auf der Seite Customizer.json.

Hinweis: Wenn Sie die Indexthemes -Aufgabe ausführen, wenn Ihr Thema keine eigene Datei Customizer.json hat (was beim Erstellen eines neuen Themas der Fall ist), verwendet UIKIT die Datei aus dem Standardthema (/Themen/ Standard/Customizer.json). Wenn Sie diese Datei anpassen möchten, müssen Sie sie kopieren und in das Stammverzeichnis Ihres Themas einfügen und Gulp Indextheme erneut ausführen, um das Thema zu aktualisieren.

Schlussfolgerung

Sie haben gesehen, dass das Anpassen eines bestimmten Front-End-Frameworks keine so schwierige Aufgabe ist, wie es zunächst erscheinen mag. Mit einigen Kenntnissen über Schlupf und zusätzlichen Anstrengungen können Sie Ihre Websites so einzigartig genug machen, um sich von der Masse abzuheben, ohne als erstellt zu werden, dass er mit einem bestimmten Rahmen erstellt wurde.

häufig gestellte Fragen zum benutzerdefinierten Uikit -Thema mit Gulp & weniger

Wie kann ich ein benutzerdefiniertes UIKIT -Thema mit Gulp und weniger erstellen? Zuerst müssen Sie Node.js und NPM auf Ihrem Computer installieren. Anschließend müssen Sie Gulp und weniger mit NPM installieren. Danach können Sie das UIKIT -Repository aus GitHub klonen und seine Abhängigkeiten installieren. Sobald Sie dies getan haben, können Sie Ihr benutzerdefiniertes Thema erstellen, indem Sie die weniger Variablen in der thema.less -Datei ändern. Sie können Ihr Thema dann mit Gulp kompilieren, wodurch eine CSS -Datei generiert wird, die Sie in Ihr Projekt aufnehmen können.

Was sind die Vorteile der Verwendung von Gulp und weniger zum Erstellen eines UIKIT -Themas? Gulp ist ein Task -Läufer, der sich wiederholende Aufgaben wie Minifikation, Zusammenstellung, Unit -Tests und Leinen automatisieren kann. Dies kann Ihnen viel Zeit und Mühe sparen. Weniger ist andererseits ein CSS-Pre-Processor, mit dem Sie Variablen, Mischungen, Funktionen und andere Funktionen verwenden können CSS-Pre-Prozessoren wie Sass oder Stylus, um ein UIKIT-Thema zu erstellen? Stift, um ein UIKIT -Thema zu erstellen. Sie müssen jedoch berücksichtigen, dass UIKIT mit weniger gebaut ist. Möglicherweise müssen Sie zusätzliche Arbeiten erledigen, um den weniger Code in Sass oder Stylus umzuwandeln. Andere Elemente eines UIKIT -Themas? Sie können beispielsweise die Primärfarbe ändern, indem Sie die Variable der Primärfarbe ändern. Sie können auch die Schriftfamilie ändern, indem Sie die Variable der Schriftenfamilie-Basis ändern. Durch das Erstellen neuer weniger Dateien für sie und importieren sie in die thema.less -Datei. Sie können dann die Uikit -Mixins und Variablen verwenden, um Ihre Komponenten zu stylen.

Wie kann ich mein benutzerdefiniertes UIKIT -Thema testen? HTML -Datei und öffnen sie in einem Webbrowser. Sie können dann die Elemente überprüfen und überprüfen, ob sie wie erwartet gestylt werden.

Wie kann ich mein benutzerdefiniertes UIKIT Um die CSS -Datei zu minimieren. Dies reduziert die Dateigröße und verbessert die Ladegeschwindigkeit Ihrer Website. Wie Themeforest. Sie müssen jedoch sicherstellen ? Sie können dann Ihr Thema testen, um sicherzustellen, dass es mit der neuen Version korrekt funktioniert. Thema in einem WordPress -Thema. Sie müssen nur die generierte CSS -Datei in Ihr WordPress -Thema aufnehmen und die UIKIT -Klassen in Ihren Vorlagen verwenden.

Das obige ist der detaillierte Inhalt vonErstellen eines benutzerdefinierten Uikit -Themas mit Schluck und weniger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!