Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Frameworks

Perjalanan Whistle-Stop pada Kerangka UIkit

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Muhlis Tirowali (you can also view the original English article)

Sementara Bootstrap dan Foundation mungkin merupakan dua kerangka kerja depan-belakang  yang paling populer di kalangan perancang web, pada artikel ini saya akan memperkenalkan anda pada fitur UIkit, kerangka kerja depan-Belakang yang ringan dan modular yang saya gunakan di hampir semua proyek.

Catatan: Artikel ini mengasumsikan anda sudah familiar dengan bagaimana kerangka kerja depan-belakang bekerja. Selain itu, tujuan utama artikel ini adalah untuk tidak meliput bagian masing-masing pada kerangka ini secara ekstensif (misalnya sistem grid) Sebagai gantinya kita akan fokus pada presentasi singkat berbagai fitur UIkit yang berguna.

Segera Memulai

UIkit dibangun dan dikelola oleh YOOtheme, sebuah perusahaan Jerman yang mengkhususkan diri dalam membangun tema dan aplikasi untuk web.

Cara Download Uikit

Ada beberapa pilihan yang berbeda yang tersedia untuk menyertakan UIkit dalam proyek anda. Anda dapat menggunakan pengelola paket seperti Bower, Jaringan Pengiriman Konten (Isi) seperti cdnjs, atau anda dapat mengunduhnya secara manual dari halaman GitHub-nya. Perhatikan bahwa UIkit memerlukan jQuery, jadi pastikan anda menyertakannya dalam proyek anda.

Untuk keperluan tutorial ini, kami akan menggunakan cdnjs untuk menarik file UIkit yang diperlukan ke dalam demo CodePen kami. Sebagian besar waktu, untuk lebih sederhana, kita harus menyertakan file uikit.min.css dan uikit.min.js. Dalam dua contoh terakhir, kami juga akan menambahkan beberapa file tambahan yang tidak termasuk dalam kerangka inti. Perlu diingat bahwa UIkit bersifat modular, memungkinkan kita memuat hanya file yang benar-benar dibutuhkan.

Anda bisa belajar tentang struktur UIkit di halaman ini.

Menyesuaikan Uikit

Frameworknya sepenuhnya dapat disesuaikan. Sebelum mengunduh, kami dapat menimpa gaya penyetelan awal dan menerapkannya sendiri. Misalnya, jika kita ingin mengubah titik pemotongan penyetelan awal, kita dapat mengunjungi halaman customizer (penyesuaian) dan memeriksa opsi Advanced Mode. Dari sana, kita menemukan bagian titik Breakpoints dan menambahkan titik pemotongan baru kita. Kemudian, kita mendapatkan file CSS yang baru saja dihasilkan.

Pendukung Browser

UIkit bekerja di semua browser (aplikasi pencarian internet) baru-baru ini, khususnya:

Image taken from UIkits GitHub page
Gambar diambil dari halaman GitHub Uikit

Kegunaan Fitur UIkit

Sekarang saatnya untuk mengeksplorasi beberapa fitur UIkit yang berguna yang mungkin ingin anda gunakan di salah satu proyek mendatang anda!

Flexbox dan Grid

UIkit menyediakan komponen Grid dan Flex untuk membangun tata letak yang responsif. Untuk lebih memahami bagaimana komponen ini bekerja, mari buat tata letak yang sederhana. Sebelum melakukan itu, kita harus menambahkan file uikit.min.css ke contoh kita.

Berikut adalah persyaratannya:

  • Pada viewports hingga lebar 767px, semua kolom ditumpuk secara vertikal.
  • Pada viewports yang lebih lebar dari 767px, lebar kolom pertama dan ketiga adalah 25% dari lebar induk, sedangkan lebar kolom kedua adalah 50% dari lebar induk. 

Penambahannya terlihat seperti ini:

Perhatikan elemen .card di kolomkita. Untuk alasan gaya, kami akan menerapkan beberapa gaya dasar:

Inilah demo Codepen:

Seperti yang dapat anda lihat dari demo di atas (bila lebar viewport lebih besar dari 767px), elemen .card tidak memenuhi tinggi penuh induknya. Mari kita asumsikan kita ingin mewujudkannya. Mari kita asumsikan kita ingin membuat itu terjadi.

Solusi cepat mungkin memberi elemen target tinggi: 100%, bukan? Namun, ini tidak bekerja di beberapa browser (misalnya Safari), jadi kami harus meninggalkan pendekatan itu dan mencari alternatif. Salah satu triknya adalah mendefinisikan kolom sebagai kotak flex dengan memberi mereka pengelompokan pada uk-flex. Jadi sekarang jika kita menguji halaman lagi, kita akan melihat bahwa elemen .card mewarisi tinggi orang tua. ika anda ingin mendapatkan beberapa informasi lebih lanjut tentang mengapa solusi itu berjalan, saya sarankan anda melihat untaian Stack Overflow ini.

Inilah demo yang diperbarui:

Membuat Animasi berbasis Gulungan

Jika anda penggemar animasi berbasis Gulungan, anda pasti akan menghargai komponen Scrollspy UIkit. Komponen ini memungkinkan kita untuk memicu animasi dan acara saat kita menggulir ke atas dan ke bawah halaman. Mari kita lihat contoh hidup untuk memahami cara kerjanya.

Untuk contoh ini, kami akan menyertakan berkas uikit.min.css dan uikit.min.js dalam proyek kami.

Struktur kode mirip dengan contoh sebelumnya. Tujuan kami di sini adalah untuk memicu animasi yang berbeda ketika elemen dengan kelas biru (dalam total lima elemen) memasuki area pandang. Untuk menerapkan perilaku ini, kami menambahkan atribut data-uk-scrollspy ke elemen target; nilai mereka menjadi objek yang dapat dikonfigurasi yang mengendalikan animasi yang sebenarnya. Misalnya, toko properti objek cls menyimpan tipe animasi:

