Membuat tema UIKit tersuai dengan tongp dan kurang

Takeaways Key

Customizer UIKit boleh digunakan untuk membuat tema unik dan variasi tema (gaya) untuk laman web, membolehkan mereka menonjol dari orang ramai. Prosesnya mudah tetapi memerlukan aliran kerja yang betul untuk meminimumkan komplikasi.
Untuk menyediakan penyesuaian, seseorang mesti memuat turun atau mengklonkan repositori UIKit, memasang nod dan menelan, dan memasang kebergantungan pembangunan UIKit. Kemudian, dalam direktori root, folder untuk tema boleh dibuat dan fail yang diperlukan ditambah dan diubahsuai.
UIKit menyediakan cangkuk untuk penyesuaian yang lebih kompleks, membolehkan pemaju menambah peraturan baru atau mengubah yang sedia ada tanpa melanggar teras. Setiap komponen mempunyai cangkuk, yang boleh digunakan untuk membuat pemilih baru atau mengubah suai yang sedia ada.
Customizer GUI boleh digunakan secara langsung untuk pengubahsuaian yang lebih mudah. Ia membolehkan pemaju mengubah suai pembolehubah, mendapatkan fail CSS akhir untuk tema, dan membuat gaya secara automatik apabila membuat variasi tema. Ia juga membolehkan kawalan ke atas penglihatan dan ketersediaan pembolehubah dalam panel kiri customizer.

semua orang mahu menjadi unik. Saya rasa anda tidak akan menjadi sangat gembira jika di persekitaran anda terdapat banyak orang yang kelihatan seperti anda, bukan? Ini juga berlaku untuk orang lain. Rakan -rakan anda juga tidak akan senang melihat klon anda di mana -mana. Begitu juga dengan laman web kami.

Pada masa kini, membina laman web dengan rangka kerja depan adalah perkara biasa. Masalahnya adalah bahawa ramai orang menyalahkan rangka kerja sedemikian untuk menjadikan semua laman web "kelihatan sama". Tetapi alat itu bukan untuk dipersalahkan jika pemaju tidak sanggup membuat penyesuaian yang diperlukan.

Bagi anda yang mahukan laman web yang anda bina untuk menonjol dari orang ramai, saya akan menunjukkan bagaimana anda boleh menggunakan customizer UIKit untuk membuat tema dan variasi tema yang berbeza (gaya). Prosesnya mudah, tetapi anda memerlukan aliran kerja yang betul untuk melakukannya dengan jumlah sakit kepala minimum.

Menyediakan penyesuaian

Katakanlah bahawa anda ingin membuat tema gelap untuk laman web anda dengan oren sebagai warna aksen. Juga, anda mahu dua lagi variasi tema itu dengan warna aksen biru dan hijau. Mari lihat bagaimana kita boleh melakukannya. (Nota: Demi keringkasan, saya hanya akan menggunakan butang untuk menunjukkan proses).

kita perlu bermula dengan memastikan langkah -langkah berikut selesai:

Muat turun atau klon repositori UIKit.
Pasang Node dan Gulp, jika anda tidak memilikinya.
Pasang kebergantungan pembangunan UIKit. Anda boleh melakukan ini dengan menavigasi ke direktori akar UIKit dan memasang NPM dari terminal.

Apabila semua ini ditubuhkan dengan betul, kita boleh mula membuat tema kita.

Mencipta tema kami

Masih dalam direktori root, buat folder yang dipanggil "Custom". Dalam folder itu, buat satu lagi yang dipanggil "gelap" dan di dalamnya membuat fail yang dipanggil UIKit.less. Buka fail dan tambahkan yang berikut:

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

Baris pertama akan mendapat semua fail yang kurang dari kerangka teras dan baris kedua akan mengimport fail yang akan anda gunakan untuk mengubah suai butang UIKit lalai. Simpan dan tutup fail dan buat butang yang disebutkan di atas.

Sebelum membuat penyesuaian lanjut, anda perlu membuat tema anda tersedia secara tempatan dalam customizer. Untuk berbuat demikian, dalam direktori akar UIKit, jalankan yang berikut di terminal:

gulp indexthemes

