Dasar-dasar MAGICK.CSS
magick.css adalah framework CSS minimalis yang mudah digunakan dan mudah dipahami, (sebagian besar) tanpa kelas.- Terdiri dari satu file, dan semua opsi diberi komentar.
- Tujuannya adalah mencapai tampilan yang elegan dan jenaka seperti sihir sambil memaksimalkan keterbacaan dan kemampuan menyampaikan informasi.
Cara menggunakan MAGICK.CSS
magick.css disarankan digunakan bersama normalize.css.- Dapat diterapkan ke proyek dengan menambahkan dua baris ke HTML
<head> melalui CDN.
- Atau Anda dapat mengunduh file
magick.css dan menyertakannya di HTML <head>.
- Untuk proyek JS, dapat dipasang dengan
npm install dan digunakan dengan import di dalam kode.
- Jika digunakan bersama dokumen HTML5, 99% tidak memerlukan kelas, dan Anda dapat memanfaatkan beberapa fitur menarik.
Tata letak
- Untuk menata halaman menjadi kolom yang responsif dan mudah dibaca, semua konten dapat dibungkus dengan tag
<main>, lalu konten panjang dapat dibagi ke dalam beberapa bagian menggunakan tag <section>.
- Tag
<aside> dapat digunakan untuk menambahkan informasi pendukung, dan sidenote dapat memperluas poin tertentu atau memberikan konteks tambahan.
Tipografi
- Menunjukkan contoh tipografi yang disediakan oleh
magick.css.
- Judul di bawah
<h4> tidak diberi styling, sehingga pengguna dapat menerapkan gaya sendiri bila diperlukan.
Konten terstruktur
- Daftar dan tabel dibuat tetap sederhana agar tidak mengalihkan perhatian dari isi.
Formulir dan input
- Elemen interaktif dapat digunakan secara mandiri atau sebagai bagian dari formulir.
- Contohnya mencakup tombol, input teks, checkbox, radio button, fieldset, dan lain-lain.
Media dan figure
- Elemen media seperti gambar dan video dapat digunakan secara mandiri, atau ditampilkan sebagai figure untuk menambah struktur dan keanggunan pada konten, dengan caption untuk menambahkan konteks.
Kode, kutipan, dan format awal
- Kode dapat ditampilkan secara inline atau sebagai blok terpisah, dan kutipan ditambahkan menggunakan tag
<blockquote>.
Fitur tambahan
- Fitur tambahan seperti sidenote dan penomoran otomatis dapat digunakan, tetapi karena fitur-fitur ini memerlukan kelas khusus, mereka tidak termasuk dalam fungsi utama
magick.css.
Pendapat GN⁺
magick.css memberi pengguna cara untuk mengurangi kompleksitas CSS dan menyederhanakan desain halaman web.- Framework ini bisa sangat cocok terutama untuk situs web yang berfokus pada teks seperti dokumentasi atau blog, serta membantu pengguna tetap fokus pada konten.
- Namun, bagi pengembang yang ingin membangun fitur interaktif yang kompleks atau aplikasi web dinamis, framework ini bisa terasa terbatas.
- Framework CSS lain yang menawarkan fungsi serupa antara lain Bootstrap, Foundation, Bulma, dan masing-masing dapat dipilih sesuai kasus penggunaan dan preferensi tertentu.
- Saat mengadopsi
magick.css, perlu mempertimbangkan kebutuhan desain proyek dan batasan framework, serta menjaga keseimbangan yang baik antara kesederhanaan dan kemudahan penggunaan.
1 komentar
Opini Hacker News
Ada pendapat bahwa ini adalah contoh yang bagus ketika font sangat cocok dengan gayanya, sampai-sampai justru tidak terlalu mencolok.
Dinilai memiliki sistem desain yang indah dan cara penyajiannya juga cantik, serta disukai karena perhatian pada detail seperti tinggi baris dan ketebalan huruf. Juga disertai tautan untuk orang-orang yang tertarik pada kodenya. Ada sedikit kekecewaan karena tidak ada checkbox dan radio button kustom sehingga terasa mengurangi imersi, tetapi tetap memberi inspirasi untuk membuat blog.
Menunjukkan typo kecil pada contoh sederhana, dengan mengatakan bahwa yang harus ditutup adalah
main, bukanheader.Menyebut daya tarik situs pribadi yang memberi nuansa dokumen LaTeX, serta menilai gaya situs web superminimalis ala profesor kampus zaman dulu itu keren. Juga mengungkapkan harapan agar blog pribadi lebih populer.
Merekomendasikan Tufte CSS dan menyertakan tautannya.
Mengatakan bahwa font skrip huruf kapital merusak keterbacaan secara fatal, dan menyarankan agar menghindari huruf kapital serta memakai ukuran, ketebalan, dan italic untuk penekanan.
Umpan balik positif bahwa font-nya sangat mudah dibaca, imut, tetapi tidak berlebihan sehingga terasa menarik.
Ada pendapat bahwa ketika font jarak jauh diblokir, teks dirender dengan Comic Sans sehingga memberi kesan yang buruk.
Ada harapan agar lebih banyak framework CSS minimalis, terutama karena sulit menemukan gaya yang punya karakter.
Menyukai desainnya, dan setelah melihat terjemahan bahasa Mandarin menjadi penasaran bagaimana pendapat orang yang bisa membaca bahasa Mandarin. Juga menyebut bahwa pilihan font lebih terbatas dibanding bahasa Inggris, serta menunjukkan bahwa foto yang digunakan juga berbeda.