<div data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 300}">

Bagian dari penambahan yang diminta ditunjukkan di bawah ini:

Inilah demo Codepen yang sesuai:

Memanipulasi SVG

UIkit menyediakan cara praktis untuk mengendalikan tampilan SVG. Alih-alih membengkak HTML kita dengan segaris SVG, kita dapat menggunakan label img untuk memuat SVG kita, lalu tambahkan atribut data-uk-svg ke label tersebut. Dengan cara ini, gambar diubah menjadi segaris SVG yang bisa kita manipulasi nanti. Perilaku ini mungkin terjadi jika kita menambahkan file uikit.min.js ke proyek kami.

Penambahan untuk SVG sesederhana berikut ini:

<img src="IMAGE_PATH" alt="" data-uk-svg>

Sekarang dalam CSS, kita dapat menyesuaikannya. Sebagai contoh, dalam kasus kami kita mengubah beberapa gaya dasar:

Codepen demo:

Gambar Latar Belakang yang Responsif

Ada saat-saat ketika kita menginginkan sebuah gambar latar belakang untuk mengadopsi perilaku responsif tag img. Untuk melakukannya, kita dapat menggunakan UIkit's Cover komponen. Jadi, pertama kita tambahkan class uk-visible ke tag img dan kemudian membungkusnya dalam elemen orang tua dengan class uk-cover-background. Selanjutnya, secara opsional, kita dapat menggunakan komponen Utility dan Flex untuk memposisikan konten (isi) di atas gambar latar belakang.

Agar ini berhasil, kita harus menyertakan file uikit.min.css di proyek kami.

Dengan pemikiran tersebut, untuk membuat gambar latar yang responsif dengan konten (isi) yang dipusatkan secara vertikal dan horizontal di dalamnya, kami memerlukan HTML yang terlihat seperti ini:

Dalam CSS kita, kita sekarang harus menentukan gambar latar belakang untuk induk  teratas (tentu saja kita bisa menambahkan gambar latar belakang juga):

Itu memberi kita hasil sebagai berikut:

Membuat Overlay

UIkit menyediakan komponen Overlay untuk membantu membangun lapisan gambar. Yang benar-benar bagus tentang komponen ini adalah lapisan ini hadir dalam gaya yang berbeda dengan banyak pilihan menarik.

Untuk perilaku ini, satu-satunya file yang dibutuhkan adalah uikit.min.css. Contoh penambahan yang diperlukan untuk membangun empat overlays ditunjukkan di bawah ini:

Jangan takut dengan kode diatas. Sebagian besar disebabkan oleh sejumlah kelas pembantu yang telah kami tambahkan ke gambar kami. Untuk pemahaman yang lebih baik, pastikan untuk membaca dokumentasi untuk komponen ini.

Inilah demo Codepen yang dilekatkan:

Membuat Layar Penuh Responsif Baru

Salah satu komponen UIkit yang paling keren adalah komponen Slideshow. Hal ini memungkinkan kita untuk membuat (lihat apakah anda bisa menebak) tayangan slide responsif yang indah. Untuk mendemonstrasikannya, mari kita membangun tanyangan slide penuh responsif.

Berikut adalah file UIkit yang kita butuhkan:

  • uikit.min.css
  • slideshow.min.css
  • slidenav.min.css
  • uikit.min.js
  • slideshow.min.js

Kode untuk tanyangan slide terlihat seperti berikut:

Dua hal di sini patut disebut:

  • Nilai atribut data-uk-slideshow adalah objek yang dapat dikonfigurasi yang menentukan tampilan tayangan slide kami.
  • Saat melayang di atas slide, panah navigasi akan muncul. Ini adalah sesuatu yang opsional dan kami telah mencapainya berkat komponen Slidenav. Dengan cara yang sama, kita bisa menggunakan komponen Dotnav untuk menghasilkan navigasi titik.

Silahkan lihat di demo Codepen terkait di bawah ini:

Membuat Sticky Header

Komponen lain yang berguna adalah komponen Sticky. Mari kita lihat itu beraksi dengan membuat Stiky header (bagian atas).

Sekali lagi, inilah file UIkit yang dibutuhkan:

  • uikit.min.css
  • sticky.min.css
  • uikit.min.js
  • sticky.min.js

Di penambahan kita, kita menambahkan atribut data-uk-sticky ke elemen header (bagian atas). Selain itu, hanya untuk alasan gaya, kami menggunakan komponen navbar untuk membuat panel navigasi.

Inilah bagian dari kode HTML:

Untuk contoh ini, kami tidak memberikan nilai pada atribut data-uk-sticky. Tetapi jika kita ingin menyesuaikan perilaku penyetelan awal pada elemen sticky, kita harus memodifikasi objek yang dilewatkan sebagai nilai atribut ini.

Demo Codepen terkait:

Kesimpulan

Saya harap anda menikmati perjalanan  segera whistle-stop pada UIkit ini dan telah mengambil gagasan tentang apa yang dapat kami bangun dengan kerangka kerja yang menakjubkan ini. Tentu saja, ada banyak komponen hebat lainnya yang tidak bisa kita selami, jadi saya mendorong anda untuk melihat lebih jauh diri anda sendiri. Terakhir tetapi tidak sedikit, versi UIkit baru (v.3) akan diluncurkan pada bulan-bulan mendatang dengan fitur yang lebih menarik lagi. Tetap disini!

Jika anda memiliki pertanyaan mengenai UIkit, beri tahu kami di komentar di bawah ini.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.