Sekarang lancarkan salinan laman web UIKit tempatan anda (yang anda pasang) dan klik "Customizer" di bar navigasi. Apabila anda membuka senarai drop-down "Pilih Tema", anda harus melihat "Gelap" di hujungnya. Pada ketika ini, apabila anda memilihnya, anda akan melihat bahawa tiada gaya. Mengapa tidak? Mari kita lihat.

Satu perkara yang tidak disebutkan dalam dokumentasi UIKit dan yang boleh menyebabkan anda banyak sakit kepala, adalah tema anda memerlukan fail yang dipanggil UIKit-Customizer.less. Buat fail dan tambahkan baris berikut:

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

Anda mesti meletakkan fail itu, dengan garis di atas, dalam direktori akar tema (di dalam folder "gelap", dalam kes kami). Jika fail ini tidak hadir, anda tidak boleh menggunakan customizer dengan betul - nama tema akan muncul dalam senarai, tetapi gaya akan hilang.

Nota: Sebagai peraturan, fail UIKit-Customizer.Less harus mengimport semua fail yang digunakan oleh tema anda. Dalam contoh kami, mengimport UIKit.Less memenuhi keperluan ini kerana ia termasuk kedua -dua gaya uikit lalai dan gaya butang tersuai anda.

Selepas menambah fail UIKit-Customizer.Less, anda akan melihat bahawa kali ini semua komponen digayakan dengan betul. Jadi, kami sudah bersedia untuk bergerak.

Dalam senarai drop-down komponen, diletakkan di sudut kiri atas panel di sebelah kanan cascomizer, beralih ke "butang". Dengan cara ini, anda akan dapat melihat semua gaya butang yang tersedia. Sekarang kita boleh membuka butang.Less Fail dan mula menambah pengubahsuaian kami:

<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>

Dalam kod di atas, kami telah mengubahsuai pembolehubah untuk teks dan warna latar belakang butang lalai dalam keadaan normal, melayang, dan aktif. Untuk butang tertentu yang lain, kita juga perlu menukar pembolehubah tersebut:

<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>

menggunakan cangkuk di uikit

Mengubah pembolehubah UIKit adalah cara paling mudah untuk mengubah rupa komponen kerangka ketika berurusan dengan pengubahsuaian mudah. Tetapi untuk penyesuaian yang lebih kompleks, seperti menambah peraturan baru dan/atau mengubah yang sedia ada tanpa melanggar teras, UIKit menyediakan mekanisme khas. Ia menggunakan

cangkuk untuk dengan selamat menambahkan perubahan anda. Mari kita lihat ini dalam tindakan. Letakkan kod berikut di bawah pembolehubah, di dalam butang.Less File:

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

di sini, cangkuk untuk komponen butang digunakan untuk menambah jejari sempadan dan kesan drop-shadow.

Untuk perubahan yang lebih spesifik, UIKit menyediakan pelbagai cangkuk. Setiap komponen mempunyai cangkuk sedemikian. Ini berguna untuk membuat pemilih baru atau mengubah suai yang tidak mempunyai pembolehubah atau cangkuk yang tersedia untuk penyesuaian. Mari kita tunjukkan ini dengan menambahkan kod berikut:

gulp indexthemes

di sini kita mengeluarkan bayang-bayang drop untuk setiap butang aktif yang tidak dilumpuhkan. Kemudian kami mengeluarkan garis bawah pautan di semua negeri. Akhirnya, kami mengeluarkan garis besar pautan butang dan sebaliknya menambah sempadan yang bagus, ditunjukkan apabila pautan difokuskan. Simpan butang.Less File.

NOTA: Anda dapat melihat semua cangkuk yang tersedia untuk komponen tertentu dengan melihat pada akhir fail tanpa. Berikut adalah contoh untuk komponen butang.

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

Jadi sekarang tema utama sudah siap dan anda boleh menyemaknya dalam customizer. Muat semula halaman dan nikmati.

Membuat gaya untuk tema kami

Sekarang kita sudah bersedia untuk mencipta gaya tema. Dalam direktori tema gelap kami, kami akan membuat folder baru yang dipanggil "Styles" dan di dalamnya kami akan membuat satu lagi yang dipanggil "Blue". Dalam folder itu buat fail gaya kosong. Salin tiga baris pertama kod dari butang anda.Less Fail dan tampalnya ke dalam fail, kemudian tukar nilai @butang warna ke #09F dan simpan fail. Kandungan fail akan kelihatan seperti ini:

<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>

Jalankan indeks gulp di terminal sekali lagi untuk memasukkan gaya yang baru dibuat, kemudian kembali ke customizer dan menyegarkan halaman. Sekarang pada akhir senarai tema, anda harus melihat pilihan "gelap biru". Pilihnya dan anda akan melihat bahawa sekarang butang muncul dengan aksen biru yang bagus. Untuk gaya hijau, ulangi prosedur yang sama tetapi sebaliknya gunakan nilai warna #9C0.

Apabila anda berpuas hati dengan tema anda, anda boleh membinanya dengan menjalankan tugas ini:

<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>

Ini akan membina tema gelap dan akan memasukkannya ke dalam folder "dist" dalam direktori akar UIKit. Kemudian, dalam folder "CSS" anda akan menemui fail uikit.dark.css dan uikit.dark.min.css. Malangnya, fail -fail ini hanya mengandungi gaya dari tema utama anda. Gaya biru dan hijau tidak termasuk. Tetapi anda boleh mendapatkan fail CSS untuk mereka juga dengan menggunakan Customizer GUI, seperti yang saya akan jelaskan seterusnya.

menggunakan customizer GUI

Saya menunjukkan kepada anda bagaimana untuk membuat tema secara manual, kerana ia sentiasa baik untuk mengetahui mekanisme asas proses tertentu. Tetapi jika anda tidak memerlukan pengubahsuaian yang kompleks, anda boleh menggunakan Customizer GUI secara langsung. Mari kita meneroka langkah -langkah yang diperlukan.

• pergi ke customizer dan pilih tema yang anda mahu menyesuaikan.
• Gunakan panel kiri untuk mengubah suai pembolehubah. Biasanya, hanya pembolehubah global yang ditunjukkan. Untuk pembolehubah komponen yang dapat dilihat, anda perlu mengaktifkan pilihan "Mod Lanjutan". Secara lalai, pembolehubah yang nilainya ditakrifkan melalui pembolehubah lain tersembunyi. Dalam mod lanjutan, anda dapat melihat butang "(lebih)" di sebelah kumpulan yang termasuk jenis pembolehubah ini.
• Buat perubahan yang anda mahu dan tekan butang "Dapatkan CSS". Ini akan memberi anda fail CSS terakhir untuk tema anda. Anda boleh menggunakan butang ini untuk mendapatkan fail CSS untuk gaya biru dan hijau anda. Hanya pilih "Dark-Blue" atau "Dark-Green" dan klik butang.
  
  • Jika anda mahukan versi yang minified, periksa pilihan "Minify CSS"
  • Jika anda menggunakan bahasa kiri-ke-kanan, periksa "Mod RTL" dan keseluruhan tema akan ditukar secara automatik.
• Jika anda memukul butang "Dapatkan kurang" dan bukannya butang "Dapatkan CSS", fail output hanya akan mengandungi pembolehubah yang diubah. Dengan cara ini, anda boleh membuat gaya secara automatik apabila anda membuat variasi tema.

Setiap tema menggunakan fail customizer.json yang menentukan pembolehubah mana yang dipaparkan secara lalai atau hanya dalam mod lanjutan. Dengan mengubahsuai fail ini, anda boleh mengawal penglihatan dan ketersediaan pembolehubah dalam panel kiri customizer. Untuk maklumat lanjut mengenai ini, lihat halaman Customizer.json.

Nota: Apabila anda menjalankan tugas indeks, jika tema anda tidak mempunyai fail customizer.json sendiri (yang mana anda membuat tema baru), UIKit menggunakan fail dari tema lalai (/tema/ lalai/customizer.json). Jika anda merancang untuk menyesuaikan fail ini, anda perlu menyalin dan menampalnya dalam direktori root tema anda dan menjalankan indeks gulp sekali lagi untuk mengemas kini tema.

Kesimpulan

Anda melihat bahawa menyesuaikan rangka kerja front-end tertentu tidak begitu sukar tugas kerana ia mungkin kelihatan pada mulanya. Dengan pengetahuan tentang Gulp dan beberapa usaha tambahan, anda boleh membuat laman web anda cukup unik untuk menonjol dari orang ramai tanpa dilabelkan sebagai telah dibina dengan rangka kerja tertentu.

soalan yang sering ditanya mengenai tema UIKit tersuai dengan Gulp & kurang

Bagaimana saya boleh membuat tema UIKit tersuai menggunakan Gulp dan kurang? Pertama, anda perlu memasang Node.js dan NPM pada komputer anda. Kemudian, anda perlu memasang Gulp dan kurang menggunakan NPM. Selepas itu, anda boleh mengklonkan repositori UIKit dari GitHub dan memasang kebergantungannya. Sebaik sahaja anda melakukannya, anda boleh mula membuat tema tersuai anda dengan mengubah suai pembolehubah yang kurang dalam fail tema.less. Anda kemudian boleh menyusun tema anda menggunakan Gulp, yang akan menghasilkan fail CSS yang boleh anda sertakan dalam projek anda.

Apakah faedah menggunakan Gulp dan kurang untuk membuat tema UIKit? Gulp adalah pelari tugas yang boleh mengautomasikan tugas berulang seperti minifikasi, penyusunan, ujian unit, dan linting. Ini dapat menjimatkan banyak masa dan usaha. Kurang, sebaliknya, adalah pra-pemproses CSS yang membolehkan anda menggunakan pembolehubah, campuran, fungsi, dan ciri-ciri lain yang dapat menjadikan CSS anda lebih dapat dipelihara, dapat dipertahankan, dan diperpanjang. CSS Pre-Processors Seperti Sass atau Stylus untuk Membuat Tema UIKit? atau stylus untuk membuat tema UIKit. Walau bagaimanapun, anda perlu ingat bahawa UIKit dibina dengan kurang, jadi anda mungkin perlu melakukan kerja tambahan untuk menukar kod kurang kepada sass atau stylus.

Bagaimana saya boleh menyesuaikan warna, fon, dan Unsur -unsur lain dari tema UIKit?

Anda boleh menyesuaikan warna, fon, dan elemen lain tema UIKit dengan mengubah suai pembolehubah yang kurang dalam fail tema.less. Sebagai contoh, anda boleh menukar warna utama dengan mengubah suai pemboleh ubah warna @utama. Anda juga boleh menukar keluarga font dengan mengubah suai pemboleh ubah asas @font-family.

Bagaimana saya boleh menambah komponen tersuai ke tema UIKit? dengan membuat fail kurang baru untuk mereka dan mengimportnya ke dalam fail tema. Anda kemudian boleh menggunakan mixin dan pembolehubah UIKit untuk gaya komponen anda. Fail HTML dan membukanya dalam penyemak imbas web. Anda kemudiannya boleh memeriksa unsur -unsur dan periksa sama ada ia digayakan seperti yang diharapkan. Untuk meminimumkan fail CSS. Ini akan mengurangkan saiz fail dan meningkatkan kelajuan pemuatan laman web anda.

Bolehkah saya menjual tema UIKit tersuai saya di pasar seperti Themeforest? Seperti yang paling sesuai. Walau bagaimanapun, anda perlu memastikan bahawa tema anda memenuhi piawaian kualiti pasaran dan anda mempunyai hak yang diperlukan untuk menjualnya. ?

Anda boleh mengemas kini tema UIKit tersuai anda apabila versi baru UIKit dikeluarkan dengan menggabungkan perubahan dari versi baru ke dalam tema anda. Anda kemudian boleh menguji tema anda untuk memastikan ia berfungsi dengan betul dengan versi baru.

Bolehkah saya menggunakan tema UIKit tersuai saya dalam tema WordPress? Tema dalam tema WordPress. Anda hanya perlu memasukkan fail CSS yang dihasilkan dalam tema WordPress anda dan gunakan kelas UIKit dalam templat anda.

Atas ialah kandungan terperinci Membuat tema UIKit tersuai dengan tongp dan kurang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!